資訊專欄INFORMATION COLUMN
摘要：當(dāng)然我們還可以引入框架，這些框架一般都自帶模板處理引擎，比如等語(yǔ)義化命名和語(yǔ)義化標(biāo)簽我們盡量多采用語(yǔ)義化來(lái)命名，并且采用語(yǔ)義化標(biāo)簽來(lái)書(shū)寫(xiě)代碼，多用中新增的標(biāo)簽來(lái)書(shū)寫(xiě)。
1.黃金法則（Golden rule）
不管有多少人參與同一個(gè)項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫(xiě)的。
Every line of code should appear to be written by a single person, no matter the number of contributors.
這就需要在一個(gè)項(xiàng)目中，我們永遠(yuǎn)遵循同一套編碼規(guī)范。在項(xiàng)目開(kāi)發(fā)前，制定一套行之有效的編碼規(guī)范，每個(gè)項(xiàng)目組成員都要按這個(gè)規(guī)范來(lái)編碼。
2.命名規(guī)范
CSS 文件名使用英文小寫(xiě)，多個(gè)單詞時(shí)，中間用下劃線（_）連接，如：index.html web-guide.html
id 命名使用英文駝峰命名法，多采用語(yǔ)義化來(lái)命名
自定義屬性采用英文小寫(xiě)命名，多個(gè)單詞時(shí)，中間用中劃線（-）連接，如：generate-catalogue
以 data- 開(kāi)始的屬性名，是用來(lái)存儲(chǔ)數(shù)據(jù)的，具體可參考 W3C Html 5 data- 。html可以通過(guò) dataset 來(lái)取屬性中的值，對(duì)于不支持的瀏覽器，可以通過(guò)getAttribute來(lái)獲取。例如：data-city="ShangHai" ，如果對(duì)應(yīng)的html標(biāo)簽id為 cityList，則 document.getElementById("cityList").dataset("city"); 對(duì)于不支持的瀏覽器，應(yīng)該document.getElementById("cityList").getAttribute("-data-city");
3.書(shū)寫(xiě)規(guī)范
3.1 語(yǔ)法
使用兩個(gè)空格來(lái)代替制表符（tab）作為縮進(jìn)，— 這是保證代碼在各種環(huán)境下顯示一致的唯一方式
嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）
對(duì)于屬性中的值，確保全部使用雙引號(hào)，不要使用單引號(hào)，也不要省略引號(hào)
不要在自閉合（self-closing）元素的尾部添加斜線 — HTML5 規(guī)范 中明確說(shuō)明這是可選的
不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如， 或
不要一行寫(xiě)太長(zhǎng)的html代碼，建議設(shè)置最大長(zhǎng)度為120列，超過(guò)120列是最好換行書(shū)寫(xiě)，方便閱讀和排版
嵌套元素最好多帶帶寫(xiě)在一行
行內(nèi)元素中不要嵌套塊級(jí)元素，比如：不推薦寫(xiě)法
p標(biāo)簽中是不能嵌套塊級(jí)元素的，瀏覽器會(huì)解析為兩個(gè)獨(dú)立的標(biāo)簽，而不能到達(dá)你想要的結(jié)果
3.2 HTML5 doctype
為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
3.3 語(yǔ)言屬性 Language attribute
根據(jù) HTML5 規(guī)范：
強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。
更多關(guān)于 lang 屬性的知識(shí)可以從 此規(guī)范 中了解。
3.4 IE 兼容模式
Internet Explorer 支持使用 標(biāo)簽來(lái)指定使用什么版本的 IE 來(lái)渲染頁(yè)面。除非有強(qiáng)烈的特殊需求，否則最好設(shè)置為 edge mode，從而讓 IE 采用其所支持的最新模式來(lái)渲染。
具體信息可以參考 這里
3.5 字符編碼
通過(guò)聲明一個(gè)明確的字符編碼，讓瀏覽器正確的呈現(xiàn)內(nèi)容，防止出現(xiàn)亂碼，通常字符編碼為 UTF-8
3.6 引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。
3.7 實(shí)用高于完美
盡量遵循 HTML 標(biāo)準(zhǔn)和語(yǔ)義，但是不應(yīng)該以浪費(fèi)實(shí)用性作為代價(jià)。任何時(shí)候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來(lái)解決問(wèn)題。
3.8 屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該放在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)該盡量少使用（例如，頁(yè)面內(nèi)的書(shū)簽），因此排在第二位。
以上順序也不一定是絕對(duì)的，可以根據(jù)需要把常用的放在首位
3.9 布爾（boolean）型屬性
Boolean 屬性指不需要聲明值的屬性。XHTML 需要每個(gè)屬性聲明值，但是 HTML5 并不需要。了解更多內(nèi)容，參考 WhatWG section on boolean attributes
一個(gè)元素中 Boolean 屬性的存在表示取值 true，不存在則表示取值 false。如果一定要為其賦值的話，請(qǐng)參照 WhatWG 中的說(shuō)明。
如果屬性存在，其值必須是空字符串或 [...] 屬性的本身名稱，并且不要在首尾添加空白符。
簡(jiǎn)單來(lái)說(shuō)，就是不用賦值。
雖然 HTML5是這樣規(guī)定的，但是對(duì)于IE瀏覽器，如果不指定屬性值，有時(shí)會(huì)有問(wèn)題的，尤其是readonly和 disabled ，所以最好還是設(shè)置為 readonly="readonly" disabled="disabled"
3.10 減少標(biāo)簽嵌套的數(shù)量
在編寫(xiě) HTML 代碼時(shí)，盡量避免多余的父節(jié)點(diǎn)。很多時(shí)候，需要通過(guò)迭代和重構(gòu)來(lái)使 HTML 變得更少。 請(qǐng)看下面的例子
3.11 避免利用JavaScript 生成標(biāo)簽或html片段
通過(guò) JavaScript 生成的標(biāo)簽或html片段讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時(shí)盡量避免，我們可以采用模板的方式來(lái)處理，常用的模板有
handlebars（模板引擎類），Ember.js 就采用該模板引擎
knockoutjs，除了支持模板，他還是一個(gè)輕量級(jí)的MVVM框架
mustashe， 一個(gè)模板引擎
JsRender，一個(gè)非常好用的html模板引擎類
在不引入其他mvc或mvvm框架的前提下，采用 JsRender 或 handlebars 來(lái)處理html模板，這兩個(gè)模板支持循環(huán)、條件語(yǔ)句，還支持在模板中動(dòng)態(tài)執(zhí)行JavaScript腳本（不建議這樣做）。當(dāng)然我們還可以引入MVC框架，這些框架一般都自帶模板處理引擎，比如Angular、Ember、KnockoutJs等
4.語(yǔ)義化命名和語(yǔ)義化標(biāo)簽
我們盡量多采用語(yǔ)義化來(lái)命名id，并且采用語(yǔ)義化標(biāo)簽來(lái)書(shū)寫(xiě)html代碼，多用html5中新增的標(biāo)簽來(lái)書(shū)寫(xiě)。
5.Emmet幫助我們快速書(shū)寫(xiě)html代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49614.html
摘要：前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實(shí)踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂，盡量保持不重復(fù)沖突，盡量不要用。我覺(jué)得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來(lái)的名稱，會(huì)生成。 前端編碼規(guī)范之：Git使用規(guī)范 前端編碼規(guī)范之：樣式（scss）編碼規(guī)范 前端編碼規(guī)范之：HTML結(jié)構(gòu)規(guī)范 前端編碼規(guī)范之：Vue最佳實(shí)踐 前端編碼規(guī)范...
摘要：用兩個(gè)空格代替制表符這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。編輯器配置將你的編輯器按照下面的配置進(jìn)行設(shè)置，以免常見(jiàn)的代碼不一致和差異用兩個(gè)空格代替制表符保存文件時(shí)刪除尾部的空白符設(shè)置文件編碼為在文件結(jié)尾添加一個(gè)空白行。 黃金定律 永遠(yuǎn)遵循同一套編碼規(guī)范 - 可以是這里列出的，也可以是你自己總結(jié)的。如果發(fā)現(xiàn)規(guī)范中有任何錯(cuò)誤，敬請(qǐng)指正。 HTML 語(yǔ)法 用兩個(gè)空格代替制表符 (ta...
摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫(xiě)規(guī)范和的標(biāo)簽屬性類名都必須使用小寫(xiě)字母和的屬性類名命名必須具有語(yǔ)義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫(xiě)格式，樣式代碼保持一行，多個(gè)選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫(xiě)規(guī)范...
摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫(xiě)規(guī)范和的標(biāo)簽屬性類名都必須使用小寫(xiě)字母和的屬性類名命名必須具有語(yǔ)義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫(xiě)格式，樣式代碼保持一行，多個(gè)選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫(xiě)規(guī)范...
摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫(xiě)規(guī)范和的標(biāo)簽屬性類名都必須使用小寫(xiě)字母和的屬性類名命名必須具有語(yǔ)義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫(xiě)格式，樣式代碼保持一行，多個(gè)選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫(xiě)規(guī)范...
閱讀 3420·2021-11-24 09:38
閱讀 3196·2021-11-22 09:34
閱讀 2112·2021-09-22 16:03
閱讀 2373·2019-08-29 18:37
閱讀 383·2019-08-29 16:15
閱讀 1774·2019-08-26 13:56
閱讀 867·2019-08-26 12:21
閱讀 2208·2019-08-26 12:15
