代码可读性---及重构

代码优化的基本原则

1. 易读性优先
2. 如果不是性能瓶颈，就不要为了性能而改写代码

let array = []
for(let i = 0 ; i< array.length; i++){}
每次进入for循环，都要重新计算array.length;但是没必要let l = array.lengrh; i < l;因为每
次计算array.length不会造成性能瓶颈。

3. 复杂性守恒原则：无论怎么写代码，复杂性都不会消失的。

命名规则：

1. 注意词性：

• 普通变量/属性用名词

var person = {name: 'lili'}

• bool变量/属性用形容词或者be动词或者情态动词或者hasx

var person  = {
  dead: false; //如果是形容词，前面就没有必要加is。
  canSpeak: true;  //情态动词有can.should,will,need等，情态动词后接名词。
  isVip:true;//be动词有is,was等，后一般接名词
  hasChildren:true;//has加名词
}

• 普通函数、方法用动词开头

var person = {
  run(){} //不及物动词，一般不需要参数
  drinkWater()//及物动词 一般需要参数
}

• 回调和钩子函数使用介词和动词的现在完成时

var person = {
  beforeDie(),
  afterDie()
  dead()
}

• 容易混淆的地方加前缀

domDiv1.addClass('active') //DOM对象
$div1.addClass('active') //jQuery对象

• 属性访问器可以用名词

$div.text() //等价于$div.getText()
$div.text('hi') //等价于$div.setTetx('hi')

2. 注意代码的一致性

• 介词一致性
  如果使用了before+after,那么就在代码的所有地方都坚持使用
  如果使用了before + 完成时,就在其他地方也坚持使用
  如果改来改去就不一定了，就会导致阅读者的不可预测。
• 顺序一致性
  比如uodateContainerWidth和 uodateHeightOfContainer的顺序就很别扭，容易引发不可预测。
• 表里一致性
  函数名必须完美体现函数的功能，既不能多也不能少

function getSongs(){
  return $.get('/songs).then((response){
    div.innerText = response.songs
   })
}

以上代码就违背了表里一致性的原则，函数名只表示获取歌曲，但是函数具体的内容还包括更新div，所以可以改成以下两种写法：

//纠正函数名
function getSongAndUpadteDiv(){
  return $.get('/songs).then((response){
    div.innerText = response.songs
   })
}
//写成两个函数
function getSongs(){
  return $.get('/songs)
}
funciton updateDiv(songs){
   div.innerText = response.songs
}
getSongs().then((response) => {
  updateDiv(response.songs)
 })

• 时间一致性
  有可能随着代码的变迁，一个变量的含义已经不同于一开始的含义了，这个时候就需要及时更改这个变量。

改代码的思路及方法

如果你的代码有单元测试，那么改起来就很放心，如果没有单元测试，就需要用小步快跑的策略一点点进行修改。
小步快跑的意思就是说，每次只修改一点点，测试通过之后，在修改一点点。

• 使用函数来优化代码
  步骤：
  1. 将一坨代码放到一个函数里
  2. 将代码依赖的外部变量作为参数
  3. 将代码的输出作为函数的返回值
  4. 给函数取一个合适的名字
  5. 调用这个函数并传入参数
  6. 这个函数里的代码如果超过了5行，请重复1
• 使用对象来优化代码
  如果使用了函数改造法改造之后，发现有太多的小函数，则可以使用对象将这些函数串起来。
  this是函数和对象的桥梁，会用this来串联这个对象和所有的函数，函数调用传参的时候才能确定this的值，在不同的地方调用，this的指向不一样的东西。

一些固定的套路

1. 表驱动编程
2. 自说明代码，把别人关心的代码放在显眼的位置。