详解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、 hasPermission
var obj = {}; // 可以改成更有实际含义的 currentTask、 newItem

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

赞 (0)

相关推荐

  • JavaScript 变量命名规则

    JScript 是一种区分大小写的语言. 第一个字符必须是一个 ASCII 字母(大小写均可),或一个下划线(_).注意第一个字符不能是数字. 后续的字符必须是字母.数字或下划线. 变量名称一定不能是 保留字. 下面给出合法变量名称的一些示例: _pagecount Part9 Number_Items 下面给出无效变量名称的一些示例: 99Balloons // 不能以数字开头.Smith&Wesson // "与"符号(&)字符用于变量名称是无效的.

  • 超全面的javascript中变量命名规则

    前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码. 全名原则 变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型 尽量避免使用没有意义的命

  • javascript 命名规则 变量命名规则

    JavaScript变量匈牙利命名法 匈牙利命名法语法: 变量名＝类型+对象描述 类型指变量的类型 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解. 提示: 虽然JavaScript变量表面上没有类型,但是JavaScript内部还是会为变量赋予相应的类型. 提示: 匈牙利命名法是一位微软程序员发明的,多数的C,C++程序都使用此命名法. JavaScript变量匈牙利命名类型 JavaScript变量起名类型 变量命名前缀 Array 数组 a Float 浮点

  • 你必须知道的JavaScript 变量命名规则详解

    变量命名还应遵守以下某条著名的命名规则: 著名的变量命名规则Camel 标记法首字母是小写的,接下来的字母都以大写字符开头.例如: 复制代码 代码如下: var testValue = 0, secondValue = "hi";Pascal 标记法 首字母是大写的,接下来的字母都以大写字符开头.例如: 复制代码 代码如下: var TestValue = 0, SecondValue = "hi";匈牙利类型标记法 在以 Pascal 标记法命名的变量前附加一个小

  • 老生常谈javascript变量的命名规范和注释

    简单说,标识符命名规则如下: 第一个字符可以是任意Unicode字母,以及美元符号($)和下划线(_). 第二个字符及后面的字符,还可以用数字. 下面这些都是合法的标识符. arg0 _tmp $elem π 下面这些则是不合法的标识符. 1a 23 *** a+b -d 中文是合法的标识符,可以用作变量名. var 临时变量 = 1; JavaScript有一些保留字,不能用作标识符:arguments.break.case.catch.class.const.continue.debugge

  • 详解JavaScript中的变量命名规范

    目录 驼峰命名 根据变量类型来命名 普通变量/属性 布尔变量/属性 普通函数/方法 回调.钩子函数 类 注意一致性 介词一致性 顺序一致性 表里一致性 时间一致性 其他注意事项 避免使用不常用的缩写 避免使用容易混淆的字母和数字 避免变量命名过于抽象 驼峰命名 首先,和其他语言一样,大部分变量建议采用驼峰命名法. var articleTitle = 'javascript变量命名规范' 而对于常量,使用大写字母和下划线来组合命名. const COUNTRY_NAME = 'China' 根据

  • 详解Redis中key的命名规范和值的命名规范

    数据库中得热点数据key命名惯例 表名:主键名:主键值:字段名 例如 user:id:0001:name 例如 user:id:0002:name 例如 order:id:s2002:price 上面的key对应的值则可以是 存放的方式 key value 优点 单独的key:value形式 order:id:s2002:price 2000 方便简单的操作,例如incr自增或自减 json格式 user:id:0001 {id:0001,name:"张三"} 方便一次性存和取数据,但

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • 详解javascript中的变量提升和函数提升

    1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域. 首先来解释一下什么是没有块级作用域? 所以此时 是可以打印输出变量a的值. 2:什么是变量提升? 在我们的js中,代码的执行时分两步走的,1.解析 2.一步一步执行 那么变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去. 那么上面这种写法其实等价于下面这种写法: 看几个例子: 把上面的例子稍作改动: 结果就会大不一样, 再看一个例

  • 详解javascript中的Strict模式

    简介 在ES5中,引入了strict模式,我们可以称之为严格模式.相应的sloppy mode就可以被称为非严格模式. 严格模式并不是非严格模式的一个子集,相反的严格模式在语义上和非严格模式都发生了一定的变化,所以我们在使用过程中,一定要经过严格的测试.以保证在严格模式下程序的执行和非严格模式下的执行效果一致. 使用Strict mode strict mode会改变javascript的一些表现,我们将会在下一节中进行详细的讲解. 这里先来看一下,怎么使用strict mode. Strict

  • 详解JavaScript中的箭头函数的使用

    详解JavaScript中的箭头函数的使用

    目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,

  • 详解Kotlin中的变量和方法

    详解Kotlin中的变量和方法 变量 Kotlin 有两个关键字定义变量:var 和 val, 变量的类型在后面. var 定义的是可变变量,变量可以被重复赋值.val 定义的是只读变量,相当于java的final变量. 变量的类型,如果可以根据赋值推测,可以省略. var name: String = "jason" name = "jame" val max = 10 常量 Java 定义常量用关键字 static final, Kotlin 没有static,

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript中的Object.is()与"==="运算符总结

    三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

随机推荐