程序員三大難題：變量命名、緩存失效、循環邊界。

駝峯命名

首先，和其他語言一樣，大部分變量建議採用駝峯命名法。

var articleTitle = 'javascript變量命名規範' 

而對於常量，使用大寫字母和下劃線來組合命名。

const COUNTRY_NAME = 'China'

根據變量類型來命名

普通變量/屬性

儘量用簡單易懂的 名詞 結尾，前面可以加 形容詞/名詞 來修飾。

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

布爾變量/屬性

一般用 形容詞、be動詞 、情態動詞、has 開頭

var person = {
    alive: false, // 如果是形容詞，前面就沒必要加is，比如isAlive就顯得冗餘
    canSpeak: true, //情態動詞有can、should、will、need等，情態動詞後面接動詞
    isVip: true, // be動詞有is、was等，後面一般接名詞
    hasChildren: true, // has加名詞
}

控制元素的顯示隱藏、是否加載的時候，可以用 show、hide、load 開頭

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

普通函數/方法

一般用 動詞 開頭。如果是及物動詞後面可以加名詞，組成 動賓結構。

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

名稱也可以體現參數：

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

回調、鈎子函數

用 介詞 開頭，或用 動詞的現在完成時態

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

類

類名/構造函數的名稱，要採用Pascal命名法（即駝峯命名法+首字母大寫）。

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

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

class Person {
    // 私有屬性 
    _name;

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

注意一致性

介詞一致性

例如在上述鈎子函數的命名規範中，
如果你使用了 before + after，那麼就在代碼的所有地方都堅持使用;
如果你使用了 before + 完成時，那麼就堅持使用;
如果你改來改去，就 不一致 了，不一致將導致 不可預測。

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

順序一致性

比如同時命名了兩個變量： updateContainerWidth 和 updateHeightOfContainer ，
這個順序就令人很彆扭，同樣會引發 不可預測

表裏一致性

函數名應儘可能完美體現函數的功能，既不能多也不能少。
比如

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

就違背了表裏一致性，getSongs 表示獲取歌曲，並沒有暗示這個函數會更新頁面，但是實際上函數更新了 div，這就是表裏不一，正確的寫法是

要麼糾正函數名

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

要麼寫成兩個函數

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

時間一致性

有可能隨着代碼的變遷，一個變量的含義已經不同於它一開始的含義了，這時就需要及時改掉這個變量的名字。
這一條是最難做到的，因為寫代碼容易，改代碼難。如果這個代碼組織得不好，很可能會出現牽一髮而動全身的情況（如全局變量就很難改）。
所以最好的做法，就是一開始就做好規劃、並且按照規範來組織代碼。

其他注意事項

避免使用不常用的縮寫

除了一些常用的所有程序員都知道的縮寫（例如 num、html），建議不要使用縮寫。
比如
password 不要縮寫為 psw,
table 不要縮寫為 tb、tbl
current 不要縮寫為 cur

更不要使用拼音首字母縮寫。
比如
萬元户 不要縮寫為 wyh
中資公司 不要縮寫為 zzgs

這些縮寫其實沒少幾個字符，卻讓看代碼的人增加了很多理解的負擔。

避免使用容易混淆的字母和數字

比如
同時用 l 和 1: level1
同時用 O 和 0: 0Option

避免變量命名過於抽象

比如

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

參考文章

• 《 重構 - 代碼優化技巧 》