免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

開始寫代碼以來，我們發(fā)現(xiàn)最痛苦的不是深?yuàn)W的算法、不是復(fù)雜排版、也不是酷炫的動(dòng)畫，而是最最簡單的命名！漸漸發(fā)現(xiàn)開發(fā)過程中我們60%的時(shí)間都花在了給各種各樣的東西起名字：

• 項(xiàng)目名、包名、文件名
• 項(xiàng)目中引用的圖片資源文件名
• css的類名、id名
• js方法名、參數(shù)變量名
• 接口名，請求參數(shù)名、返回變量名

有時(shí)真的會(huì)被一波一波的名字攻擊的頭暈?zāi)X脹，索性隨便起個(gè)名字了事。但這往往卻是自己給自己挖坑的開始。這在一個(gè)人的小項(xiàng)目中看起來并沒有什么影響，但到了大型項(xiàng)目的多人協(xié)作和代碼維護(hù)時(shí)，其弊端就開始顯現(xiàn)。糟糕的命名往往給代碼帶來了一堵無形的墻，讓我們必須深入代碼去研究代碼具有的行為，增加了理解代碼的時(shí)間，也增加了代碼維護(hù)的難度。

一個(gè)正確的命名可以讓你更容易地理解代碼的程序，好的命名可以消除二義性，消除誤解，并且說明真實(shí)的意圖，甚至可以讓你有清新的氣息以讓你更能吸引異性。－－陳皓（左耳朵耗子）

總之，變量名是編程的第一步，第一步走好了，后面才走得好。試想，我們在看一段一目了然的代碼時(shí)有多么的輕松愉悅～

指導(dǎo)原則

為此我總結(jié)了幾條關(guān)于命名的指導(dǎo)原則，希望能對(duì)自己和大家的命名設(shè)計(jì)帶來幫助^_

黃金法則- 花一些時(shí)間去思考去權(quán)衡一下你的變量名
當(dāng)你設(shè)計(jì)好一個(gè)的變量名一個(gè)函數(shù)名的時(shí)候，別著急去使用他，停下來，想一想，這個(gè)變量名是否合適，是否還有更好的？也許你正在使用的是一個(gè)很不好的變量名。有些時(shí)候，需要我們權(quán)衡利弊一下，可能還要去和同事討論一下。

接下來是一些具體的原則

1. 語義
   應(yīng)該讓代碼“讀”起來就像自然語言一樣。

• 變量名應(yīng)該是名詞
  也就是說對(duì)于“物理上”的東西，命名其是什么，而不是做什么。比如某些物理上的名字，姓名，性別，文件路徑，網(wǎng)絡(luò)鏈接，文件描述符，下標(biāo)索引，類的屬性，這些都是物理上的東西，所以，其名字應(yīng)該是標(biāo)識(shí)其是什么，而不是用來做什么。
• 函數(shù)名應(yīng)是動(dòng)詞
  也就是說對(duì)于“邏輯上”的東西，命名其做什么，而不是是什么。比如某些邏輯上的名字，函數(shù)名，數(shù)據(jù)結(jié)構(gòu)，等。

2. 準(zhǔn)確、精簡
   例如：注意區(qū)分insert、append并替代add使用。盡可能使用email代替emailAddress，因?yàn)楹笳邘缀鯖]有提供比前者更多的信息。不要以任何理由使用臨時(shí)性的命名

// 反例
temp
button1
button2
a, b, c

3. 統(tǒng)一
   無論如何，至少在同一個(gè)項(xiàng)目中保持統(tǒng)一的命名規(guī)范。

4. 分割標(biāo)識(shí)符中的單詞
   不管你用什么命名方式，單詞還是要分一下，方便閱讀：

JS方法名（駝峰式）: someFunction
css類名 ： some-class
靜態(tài)變量： SOME_FUNCTION

具體規(guī)范

接下來是我總結(jié)的一下具體實(shí)用的命名規(guī)范，希望和大家一起探討

項(xiàng)目、包、文件命名

文件名要全部小寫, 可以包含下劃線 ( _ ) 或連字符 (-). 按項(xiàng)目約定來. 如果并沒有項(xiàng)目約定，“ _ ” 更好。

以下是引用** 視覺 **的圖片命名規(guī)則，視覺和前端er們同時(shí)遵守會(huì)幫助我們減少很多的工作量，發(fā)現(xiàn)合作是如此的愉快～^_

關(guān)于** 切圖命名 **規(guī)則：
模塊_類別_功能_狀態(tài).png
舉個(gè)栗子： nav_button_search_default.png

名稱|命名|名稱|命名
:---------------|:---------------|:---------------|:--------------
搜索 |search|按鈕|button(btn)
菜單欄|tab |背景 |BG
用戶|user|刷新|refresh
圖片|image|廣告|banner
注冊|register|鏈接|link
導(dǎo)航欄|nav|圖標(biāo)|icon
個(gè)人資料|profile|彈出|pop
刪除|delete|下載|download
登陸|login|標(biāo)題|title
注釋|note|返回|back
編輯|edit|內(nèi)容|content
左、右、中|left、right、center|標(biāo)志|logo
提示信息|msg| |
狀態(tài)（選中）|selected|狀態(tài)（不可點(diǎn)）|disabled
狀態(tài)（默認(rèn)）|default|狀態(tài)（按下）|pressed

HTMLSemantic Markup:語義標(biāo)記

