变量命名是程序员的难题之一,网上有很多规范,常见的有以下几个原则。
1注意词性
1.1普通变量/属性用「名词」
let person = {
name: 'Larry'
}
let student = {
age: 10
}
1.2bool变量/属性用「形容词」或者「be动词」或者「情态动词」或者「hasX」
let person = {
fat: false, // 如果是形容词,前面就没必要加 is
canDance: true, //情态动词有 can、should、will、need 等,情态动词后面接动词
isVip: true, // be 动词有 is、was 等,后面一般接名词
hasChildren: true, // has 加名词
}
1.3 普通函数/方法用「动词」开头
let person = {
run(){}, // 不及物动词
drinkWater(){}, // 及物动词
eat(food){}, // 及物动词加参数(参数是名词)
}
1.4回调、钩子函数用「介词」开头,或用「动词的现在完成时态」,比如Vue中动画的钩子函数: beforeEnter beforeLeave 等。
1.5容易混淆的地方加前缀
div1.classList.add('active') // DOM 对象
div2.addClass('active') // jQuery 对象
// 建议改为
$div2.addClass('active')
//这样更容易区分对象的类型
2 一致性
2.1介词一致性
如果你使用了 before + after,那么就在代码的所有地方都坚持使用
如果你使用了 before + 完成时,那么就坚持使用,否则会造成代码的不易阅读
2.2顺序一致性
比如 updateContainerWidth 和 updateHeightOfContainer 的顺序就显得奇怪,改为updateContainerWidth和updateContainerHeight就显得自然很多。
2.3表里一致性
函数名必须完美体现函数的功能
function getSongs(){
return $.get('/songs).then((response){
div.innerText = response.songs
})
}
getSongs 表示获取歌曲,并没有暗示这个函数会更新页面,但是实际上函数更新了 div。可以修改函数名或者将其拆分为2个函数。
function getSongsAndUpdateDivText(){
return $.get('/songs).then((response){
div.innerText = response.songs
})
}
function getSongs(){
return $.get('/songs)
}
function updateDivText(songs){
div.innerText = response.songs
}
getSongs().then((response)=>{
updateDiv(response.songs)
})
2.4时间一致性
有可能随着代码的变迁,一个变量的含义已经不同于它一开始的含义了,这个时候你需要及时改掉这个变量的名字。