前端开发的正确姿势——各种文件的目录结构规划及引用
首先，要說(shuō)的是我們領(lǐng)導(dǎo)總掛在嘴邊的一句話：一入前端深似海。之前沒(méi)有接觸過(guò)前端，一直不懂這句話的含義，直到最近寫作業(yè)改需求的時(shí)候才發(fā)現(xiàn)，因?yàn)閣eb頁(yè)面是直接面向客戶的，所以需求的修改都和前端有關(guān)，有時(shí)候甚至不需要修改后臺(tái)的代碼就可以滿足新的需求。突然對(duì)前端工程師的未來(lái)表示擔(dān)憂，于我來(lái)說(shuō)，這些繁瑣的細(xì)節(jié)性工作我希望始終與其保持安全距離，嘻嘻！
不喜歸不喜，然而python是一門自動(dòng)化語(yǔ)言，分工不像java開(kāi)發(fā)那樣明確，所以也需要掌握前端的知識(shí)，關(guān)于前端的知識(shí)網(wǎng)上比比皆是，在這里就不多做贅述，今天想說(shuō)的還是我在學(xué)習(xí)過(guò)程中的一些困擾，面對(duì)那些繁瑣的js文件，css文件和html文件，你是不是也和我一樣蒙圈。。。不知道該往哪里放，不知道目錄結(jié)構(gòu)怎么安排？現(xiàn)在就來(lái)分享一下我從前端同事那里偷師來(lái)的目錄結(jié)構(gòu)和引用方式吧~~~
初識(shí)那些亂七八糟的文件要寫好一個(gè)web頁(yè)面，必不可少的是html文件，css文件，和js文件。可是這些東西到底是什么呢？舉個(gè)栗子：html就是一個(gè)赤裸裸的人，css則是人的衣服，而js就是一個(gè)人的行為，它支配頁(yè)面上的所有動(dòng)作。我們寫html，用各種標(biāo)簽、容器來(lái)承裝不同的文字、圖片，總之html做的就是把我們要表達(dá)的一股腦的寫在頁(yè)面上。但是它們?cè)谑裁次恢谩⑹裁搭伾?#xff0c;好看不好看，就不是html的工作了，這個(gè)裝飾頁(yè)面的工作就交給了css。有了css和html，我們的頁(yè)面就可以很好看了，但是再好看的頁(yè)面，也不過(guò)是一張圖片而已，要讓他們真正動(dòng)起來(lái)，就要依靠js了。好啦，掃盲結(jié)束，插播一段廣告：Python之路【第十一篇】前端初識(shí)之HTML，具體的html相關(guān)知識(shí)，見(jiàn)我偶像博客！
普通青年——所有的內(nèi)容都寫在html頁(yè)面里一直以來(lái)，我都乖乖的做普通青年，把所有的東西都寫在html文件里，這樣的好處是，寫著不亂，一個(gè)文件的內(nèi)容、樣式和所有的行為都在一起，不需要規(guī)劃、也不需要引入。我們只需要將js的代碼用<script>標(biāo)簽框起來(lái)，css代碼用<style>標(biāo)簽框起來(lái)，html代碼還是寫在body中，就ok啦~具體格式如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE?html> <html> <head> <meta?charset="utf-8" /> <title>主頁(yè)</title> </head> <script> ????//js代碼 </script> <style> ???<!--css代碼> </style> <body> ???<!--html代碼> </body> </html> |
? ? ?
盡管是屌絲程序員，但是我們不能一直low下去呀，感覺(jué)同事的這種規(guī)劃很合理，所以拿來(lái)用用。就是這樣，我們認(rèn)為css，js和web頁(yè)面用到的圖片都屬于靜態(tài)文件，統(tǒng)一放在static下對(duì)應(yīng)的文件夾中，所有的html頁(yè)面都放在templates文件夾下。這樣是為了別人看我們的頁(yè)面清晰，也是為了以后寫復(fù)雜的頁(yè)面做準(zhǔn)備哦！
那么問(wèn)題來(lái)了，我們寫在不同文件中的內(nèi)容，如何在html中使用呢？快來(lái)get新技能吧！栗子如下：
<html> <head> <meta charset="utf-8" /> <title>用戶登錄</title> <script src="../static/js/jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href="../static/css/sub.css"> </head> <body><div class="bg"><div class="pictrue"><img src="../static/img/loginPic.jpg" /></div><div class="main"><div class="center"><div class="administration">用戶登錄</div><div class="information"><div class="name"><input type="text" placeholder="用戶名" id="name"></div><div class="password"><input type="password" placeholder="密碼" id="password"></div></div><div class="submit"><div class="button" id = 'login'>登錄</div></div><a class="jump" target="_blank"; href = "register.html">立即注冊(cè)</a></div></div></div> </body> </html>我用了上面目錄結(jié)構(gòu)中的login.html文件做栗子，引入的是static/css/文件夾下的sub.css文件，其中l(wèi)ink標(biāo)簽起到了最重要的作用，下面我們就來(lái)解讀一下：
link rel="stylesheet" type="text/css" href="../static/css/sub.css"> link表示鏈接一個(gè)外部樣式表，rel 屬性指示被鏈接的文檔是一個(gè)樣式表，type 屬性規(guī)定被鏈接文檔的MIME 類型，該屬性最常見(jiàn)的 MIME 類型是 "text/css"，該類型描述樣式表。 href就是我們要引入文件的地址。向上面的目錄結(jié)構(gòu)，我需要從當(dāng)前l(fā)ogin.html文件所在的templates文件夾向上翻一層，然后再依次找到static/css/下面的sub.css文件。 這樣樣式文件就被順利的導(dǎo)入了。還是用上面目錄結(jié)構(gòu)中的login.html文件做栗子，引入的是static/js/文件夾下的jquery-1.11.1.min.js文件，其中script標(biāo)簽起到了最重要的作用，下面就來(lái)解讀一下：
<script src="../static/js/jquery-1.11.1.min.js"></script> script 標(biāo)簽用于定義客戶端腳本 src屬性指向外部腳本文件,與href的用法大致相同。附上css文件，就可以擁有一個(gè)完整的web登錄頁(yè)面啦！
/* CSS Document */ *{padding:0px; margin:0px; list-style:none; font-family:"微軟雅黑";} body{background: #f2f2f2;} .bg{ width:100%; float:left;} .main{ margin:0 auto; width:300px;position: absolute;right: 15%; margin-top:15%; height: 300px; background-color:#ffffff; border: 1px solid #cccccc;} .center{width: 250px; margin: 0 auto;} .administration{width: 100%; height: 30px; line-height: 30px;color: #3485FB; margin-top: 30px; float: left; font-size: 18px;} .information{float:left; width:100%;} .name{background:#fff;width:100%; height:35px; border:2px solid #DCDCDC; border-radius:10px; margin-top:20px;} .name span{width:45px; height:35px; float:left;} .name span img{float:left; margin:5px 0 0 8px;} .name input{ line-height:35px;height:35px;float:left;outline:none; width:201px; border:0; color:#C9C9C9; font-family:"微軟雅黑"; text-indent:5px;}.password{background:#fff;width:100%; height:35px; border:2px solid #DCDCDC; border-radius:10px; margin-top:20px;} .password span{width:45px; height:35px; float:left;} .password span img{float:left; margin:5px 0 0 8px;} .password input{ line-height:35px;height:35px;float:left;outline:none; width:201px; border:0; color:#C9C9C9; font-family:"微軟雅黑"; text-indent:5px;}.main .jump{float:right; width:65px; font-size:13px; margin-top:10px;} .submit{width:100%; float:left; } .submit .button{ cursor:pointer;font-size:14px; font-weight:bold;width:100%; margin:12px auto; background:#f7f7f7;height:35px; text-align:center; line-height:35px; border:2px solid #0086E0; border-radius:10px;} .pictrue{float: left;width:400px;height:400px; margin:180px 100px 50px 200px;}sub.css Code?
.
轉(zhuǎn)載于:https://www.cnblogs.com/jianxian/p/8779251.html
總結(jié)
以上是生活随笔為你收集整理的前端开发的正确姿势——各种文件的目录结构规划及引用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Unity Package Manage
- 下一篇： bzoj1407: [Noi2002]S