文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解JavaScript中的变量命名规范

2022-12-12 18:00

关注

驼峰命名

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

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加名词
}

控制元素的显示隐藏、是否加载的时候,可以用 showhideload 开头

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;
    }
}

注意一致性

介词一致性

例如在上述钩子函数的命名规范中,

再例如使用了 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),建议不要使用缩写。

比如

更不要使用拼音首字母缩写。

比如

这些缩写其实没少几个字符,却让看代码的人增加了很多理解的负担。

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

比如

避免变量命名过于抽象

比如

var flag = false; // 可以改成更有实际含义的 isValid、 hasPermission
var obj = {}; // 可以改成更有实际含义的 currentTask、 newItem

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