前端代碼規範（結合本身團隊實際須要總結）

時間 2019-12-11

標籤前端代碼規範結合本身團隊實際須要總結简体版

原文原文鏈接

1、通常規範javascript

一、命名規範css

（1）以英文命名，避免出現拼音命名。html

（2）文件命名全小寫，如須要分割以-鏈接。如：my-filter.js前端

（3）css 選擇器命名分割以-鏈接。如：.main-box-headerjava

二、代碼縮進git

（1）以TAP爲一次縮進。github

三、代碼註釋web

（1）關鍵步驟必須寫註釋。chrome

（2）不要寫你的代碼都幹了些什麼，而要寫你的代碼爲何要這麼寫，背後的考量是什麼。固然也能夠加入所思考問題或是解決方案的連接地址。數組

四、代碼檢查使用JSLint或JSHint對javascript 代碼進行檢查。

2、HTML規範

一、文檔類型：使用HTML5文檔類型聲明。<!DOCTYPE html>

二、結構(HTML)、表現(CSS)、行爲(JS)代碼分離.

HTML文件中只包含標籤，將表現放入樣式表中，將全部動做行爲放入腳本文件中。在HTML的<head>中引入樣式文件，在</body>以前引入腳本文件。

三、<meat>聲明

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

讓網頁寬度適應屏幕寬度，多用於移動端。

<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" />

<meta name="renderer" content="webkit|ie-comp|ie-stand">

讓360瀏覽器默認進入極速模式

四、<img> 標籤必須添加alt屬性。

在圖像沒法顯示時的替代文本。在網速慢、圖片src屬性錯誤、瀏覽器禁用圖片或是屏幕閱讀器中alt屬性很重要，且利於SEO。

五、ID和錨點

頁面中重要的部分，如：頁頭、導航、主體、頁腳等加上ID。

單選、複選中爲<input >加ID並在<lable>標籤中將for指向此ID。

例如：

<input  type="checkbox" id="allowTrace" value="manual">

<label for="allowTrace">

    容許trace

</label>

3、CSS規範

一、Css選擇器層級

錯誤示範：

.content_box form ul li {height:30px;margin:10px;}

錯誤緣由：樣式指向不精準，使得受影響的標籤範圍太大，當多個頁面同時引用同同樣式表時，容易出現不可預見的問題。

#final #content .con_border .system_time .default_checkbox {}

錯誤緣由：選擇器太多，權重過高，不利於後期維護。

.access_control > ul > li > ul > li > input{
    margin-right:10px;
}

錯誤緣由：選擇器太多，影響運行效率，不利於樣式複用。儘可能避免使用後代選擇器。

建議：層級儘可能不超過三級，防止出現權重過高，不利於後期的覆蓋與維護。

二、!important

儘可能避免使用!important，由於這是css裏面的終極大招，用多了傷元氣。

三、合理的避免使用ID選擇器。

通常狀況下ID不該被應用於樣式表中。由於ID樣式不能被複用且每一個頁面中只能使用一次ID。還有一個緣由是ID選擇器權重很高。

四、儘可能避免使用元素選擇器

錯誤示範：

form ul li em{

}

推薦寫法：

.content .title{

}

五、css 書寫順序

(1)位置屬性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)

(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其餘(animation, transition等)

6、縮寫屬性

例如：margin

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

簡寫：

margin:1px 2px 3px 4px;

例如：背景

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

縮寫：

background:#f00 url(background.gif) no-repeat fixed 0 0;

七、顏色值使用小寫的十六進制數字

不推薦：

color:#FF22AA;

推薦：

color:#f2a;

4、JAVASCRIPT規範

一、變量命名：駝峯命名法

例如：userName,passWorld;

二、==與===

老是使用 === 精確的比較操做符，避免在判斷的過程當中，由 JavaScript 的強制類型轉換所形成的困擾。

若是你使用 === 操做符，那比較的雙方必須是同一類型爲前提的條件下才會有效。在只使用 == 的狀況下，JavaScript 所帶來的強制類型轉換使得判斷結果跟蹤變得複雜。

三、變量聲明

使用 var 來聲明變量。原則上不建議使用全局變量。如不指定 var，變量將被隱式地聲明爲全局變量，這將對變量難以控制。若是沒有聲明，變量處於什麼定義域就變得不清（能夠是在 Document 或Window 中，也能夠很容易地進入本地定義域）。因此，請老是使用 var 來聲明變量。

四、全局污染

除了使用var聲明變量外，還可使用匿名函數包裹代碼防止全局命名空間被污染。

(function(){

     // Code goes here

}());

(function(log, w, undefined){

    var x = 10,
    y = 100;
    log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));

五、eval 函數（魔鬼）

eval() 不但混淆語境還很危險，總會有比這更好、更清晰、更安全的另外一種方案來寫你的代碼，所以儘可能不要使用 evil 函數。

六、字符串拼接

按必定長度截斷字符串，並使用 + 運算符進行鏈接。分隔字符串儘可能按語義進行，如不要在一個完整的名詞中間斷開。特別的，對於 HTML 片斷的拼接，經過縮進，保持和 HTML 相同的結構。

var html = ''

    + '<article>'

    +     '<h1>Title here</h1>'

    +     '<p>This is a paragraph</p>'

    +     '<footer>Complete</footer>'

    + '</article>';

var html = [

    '<article>',

        '<h1>Title here</h1>',

        '<p>This is a paragraph</p>',

        '<footer>Complete</footer>',

    '</article>'

];

html = html.join('');

七、對有序集合進行遍歷時，緩存length

雖然現代瀏覽器都對數組長度進行了緩存，但對於一些宿主對象和老舊瀏覽器的數組對象，在每次 length 訪問時會動態計算元素個數，此時緩存 length 能有效提升程序性能。

for (var i = 0, len = elements.length; i < len; i++) {
 
    var element = elements[i]; 
    // ...... 
}

注：本文引用《前端代碼基礎編寫規範》v1.1

　　參考百度前端JavaScript編碼規範https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。