HTML與CSS最佳實(shí)踐中重要的一條就是怎么來寫出有語義可讀性的標(biāo)記。好的語義即是你使用了合適的HTML標(biāo)簽與CSS的類名來傳達(dá)出你想表達(dá)的結(jié)構(gòu)含義。
譬如 h1 標(biāo)簽會(huì)告訴我們里面包裹的是一些很重要的標(biāo)題信息，另一個(gè)例子就是*footer *標(biāo)簽，會(huì)直截了當(dāng)?shù)馗阏f，這里面是包含一些頁腳信息。

寫HTML代碼時(shí)應(yīng)注意什么？

1. 盡可能少的使用無語義的標(biāo)簽div和span；

2. 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
3. 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
4. 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
5. 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
6. 每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來。

HTML5新增的語義標(biāo)簽

1. header元素
   header 元素代表“網(wǎng)頁”或“section”的頁眉。通常包含h1-h6元素或hgroup，作為整個(gè)頁面或者一個(gè)內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。
   整個(gè)頁面沒有限制header元素的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容塊增加一個(gè)header元素如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

<header> <hgroup> <h1>網(wǎng)站標(biāo)題</h1> <h1>網(wǎng)站副標(biāo)題</h1> </hgroup> </header>

2. footer元素
   footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

<footer> COPYRIGHT@小北</footer>

3. nav元素
   nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>

4. aside元素
   aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）
   在article元素之外使用作為頁面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁面。

<article> <p>內(nèi)容</p> <aside> <h1>作者簡介</h1> <p>萱萱，前端一枚</p> </aside> </article>

5. section元素
   section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁面里的分組。
   section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)，但是最好手動(dòng)給他們降級(jí)。如下：

<section> <h1>section是啥？</h1> <article> <h2>關(guān)于section</h1> <p>section的介紹</p> <section> <h3>關(guān)于其他</h3> <p>關(guān)于其他section的介紹</p> </section> </article> </section>

article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實(shí)際意義的就用div

6. article元素
   article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。（特殊的section）
   除了它的內(nèi)容，article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁腳。

<article> <h1>一篇文章</h1> <p>文章內(nèi)容..</p> <footer> <p><small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small></p> </footer> </article>

article使用注意：

• 自身獨(dú)立的情況下：用article
• 是相關(guān)內(nèi)容：用section
• 沒有語義的：用div

css命名

接下來是css中成“噸”的class的命名

命名規(guī)則

1. class 名稱中只能出現(xiàn)小寫字符和破折號(hào)（dashe）（不是下劃線，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn和 .btn-danger）。
2. 首字符必須是字母，禁止數(shù)字或其他特殊字符。
3. 避免過度任意的簡寫。.btn代表 button，但是 .s不能表達(dá)任何意思。
4. 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。避免使用123456…, red, blue, left, right之類的（如顏色、字號(hào)大小等）矢量命名，如class='left-news'、class='2'，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義。盡量用單個(gè)單詞簡單描述class名稱。
5. 基于最近的父 class 或基本（base） class 作為新 class 的前綴。
6. 雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：news-list、mod-feeds、mod-my-feeds、cell-title

Class 和 id的使用方法

把id留給后臺(tái)開發(fā)和JS使用，除此之外頁面的page id(如首頁的外層需要一個(gè)ID id='pageIndex')，頁面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。

CSS內(nèi)部的分類及其順序

1. 重置（reset）和默認(rèn)（base）（tags）：消除默認(rèn)樣式和瀏覽器差異，并設(shè)置部分標(biāo)簽的初始樣式，以減少后面的重復(fù)勞動(dòng),可以根據(jù)你的網(wǎng)站需求設(shè)置.
2. 統(tǒng)一處理：建議在這個(gè)位置統(tǒng)一調(diào)用背景圖（這里指多個(gè)布局或模塊或元件共用的圖）和清除浮動(dòng)（這里指通用性較高的布局、模塊、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！
3. 布局（grid）（.grid-）：將頁面分割為幾個(gè)大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！
4. 模塊（module）（.mod-）：通常是一個(gè)語義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊、各種列表、評(píng)論、搜索等！
5. 元件（unit）（.u-）：通常是一個(gè)不可再分的較為小巧的個(gè)體，通常被重復(fù)用于各種模塊中！比如按鈕、輸入框、loading、圖標(biāo)等！
6. 功能（function）（.fun-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動(dòng)等！不可濫用！
7. 皮膚（skin）（.skin-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類！
8. 狀態(tài)：為狀態(tài)類樣式加入前綴，統(tǒng)一標(biāo)識(shí)，方便識(shí)別，她只能組合使用或作為后代出現(xiàn)

推薦通用命名

1. 頁面框架命名，一般具有唯一性

2.模塊結(jié)構(gòu)命名

Class名稱|命名|Class名稱|命名
:---------------|:---------------|:---------------|:-- -------------
模塊(如：新聞模塊) |mod (mod-news) |標(biāo)題欄 |title
內(nèi)容 |content |次級(jí)內(nèi)容 |sub-content

3.導(dǎo)航結(jié)構(gòu)命名

4.一般元素命名

5.全局皮膚樣式

• 文字顏色(命名空間text-xxx)
  text-c1, text-c2,text-c3……

• 背景顏色(命名空間bg -xxx)
  bg-c1,bg-c2,bg-c3……

• 邊框顏色(命名空間border-xxx)
  border-c1,border-c2,border-c3……

JS命名（駝峰式）

JS的變量和方法命名除了遵循上文的指導(dǎo)原則外最重要的是采用駝峰式命名，保證見文知義。