格式規(guī)范
-
命名規(guī)則：規(guī)范
- 避免單字母命名档礁。命名應(yīng)具備描述性
- 使用駝峰式命名對(duì)象钝吮、函數(shù)和實(shí)例（首字母小寫(xiě)）
- 使用帕斯卡式命名構(gòu)造函數(shù)或類（首字母大寫(xiě)）
- 使用下劃線
_開(kāi)頭命名私有屬性 - 別保存
this的引用。使用箭頭函數(shù)或Function#bind - 如果你的文件只輸出一個(gè)類，那你的文件名必須和類名完全保持一致
- 當(dāng)你導(dǎo)出默認(rèn)的函數(shù)時(shí)使用駝峰式命名漆羔。你的文件名必須和函數(shù)名完全保持一致
- 當(dāng)你導(dǎo)出單例、函數(shù)庫(kù)瞪讼、空對(duì)象時(shí)使用帕斯卡式命名
-
代碼塊：規(guī)范
- 使用大括號(hào)包裹所有的多行代碼塊
- 如果通過(guò)
if和else使用多行代碼塊钧椰，把else放在if代碼塊關(guān)閉括號(hào)的同一行
-
注釋：規(guī)范
- 使用
/** ... */作為多行注釋。包含描述符欠、指定所有參數(shù)和返回值的類型和值 - 使用
//作為單行注釋嫡霞。在評(píng)論對(duì)象上面另起一行使用單行注釋。在注釋前插入空行 - 給注釋增加
FIXME或TODO的前綴可以幫助其他開(kāi)發(fā)者快速了解這是一個(gè)需要復(fù)查的問(wèn)題希柿，或是給需要實(shí)現(xiàn)的功能提供一個(gè)解決方式诊沪。這將有別于常見(jiàn)的注釋，因?yàn)樗鼈兪强刹僮鞯脑贰Ｊ褂?FIXME -- need to figure this out或者TODO -- need to implement
- 使用
-
空白：這個(gè)部分見(jiàn)仁見(jiàn)智保持一致即可
- 使用 2 個(gè)空格作為縮進(jìn)
- 在花括號(hào)前放一個(gè)空格
- 在控制語(yǔ)句(
if端姚、while)等的小括號(hào)前放一個(gè)空格。在函數(shù)調(diào)用及聲明中挤悉，不在函數(shù)的參數(shù)列表前加空格 - 使用空格把運(yùn)算符隔開(kāi)
- 在文件末尾插入一個(gè)空行
- 在使用長(zhǎng)方法鏈時(shí)進(jìn)行縮進(jìn)渐裸。使用前面的點(diǎn)
.強(qiáng)調(diào)這是方法調(diào)用而不是新語(yǔ)句 - 在塊末和新語(yǔ)句前插入空行
-
逗號(hào)：規(guī)范
- 行首逗號(hào)：不需要
- 增加結(jié)尾的逗號(hào): 需要。因?yàn)檫@會(huì)讓 git diffs 更干凈
-
分號(hào)：規(guī)范
- 使用分號(hào)装悲，防止在極端情況下被合并
基本操作
-
類型：核心思想是避免復(fù)雜類型的深淺復(fù)制
- 直接存取基本類型：字符串昏鹃、數(shù)值、布爾類型诀诊、
null洞渤、undefined - 通過(guò)引用的方式存取復(fù)雜類型：對(duì)象、數(shù)組属瓣、函數(shù)
- 直接存取基本類型：字符串昏鹃、數(shù)值、布爾類型诀诊、
-
引用：核心思想是最小化引用的影響范圍载迄，不要輕易變化
- 對(duì)所有的引用使用
const，不要使用var抡蛙。這能確保無(wú)法對(duì)引用重新賦值护昧，避免出現(xiàn) bug，減少理解成本 - 如果一定需要可變動(dòng)的引用溜畅，使用
let而不是var捏卓。因?yàn)?let是塊級(jí)作用域，而var是函數(shù)作用域 -
let和const都是塊級(jí)作用域
- 對(duì)所有的引用使用
-
變量：
- 一直使用
const來(lái)聲明變量，如果不這樣做就會(huì)產(chǎn)生全局變量怠晴。我們需要避免全局命名空間的污染 - 將所有的
const和let分組遥金，當(dāng)你需要把已賦值變量賦值給未賦值變量時(shí)非常有用 - 在你需要的地方給變量賦值，但請(qǐng)把它們放在一個(gè)合理的位置蒜田。因?yàn)?
let和const是塊級(jí)作用域而不是函數(shù)作用域
- 一直使用
-
字符串：增加可讀性
- 字符串使用單引號(hào)
'' - 字符串超過(guò) 80 個(gè)字節(jié)應(yīng)該使用字符串連接號(hào)換行
- 過(guò)度使用字串連接符號(hào)可能會(huì)對(duì)性能造成影響
- 程序化生成字符串時(shí)稿械，使用模板字符串代替字符串連接。因?yàn)槟０遄址鼮楹?jiǎn)潔冲粤，更具可讀性
- 字符串使用單引號(hào)
-
比較運(yùn)算符 & 等號(hào)：規(guī)范與代碼可讀性
- 優(yōu)先使用
===和!==而不是==和!= - 條件表達(dá)式例如
if語(yǔ)句通過(guò)抽象方法ToBoolean強(qiáng)制計(jì)算它們的表達(dá)式并且總是遵守下面的規(guī)則-
對(duì)象被計(jì)算為true -
Undefined被計(jì)算為false -
Null被計(jì)算為false -
布爾值被計(jì)算為布爾的值 -
數(shù)字如果是+0美莫、-0、或NaN被計(jì)算為false, 否則為true -
字符串如果是空字符串''被計(jì)算為false梯捕，否則為true
-
- 使用簡(jiǎn)寫(xiě)
- 優(yōu)先使用
-
類型轉(zhuǎn)換：
- 在語(yǔ)句開(kāi)始時(shí)執(zhí)行類型轉(zhuǎn)換
- 字符串不要用
this.score + ''厢呵，而是String(this.score) - 對(duì)數(shù)字使用
parseInt轉(zhuǎn)換，并帶上類型轉(zhuǎn)換的基數(shù) - 如果因?yàn)槟承┰?parseInt 成為你所做的事的瓶頸而需要使用位操作解決性能問(wèn)題時(shí)傀顾，留個(gè)注釋說(shuō)清楚原因和你的目的
- 小心使用位操作運(yùn)算符襟铭。數(shù)字會(huì)被當(dāng)成 64 位值，但是位操作運(yùn)算符總是返回 32 位的整數(shù)（參考）短曾。位操作處理大于 32 位的整數(shù)值時(shí)還會(huì)導(dǎo)致意料之外的行為寒砖。關(guān)于這個(gè)問(wèn)題的討論。最大的 32 位整數(shù)是 2,147,483,647
- 使用
Boolean()或!!來(lái)進(jìn)行布爾值的轉(zhuǎn)換
-
存取器：一致性與規(guī)范
- 屬性的存取函數(shù)不是必須的
- 如果你需要存取函數(shù)時(shí)使用
getVal()和setVal('hello') - 如果屬性是布爾值嫉拐，使用
isVal()或hasVal() - 創(chuàng)建
get()和set()函數(shù)是可以的哩都，但要保持一致
-
jQuery：明確指出使用 jQuery 的代碼，優(yōu)化性能
- 使用
$作為存儲(chǔ) jQuery 對(duì)象的變量名前綴 - 緩存 jQuery 查詢
- 對(duì) DOM 查詢使用層疊
$('.sidebar ul')或 父元素 > 子元素$('.sidebar > ul') - 對(duì)有作用域的 jQuery 對(duì)象查詢使用
find
- 使用
復(fù)雜結(jié)構(gòu)
-
對(duì)象：考慮兼容性與可讀性
- 使用字面值創(chuàng)造對(duì)象婉徘，如
const item = {};而非const item = new Object(); - 瀏覽器環(huán)境中執(zhí)行的代碼不要使用 保留字 作為鍵值（比如
private這類就不要用）漠嵌，可以使用同義詞替換所需要使用的保留字，比如說(shuō)把class換成type - 創(chuàng)建有動(dòng)態(tài)屬性名的對(duì)象時(shí)盖呼，使用可被計(jì)算的屬性名稱献雅，這樣就可以在一個(gè)地方定義所有的對(duì)象屬性
- 使用對(duì)象方法和對(duì)象屬性值的簡(jiǎn)寫(xiě)
- 在對(duì)象屬性聲明前把簡(jiǎn)寫(xiě)的屬性分組，這樣能清楚地看出哪些屬性使用了簡(jiǎn)寫(xiě)
- 使用字面值創(chuàng)造對(duì)象婉徘，如
-
數(shù)組：可讀性與操作簡(jiǎn)化
- 使用字面值創(chuàng)建數(shù)組塌计，如
const items = [];而非const items = new Array(); - 向數(shù)組添加元素時(shí)使用
Arrary#push替代直接賦值 - 使用拓展運(yùn)算符
...復(fù)制數(shù)組，如const itemsCopy = [...items] - 使用
Array#from把一個(gè)類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組
- 使用字面值創(chuàng)建數(shù)組塌计，如
-
解構(gòu)：減少操作開(kāi)銷
- 使用解構(gòu)存取和使用多屬性對(duì)象侯谁，這樣能減少臨時(shí)引用屬性
- 對(duì)數(shù)組使用解構(gòu)賦值
- 需要回傳多個(gè)值時(shí)锌仅，使用對(duì)象解構(gòu)，而不是數(shù)組解構(gòu)墙贱。因?yàn)樵黾訉傩曰蛘吒淖兣判虿粫?huì)改變調(diào)用時(shí)的位置
-
函數(shù)：性能與可讀性
- 使用函數(shù)聲明代替函數(shù)表達(dá)式热芹，如
function foo() {} - 永遠(yuǎn)不要在一個(gè)非函數(shù)代碼塊（if、while 等）中聲明一個(gè)函數(shù)惨撇，把那個(gè)函數(shù)賦給一個(gè)變量伊脓。瀏覽器允許你這么做，但它們的解析表現(xiàn)不一致
- ECMA-262 把
block定義為一組語(yǔ)句魁衙。函數(shù)聲明不是語(yǔ)句 - 永遠(yuǎn)不要把參數(shù)命名為
arguments报腔。這將取代原來(lái)函數(shù)作用域內(nèi)的arguments對(duì)象 - 不要使用
arguments株搔。可以選擇 rest 語(yǔ)法...替代纯蛾。因?yàn)槭褂?...能明確你要傳入的參數(shù)纤房。另外 rest 參數(shù)是一個(gè)真正的數(shù)組，而arguments是一個(gè)類數(shù)組 - 直接給函數(shù)的參數(shù)指定默認(rèn)值翻诉，不要使用一個(gè)變化的函數(shù)參數(shù)
- 直接給函數(shù)參數(shù)賦值時(shí)需要避免副作用
- 使用函數(shù)聲明代替函數(shù)表達(dá)式热芹，如
-
箭頭函數(shù)：簡(jiǎn)化代碼炮姨，加強(qiáng)可讀性
- 當(dāng)你必須使用函數(shù)表達(dá)式（或傳遞一個(gè)匿名函數(shù)）時(shí)，使用箭頭函數(shù)符號(hào)
- 如果一個(gè)函數(shù)適合用一行寫(xiě)出并且只有一個(gè)參數(shù)碰煌，那就把花括號(hào)舒岸、圓括號(hào)和 return 都省略掉。如果不是芦圾，那就不要省略蛾派。如
[1, 2, 3].map(x => x * x)
-
構(gòu)造器：維持一致性，鏈?zhǔn)秸{(diào)用
- 總是使用
class堕扶，避免直接操作prototype碍脏。因?yàn)?class語(yǔ)法更有可讀性 - 使用
extends繼承，因?yàn)?extends是一個(gè)內(nèi)建的原型繼承方法并且不會(huì)破壞instanceof - 方法可以返回
this來(lái)幫助鏈?zhǔn)秸{(diào)用 - 可以寫(xiě)一個(gè)自定義的
toString()方法稍算，但要確保它能正常運(yùn)行并且不會(huì)引起副作用
- 總是使用
-
模塊：確保模塊化典尾，符合規(guī)范
- 總是使用模組(
import/export)而不是其他非標(biāo)準(zhǔn)模塊系統(tǒng)。你可以編譯為你喜歡的模塊系統(tǒng) - 不要使用通配符
import糊探，這樣能確保你只有一個(gè)默認(rèn)export - 不要從
import中直接export钾埂。雖然一行代碼簡(jiǎn)潔明了，但讓 import 和 export 各司其職讓事情能保持一致
- 總是使用模組(
-
迭代器：往函數(shù)式編程上靠科平，減少副作用
- 不要使用
iterators褥紫。使用高階函數(shù)例如map()和reduce()替代for-of。因?yàn)樘幚砑兒瘮?shù)的回調(diào)值更易讀瞪慧，這比它帶來(lái)的副作用更重要
- 不要使用
-
屬性：區(qū)分是否通過(guò)變量來(lái)訪問(wèn)
- 使用
.來(lái)訪問(wèn)對(duì)象的屬性 - 當(dāng)通過(guò)變量訪問(wèn)屬性時(shí)使用中括號(hào)
[]
- 使用
-
事件：靈活性髓考，降低判斷成本
- 當(dāng)給事件附加數(shù)據(jù)時(shí)（無(wú)論是 DOM 事件還是私有事件），傳入一個(gè)哈希而不是原始值弃酌。這樣可以讓后面的貢獻(xiàn)者增加更多數(shù)據(jù)到事件數(shù)據(jù)而無(wú)需找出并更新事件的每一個(gè)處理器
