增强代码可读性

Posted on
| Words count in article: 640

词性和一致性

优化基本原则

  • 易读性优先
  • 如果不是性能瓶颈，就不要为了性能改写代码
  • 复杂性守恒原则：无论怎么写代码，复杂性都不会消失。如果逻辑复杂，代码就应该是复杂的；如果逻辑简单，代码就应该是简单的

注意词性

普通变量/属性用「名词」

1
2
3
4
5
6
7
8
var person = {
    name: 'Joyce'
}

var student = {
    grade: 3,
    class: 2
}

布尔变量或属性用「形容词」/「be动词」/「情态动词」/「hasXXX」

1
2
3
4
5
6
var person = {
    dead: false, // 如果是形容词，前面就没必要加 is，比如isDead 就很废话
    isVip: true, // be 动词有 is、was 等，后面一般接名词
    canSpeak: true, //情态动词有 can、should、will、need 等，情态动词后面接动词
    hasChildren: true, // has 加名词
}

普通函数或方法用「动词」

1
2
3
4
5
var person = {
    run(){}, // 不及物动词
    drinkWater(){}, // 及物动词
    eat(foo){}, // 及物动词加参数（参数是名词）
}

回调、钩子函数用「介词」开头，或用「动词的现在完成时态」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var person = {
    beforeDie(){},
    afterDie(){},
    // 或者
    beforeDie(){},
    dead(){} // 这里跟 布尔 冲突，但只要不同时暴露 布尔 dead 和函数 dead 就行，不想冲突就用上面的 afterDie
}

eg: button.addEventListener('click', onButtonClick)

var component = {
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){},
    errorCaptured(){}
}

容易混淆的地方加前缀

1
2
3
4
5
6
div1.classList.add('active')  // DOM对象
div2.addClass('active')  // jQuery对象

可以改写成：
domDiv1.classList.add('active') or elDiv1.classList.add('active')
$div2.addClass('active')

注意一致性

介词一致性

如果你使用了 before + after，那么就在代码的所有地方都坚持使用 如果你使用了 before + 完成时，那么就坚持使用 如果你改来改去，就「不一致」了，不一致将导致「不可预测」

顺序一致性

比如 updateContainerWidth 和 updateHeightOfContainer 的顺序就令人很别扭，同样会引发「不可预测」

表里一致性

函数名即能体现函数功能

1
2
3
4
5
function getSongs(){
  return $.get('/songs).then((response){
    div.innerText = response.songs
  })
}

函数名 getSongs 表示获取歌曲，并没有暗示这个函数会更新页面，但是实际上函数更新了 div，造成表里不一，正确的写法是

  • 纠正函数名

    1
    2
    3
    4
    5
    function getSongsAndUpdateDiv(){
      return $.get('/songs).then((response){
        div.innerText = response.songs
      })
    }

  • 拆分成两个函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function getSongs(){
      return $.get('/songs)
    }
    function updateDiv(songs){
      div.innerText = response.songs
    }
    getSongs().then((response)=>{
      updateDiv(response.songs)
    })
0%