JavaScript中的變量命名規(guī)范是什么

這篇文章主要介紹“JavaScript中的變量命名規(guī)范是什么”，在日常操作中，相信很多人在JavaScript中的變量命名規(guī)范是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript中的變量命名規(guī)范是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

駝峰命名

首先，和其他語(yǔ)言一樣，大部分變量建議采用駝峰命名法。

var articleTitle = 'javascript變量命名規(guī)范'

而對(duì)于常量，使用大寫(xiě)字母和下劃線來(lái)組合命名。

const COUNTRY_NAME = 'China'

根據(jù)變量類(lèi)型來(lái)命名

普通變量/屬性

盡量用簡(jiǎn)單易懂的 名詞 結(jié)尾，前面可以加 形容詞/名詞 來(lái)修飾。

var person = {
    name: 'Frank'
}
var student = {
    grade: 3,
    class: 2
}
var juniorSchoolStudent = {}

布爾變量/屬性

一般用 形容詞、be動(dòng)詞 、情態(tài)動(dòng)詞、has 開(kāi)頭

var person = {
    alive: false, // 如果是形容詞，前面就沒(méi)必要加is，比如isAlive就顯得冗余
    canSpeak: true, //情態(tài)動(dòng)詞有can、should、will、need等，情態(tài)動(dòng)詞后面接動(dòng)詞
    isVip: true, // be動(dòng)詞有is、was等，后面一般接名詞
    hasChildren: true, // has加名詞
}

控制元素的顯示隱藏、是否加載的時(shí)候，可以用 show、hide、load 開(kāi)頭

var dialog = {
    showTitle: true, // 又例如vue框架中，v-show="showTitle"
    hideHeader: false, // 又例如angular框架中，ng-hide="hideHeader"
    loadFooter: true, // 又例如vue框架中，v-if="loadFooter"
}

普通函數(shù)/方法

一般用 動(dòng)詞 開(kāi)頭。如果是及物動(dòng)詞后面可以加名詞，組成 動(dòng)賓結(jié)構(gòu)。

var person = {
    run(){}, // 不及物動(dòng)詞
    drinkWater(){}, // 及物動(dòng)詞
    eat(foo){}, // 及物動(dòng)詞加參數(shù)（參數(shù)是名詞）
}

名稱(chēng)也可以體現(xiàn)參數(shù)：

document.getElementById('domId')
function findArticleByName(articleName) {}

回調(diào)、鉤子函數(shù)

用 介詞 開(kāi)頭，或用 動(dòng)詞的現(xiàn)在完成時(shí)態(tài)

button.addEventListener('click', onButtonClick)
var component = {
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){}
}

類(lèi)

類(lèi)名/構(gòu)造函數(shù)的名稱(chēng)，要采用Pascal命名法（即駝峰命名法+首字母大寫(xiě)）。

class MyArticle {}
 
function Person (name) {
    this.name = name
}

私有屬性和方法的前綴加下劃線_, 公共屬性和方法則不用

class Person {
    // 私有屬性 
    _name;

    // 公共方法
    getName() {
        return this._name;
    }
    // 公共方法
    setName(name) {
        this._name = name;
    }
}

注意一致性

介詞一致性

例如在上述鉤子函數(shù)的命名規(guī)范中，

• 如果你使用了 before + after，那么就在代碼的所有地方都堅(jiān)持使用;

• 如果你使用了 before + 完成時(shí)，那么就堅(jiān)持使用;

• 如果你改來(lái)改去，就 不一致 了，不一致將導(dǎo)致 不可預(yù)測(cè)。

再例如使用了 onButtonClick，就不要在其他地方使用 handleButtonClick。

順序一致性

比如同時(shí)命名了兩個(gè)變量： updateContainerWidth 和 updateHeightOfContainer ，

這個(gè)順序就令人很別扭，同樣會(huì)引發(fā) 不可預(yù)測(cè)

表里一致性

函數(shù)名應(yīng)盡可能完美體現(xiàn)函數(shù)的功能，既不能多也不能少。

比如

function getSongs(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

就違背了表里一致性，getSongs 表示獲取歌曲，并沒(méi)有暗示這個(gè)函數(shù)會(huì)更新頁(yè)面，但是實(shí)際上函數(shù)更新了 div，這就是表里不一，正確的寫(xiě)法是

要么糾正函數(shù)名

function getSongsAndUpdateDiv(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}

要么寫(xiě)成兩個(gè)函數(shù)

function getSongs(){
    return $.get('/songs)
}
function updateDiv(songs){
    div.innerText = response.songs
}
getSongs().then((response)=>{
    updateDiv(response.songs)
})

時(shí)間一致性

有可能隨著代碼的變遷，一個(gè)變量的含義已經(jīng)不同于它一開(kāi)始的含義了，這時(shí)就需要及時(shí)改掉這個(gè)變量的名字。
這一條是最難做到的，因?yàn)閷?xiě)代碼容易，改代碼難。如果這個(gè)代碼組織得不好，很可能會(huì)出現(xiàn)牽一發(fā)而動(dòng)全身的情況（如全局變量就很難改）。
所以最好的做法，就是一開(kāi)始就做好規(guī)劃、并且按照規(guī)范來(lái)組織代碼。

其他注意事項(xiàng)

避免使用不常用的縮寫(xiě)

除了一些常用的所有程序員都知道的縮寫(xiě)（例如 num、html），建議不要使用縮寫(xiě)。

比如

• password 不要縮寫(xiě)為 psw,

• table 不要縮寫(xiě)為 tb、tbl

• current 不要縮寫(xiě)為 cur

更不要使用拼音首字母縮寫(xiě)。

比如

• 萬(wàn)元戶(hù) 不要縮寫(xiě)為 wyh

• 中資公司 不要縮寫(xiě)為 zzgs

這些縮寫(xiě)其實(shí)沒(méi)少幾個(gè)字符，卻讓看代碼的人增加了很多理解的負(fù)擔(dān)。

避免使用容易混淆的字母和數(shù)字

比如

• 同時(shí)用 l 和 1: level1

• 同時(shí)用 O 和 0: 0Option

避免變量命名過(guò)于抽象

比如

var flag = false; // 可以改成更有實(shí)際含義的 isValid、 hasPermission
var obj = {}; // 可以改成更有實(shí)際含義的 currentTask、 newItem

到此，關(guān)于“JavaScript中的變量命名規(guī)范是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！