JavaScript中的变量命名规范是什么

这篇文章主要介绍“JavaScript中的变量命名规范是什么”，在日常操作中，相信很多人在JavaScript中的变量命名规范是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中的变量命名规范是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

驼峰命名

首先，和其他语言一样，大部分变量建议采用驼峰命名法。

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

而对于常量，使用大写字母和下划线来组合命名。

const COUNTRY_NAME = 'China'

根据变量类型来命名

普通变量/属性

尽量用简单易懂的 名词 结尾，前面可以加 形容词/名词 来修饰。

var person = {    name: 'Frank'}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、 hasPermissionvar obj = {}; // 可以改成更有实际含义的 currentTask、 newItem

到此，关于“JavaScript中的变量命名规范是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！