代碼規(guī)范梳理(前端)
為協(xié)調(diào)協(xié)同開發(fā),盡量保持代碼整體的一致性以及可讀性以及可維護(hù)性,根據(jù)經(jīng)驗(yàn)對(duì)相關(guān)項(xiàng)目進(jìn)行梳理
Html篇
- html文件必須申明:
<!DOCTYPE html> - 文檔編碼如無特殊要求,使用
<meta charset="UTF-8"> - 根據(jù)相應(yīng)要求,引入其他meta 比如:
<!-- 聲明文檔的兼容模式：指示IE以目前可用的最高模式顯示內(nèi)容-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
使用link引入外部css文件到頁面的head中。
注意：一般我們不適用@import來引入外部css文件。使用script將js文件引入，并置于body底部，這時(shí)js文件會(huì)最后加載，html會(huì)最先加載，用戶體驗(yàn)會(huì)更好。（注意：并不是所有的js文件都要放置于body的底部，如當(dāng)我們需要使用js文件動(dòng)態(tài)修改meta元素內(nèi)容時(shí)，需要將js文件引入到head標(biāo)簽中。
參考: https://blog.csdn.net/qizhiqq/article/details/52584620
放在底部哪里？
許多人認(rèn)為只要放在底部了，無論是“body標(biāo)簽閉合之前”還是在“body標(biāo)簽閉合之后”都是一樣的，其實(shí)還是有差別的，因?yàn)閺腍TML2.0起放在“body標(biāo)簽閉合之后”就是不合標(biāo)準(zhǔn)的。之所以但是瀏覽器卻不會(huì)報(bào)錯(cuò)，是因?yàn)槿绻凇癰ody標(biāo)簽閉合之后”后再出現(xiàn)script或任何元素的開始標(biāo)簽，都是parse error，瀏覽器會(huì)忽略之前的</body>，即視作仍舊在body內(nèi)。
所以實(shí)際效果和寫在“body標(biāo)簽閉合之前”之前是沒有區(qū)別的。
所以，只要是讓瀏覽器做了多余的事都是不好的，雖然差別細(xì)微，但是咱們還是按照標(biāo)準(zhǔn)來，放在“body標(biāo)簽閉合之前”。語義化編寫代碼,即在瀏覽器兼容的前提下勁量使用語義化的標(biāo)簽(如果需要兼容ie參考:https://blog.csdn.net/m838115837/article/details/49535933)
一個(gè)標(biāo)簽的className不要過多,使用className進(jìn)行輔助語義化模塊劃分,class,id命名使用小駝峰,中間練接'-' 表示層級(jí);頁面id不能重復(fù),盡量避免使用id;
元素嵌套,以正確的嵌套規(guī)則嵌套,盡量避免內(nèi)聯(lián)元素嵌套塊狀元素;
結(jié)構(gòu)上如果可以并列書寫，就不要嵌套。
如果可以寫成<div></div><div></div>那么就不要寫成<div><div></div></div>元素沒有值的屬性必須使用自己的名稱做為值（checked、disabled、readonly、selected等等
正確閉合標(biāo)簽且必須閉合。
相應(yīng)注釋,模塊注釋,說明等需要的注釋寫在相應(yīng)的代碼的上方
頁面實(shí)現(xiàn)完成提交前記得代碼格式化
css篇
通常，一個(gè)項(xiàng)目我們只引用一個(gè)CSS，但是對(duì)于較大的項(xiàng)目，我們需要把CSS文件進(jìn)行分類。
我們按照CSS的性質(zhì)和用途，將CSS文件分成“基礎(chǔ)樣式”、“模塊(公共)樣式”，并以此順序引用（按需求決定是否添加版本號(hào)）。
<!--base:基礎(chǔ)樣式,用來瀏覽器默認(rèn)樣式reset,網(wǎng)站基類樣式設(shè)置-->
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">
- 使用類選擇器，放棄ID選擇器
- 分類的命名方法：使用語義化命名,層級(jí)已'-'鏈接,禁止無腦層級(jí)嵌套;
- 可以簡(jiǎn)寫的命名簡(jiǎn)寫比如:btn(要讓人看的懂哦?)
<!--以個(gè)人信息模塊為例,此模塊中包含一個(gè)個(gè)人信息展示,以及相應(yīng)新增按鈕-->
.btn-submit{ //功能類命名
}
.btn-close {
}
.infoWrap { //模塊小駝峰命名
xxxx:xxx;
}
.infoWrap-intro{ //以橫杠的形式表示層級(jí)
}
.parent .child { //不推薦,層級(jí)竟可能的少,不亂用.盡量寫在第一層級(jí)上少量標(biāo)簽元素的也可以不去單獨(dú)追加className,而使用嵌套
}
- 顏色代碼書寫:有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗(yàn)為主
color:#ffffff --> color:#fff; color:#eebbcc -->color:#ebc;顏色代碼小寫 - css 書寫順序:
- 位置屬性(position, top, right, z-index, display, float等);
- 大小(width, height, padding, margin);
- 文字系列(font, line-height, letter-spacing, color- text-align等);
- 背景(background, border等);
- 其他(animation, transition等)
備注:以大模塊做前綴,可以很好的避免樣式污染,以及提高語義化
JavaScript 篇
- 避免全局命名空間污染;es6開發(fā)使用相應(yīng)的const,let;
- 使用var 定義時(shí),以閉包包裹
(function(window){
'use strict';
var x = 10,y = 100;
})(window);
- 盡量以對(duì)象形式分割模塊
- js命名:
- 命名:整體以小駝峰方式命名
- 私有（保護(hù)）成員：必須以下劃線_開頭
- 常量名：必須使用全部大寫的下劃線命名法，如IS_DEBUG_ENABLED
- 布爾變量:boolean類型的應(yīng)當(dāng)使用is、has等起頭，表示其類型,如:isClose,hasOpen
- 方法名:'fn'前綴,如fnCheckIsUpdate,使用語義化簡(jiǎn)介的英文描述方法,函數(shù)名應(yīng)當(dāng)用動(dòng)賓短語
- 類名命名:類名應(yīng)當(dāng)用名詞,如:
const productList =[]; const customerInfo ={};let isNewCustomer =false;單獨(dú)的變量一般統(tǒng)合到一個(gè)對(duì)象里,避免申明過多的變量 - 代碼注釋:注釋要盡量簡(jiǎn)單，清晰明了。著重注釋的意思，對(duì)不太直觀的部分進(jìn)行注解：
- 代碼書寫:變量必須先申明后調(diào)用,代碼整體風(fēng)格,盡量的變量申明在文件的開頭(個(gè)別變量可能編寫函數(shù)時(shí)才用到1兩次,可以寫在調(diào)用函數(shù)上方處), 文件的尾部書寫自運(yùn)行函數(shù);中間定義各種函數(shù);
- 函數(shù)的申明:函數(shù)以函數(shù)申明的方式進(jìn)行申明:
function fnName(fnPrama){},盡量避免用函數(shù)表達(dá)式進(jìn)行申明:var fnName = function(){}
UI 篇
- 設(shè)定web/app的基色,內(nèi)部顏色保持盡量統(tǒng)一,功能顏色劃分準(zhǔn)確,顏色類盡量別超過5個(gè);
- 出基元件的類型,樣式,顏色等標(biāo)注,包括但不局限:表單,搜索框,按鈕,列表,字體顏色,通用字體大小等等
