前端規範

時間 2019-12-10

標籤前端規範简体版

原文原文鏈接

規範的目的

（1）.提升團隊開發效率。

（2）.有利於項目的後期維護。

（3）.提升代碼質量

前端規範主要包括以下幾個部分：

（1）.HTML規範。

（2）.CSS規範。

（3）.JavaScript規範

--------通用規範-------

文件命名規範

文件名統一使用小寫，字母、數組和下劃線，避免操做系統對大寫不敏感及書寫錯誤

使用英文字符起始

文件的名稱儘可能見詞達意，有多個單詞組成使用減號( - )分割例如：result-fail

testScript.js

testMainClass.css

test_reg.html

script.js

上面的都是不推薦方式，逐個分析以下：

（1）.第一行問題在於，文件名稱都中有大寫字符，規範要求都是小寫。

（2）.第二行的問題與第一行相同。

（3）.第三行使用下劃線做爲分隔符，要使用中劃線分隔。

（4）.第四行使用數字做爲名稱的開頭，規範要求始終使用英文字符做爲起始。

外部資源引入

推薦寫法

URL所指向的具體路徑，不要指定協議部分（http:, https:）其餘類型協議是不可以省略，好比FTP協議。

文本縮進

兩個空格or 四個空格（統一）

編碼格式

（1）.在HTML中指定編碼<meta charset="utf-8">。

（2）.無需使用@charset 指定樣式表的編碼，它默認爲UTF-8 。

（3）.js文件一樣推薦使用utf-8編碼方式。

id和class命名

屬性命名: 只能是26個英文字母、數字和連字符（-），其餘字符都不要出現，包括漢字

屬性值大小寫

（1）、id與class屬性值推薦小寫形式

（2）屬性的定義，統一使用雙引號

鏈接符使用

屬性值是多個單詞的合成時，推薦單詞之間使用連字符。

-------- HTML編碼規範-------

推薦使用HTML5標準的文檔類型：<!DOCTYPE html>

標籤閉合

腳本加載方式

引入js及 css時可省略type屬性

單雙引號，推薦使用 ‘’

標籤屬性一概使用小寫

代碼註解明確

禁止id屬性重複

--------javascript編碼規範-------

變量命名使用駝峯

var testModules = {};

私有屬性、變量和方法已下劃線「 _ 」開頭

var _privateMethod = {};

常量，使用所有字母大寫，單詞間下劃線分隔的命名「_」

var USR_ID = {};

True 和 False 布爾表達式

類型檢測優先使用 typeof。對象類型檢測使用 instanceof。null 或 undefined 的檢測使用 == null。

下面的布爾表達式都返回 false:

1) null

2) undefined

3) '' 空字符串

4) 0 數字0

但當心下面的, 可都返回 true:

1) '0' 字符串0

2) [] 空數組

3) {} 空對象

條件(三元)操做符 (?:)

三元操做符用於替代 if 條件判斷語句。

// Not recommended

if (val != 0) {

return foo();

} else {

return bar();

}

// Recommended

return val ? foo() : bar();

性能優化

一、 js中減小DOM操做，使用時結構合理

二、緩存數組長度 ; 在 for 緩存 length

三、異步加載不肯定JS文件（第三方文件）動態加載

四、減小動畫使用 slideup/down()fadein/fadeout()等方法及animate()方法

相關標籤/搜索

每日一句

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