三、JS 命名規(guī)范

1. 目的

提高代碼可預(yù)測(cè)性和可維護(hù)性的方法是使用命名約定，這就意味著采用一致的方法來對(duì)變量和函數(shù)進(jìn)行命名。

2. 變量名

變量名包括全局變量，局部變量，類變量，函數(shù)參數(shù)

3. 構(gòu)造函數(shù)（類）命名

首字母大寫，駝峰式命名。

JS中沒有類，但是可以用new調(diào)用構(gòu)造函數(shù)：var man = new Person();

4. 普通變量命名

首字母小寫，駝峰式命名，匈牙利命名

如：nCheckCount 表示整形的數(shù)值

5. 匈牙利命名法

匈牙利命名法語法：變量名＝類型＋對(duì)象描述

• 類型指變量的類型
• 對(duì)象描述指對(duì)象名字全稱或名字的一部分，要求有明確含義，命名要容易記憶容易理解。

提示: 雖然JavaScript變量表面上沒有類型，但是JavaScript內(nèi)部還是會(huì)為變量賦予相應(yīng)的類型

6. 其他前綴規(guī)范

可根據(jù)團(tuán)隊(duì)及項(xiàng)目需要增加

• $：表示Jquery對(duì)象例如：$Content，$Module，一種比較廣泛的Jquery對(duì)象變量命名規(guī)范。
• fn：表示函數(shù)例如：fnGetName，fnSetAge；和上面函數(shù)的前綴略有不同，改用fn來代替，個(gè)人認(rèn)為fn能夠更好的區(qū)分普通變量和函數(shù)變量。

7. 例外情況

以根據(jù)項(xiàng)目及團(tuán)隊(duì)需要，設(shè)計(jì)出針對(duì)項(xiàng)目需要的前綴規(guī)范，從而達(dá)到團(tuán)隊(duì)開發(fā)協(xié)作便利的目的。

• 作用域不大臨時(shí)變量可以簡(jiǎn)寫，比如：str，num，bol，obj，fun，arr。
• 循環(huán)變量可以簡(jiǎn)寫，比如：i，j，k等。
• 某些作為不允許修改值的變量認(rèn)為是常量，全部字母都大寫。例如：COPYRIGHT，PI。常量可以存在于函數(shù)中，也可以存在于全局。必須采用全大寫的命名，且單詞以_分割，常量通常用于ajax請(qǐng)求url，和一些不會(huì)改變的數(shù)據(jù)。

8. 函數(shù)命名

普通函數(shù)：首字母小寫，駝峰式命名，統(tǒng)一使用動(dòng)詞或者動(dòng)詞+名詞形式

例如：fnGetVersion()，fnSubmitForm()，fnInit()；涉及返回邏輯值的函數(shù)可以使用is，has，contains等表示邏輯的詞語代替動(dòng)詞，例如：fnIsObject()，fnHasClass()，fnContainsElment()。

內(nèi)部函數(shù)：使用_fn+動(dòng)詞+名詞形式，內(nèi)部函數(shù)必需在函數(shù)最后定義。

例如：

function fnGetNumber(nTotal) {
    if (nTotal < 100) {
        nTotal = 100;
    }
    return _fnAdd(nTotal);

    function _fnAdd(nNumber) {
        nNumber++;
        return nNumber;
    }
}
alert(fGetNumber(10)); //alert 101

對(duì)象方法與事件響應(yīng)函數(shù)：對(duì)象方法命名使用fn+對(duì)象類名+動(dòng)詞+名詞形式；

例如： fnAddressGetEmail()，

事件響應(yīng)函數(shù)：fn+觸發(fā)事件對(duì)象名+事件名或者模塊名

例如：fnDivClick()，fnAddressSubmitButtonClick()

函數(shù)方法常用的動(dòng)詞：

get 獲取/set 設(shè)置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動(dòng)/stop 停止
open 打開/close 關(guān)閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷毀
begin 開始/end 結(jié)束,
backup 備份/restore 恢復(fù)
import 導(dǎo)入/export 導(dǎo)出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標(biāo)記
copy 復(fù)制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動(dòng)/run 運(yùn)行
compile 編譯/execute 執(zhí)行,
debug 調(diào)試/trace 跟蹤
observe 觀察/listen 監(jiān)聽,
build 構(gòu)建/publish 發(fā)布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發(fā)送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復(fù)原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結(jié)束,
start 開始/finish 完成
enter 進(jìn)入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集

9. 變量命名例子

• 為什么需要這樣強(qiáng)制定義變量前綴？正式因?yàn)閖avascript是弱語言造成的。在定義大量變量的時(shí)候，我們需要很明確的知道當(dāng)前變量是什么屬性，如果只通過普通單詞，是很難區(qū)分的。普通代碼var checked = false; var check = function() { return true; } /** some code **/ if(check) {//已經(jīng)無法很確切知道這里是要用checked還是check()從而導(dǎo)致邏輯錯(cuò)誤 //do some thing } 規(guī)范后代碼var bChecked = false; var fnCheck = function() { return true; } /** some code **/ if(bChecked) { // do some thing } if(fnCheck()) { // do other thing }
• 如何標(biāo)明私有方法或私有屬性？var person = { getName: function () { return this._getFirst() + ' ' + this._getLast(); }, _getFirst: function () { //... }, _getLast: function (){ //... } }; 在這個(gè)例子中，getName()以為這這是API的一個(gè)公開的方法，而_getFirst()和_getLast()意味著這是一個(gè)私有函數(shù)。盡管他們都是普通的公開方法，但是使用下劃線前綴的表示方法可以提醒使用person對(duì)象的用戶，告訴他們這些方法在其他地方不能確保一定能夠正常工作，不能直接調(diào)用。
• 總結(jié)：下面是一些使用下劃線約定的變量使用下劃線結(jié)尾來表明是私有變量，例如name_和getElements_()。使用一個(gè)下劃線前綴來表示受保護(hù)屬性，使用兩個(gè)下劃線前綴來表示私有屬性。