JavaScript变量命名规范详解：驼峰、常量及一致性原则

驼峰命名

与其他编程语言类似，JavaScript中的大部分变量建议遵循驼峰命名法（camelCase）。

var articleTitle = 'javascript变量命名规范'

对于常量，通常采用大写字母配合下划线进行组合命名。

const COUNTRY_NAME = 'China'

根据变量类型来命名

普通变量/属性

命名应尽可能使用简单易懂的名词作为结尾，前缀可以添加形容词或名词进行修饰。

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

布尔变量/属性

布尔类型的变量或属性，通常以形容词、be动词（如is、was）、情态动词（如can、should）或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

到此这篇关于详解JavaScript中的变量命名规范的文章就介绍到这了,更多相关JavaScript变量命名规范内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

详解JavaScript中的变量命名规范