JS最佳实践——红皮书

前言

《Javascript高级程序设计》最佳实践

1 可维护性

• 可理解性
• 直观性
• 可适应性
• 可扩展性
• 可调试性

总结：

要做到可维护性、可读性强的代码，至少完成以下几点

1. 函数注释（功能、参数、返回值）

   /**
    * 功能描述
    *
    * @param {参数类型}参数名 参数说明 
    * @return {返回值类型} 返回值说明
    */
   function fn(p1, p2) {
        
       // 参数类型：fn、Number、String、Boolean、Array、Object
   }
   

2. 完成独立功能的大段代码，写功能注释

3. 有意义的变量名、函数名，驼峰命名

2 降低耦合

耦合：两个模块之间的输入与输出的联系紧密，相互影响过多

代码耦合过紧会导致模块难以维护，修改一处的同时另一处也需要修改，降低了我们的开发效率。

2.1 将css从js中抽离

// bad
element.style.color = '#FFF';
element.style.width = '30px';
element.sytle.display = 'block';

// good
.show {
    // css
    color: #FFF;
    width: 30px;
    display: block;
}
element.className += 'show';

2.2 模板文本写注释

需要JS动态生成的HTML内容，在父元素下写上模板的注释，易于后期维护

<ul id="mylist">
    <!-- <li><a href="1">First item</a></li> -->
</ul>

2.3 应用逻辑 / 事件处理程序分离

2.3.1 概念

什么是事件处理程序：

事件就是用户或浏览器自身执行的某种动作。比如说 click，mouseover，都是事件的名字。而相应某个事件的函数就叫事件处理程序

什么是应用逻辑：

被事件处理函数触发的一些动作，比如对元素的颜色、宽度等属性进行操作

为什么要分离：

• 方便更改触发事件的方式，比如从鼠标点击事件切换成按键事件
• 可以直接测试应用逻辑代码，无需通过特定事件

2.3.2 Demo

按下Enter键，div移动

document.onkeydown = function handle1(event) {
   
    if (event.keyCode === 13) {
   
        div.style.left = 100 + 'px';
        div.style.top = 100 + 'px';
    }
}

一般这样写并没有什么问题

加功能：点击document对象，div移动到鼠标位置

document.onclick = function handle2(event) {
   
    div.style.left = event