三、JS 命名規(guī)范

2018-06-17 19:09 更新

1. 目的

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

2. 變量名

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

3. 構造函數(shù)(類)命名

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

JS中沒有類,但是可以用new調用構造函數(shù):var man = new Person();

4. 普通變量命名

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

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

5. 匈牙利命名法

匈牙利命名法語法:變量名=類型+對象描述

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

提示: 雖然JavaScript變量表面上沒有類型,但是JavaScript內部還是會為變量賦予相應的類型

JavaScript變量起名類型變量命名前綴舉例
Array 數(shù)組aaList,aGroup
Boolean 邏輯bbChecked,bHasLogin
Function 函數(shù)ffGetHtml,fInit
Integer 數(shù)字nnPage,nTotal
Object 對象ooButton,oDate
Regular Expression 正則rrDomain,rEmail
String 字符ssName,sHtml

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

可根據(jù)團隊及項目需要增加

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

7. 例外情況

以根據(jù)項目及團隊需要,設計出針對項目需要的前綴規(guī)范,從而達到團隊開發(fā)協(xié)作便利的目的。

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

8. 函數(shù)命名

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

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

內部函數(shù):使用_fn+動詞+名詞形式,內部函數(shù)必需在函數(shù)最后定義。

例如:

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

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

對象方法與事件響應函數(shù):對象方法命名使用fn+對象類名+動詞+名詞形式;

例如: fnAddressGetEmail(),

事件響應函數(shù):fn+觸發(fā)事件對象名+事件名或者模塊名

例如:fnDivClick(),fnAddressSubmitButtonClick()

函數(shù)方法常用的動詞:

get 獲取/set 設置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷毀
begin 開始/end 結束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 復制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動/run 運行
compile 編譯/execute 執(zhí)行,
debug 調試/trace 跟蹤
observe 觀察/listen 監(jiān)聽,
build 構建/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 復原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集

9. 變量命名例子

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


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號