这篇文章主要介绍“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、 hasPermission var obj = {}; // 可以改成更有实际含义的 currentTask、 newItem
到此,关于“JavaScript中的变量命名规范是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。