变量命名

变量命名是程序员的难题之一，网上有很多规范，常见的有以下几个原则。

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时间一致性

有可能随着代码的变迁，一个变量的含义已经不同于它一开始的含义了，这个时候你需要及时改掉这个变量的名字。