1、可维护性
1、什么是可维护的代码
2、编码规范
1、可读性
2、变量和函数命名
- 变量名应该是名词
- 函数名应该以动词开始
- 对变量和函数都使用复合逻辑的名称，不用担心长度
- 变量、函数和方法应该以小写字母开头，使用驼峰大小写形式
- 类名应该首字母大写
- 常量值应该全部大写并以下划线连接
- 名称要尽量用描述性和直观的函数
3、变量类型透明化
- 很容易忘记变量包含的数据类型。适当命名可以在某种程度上解决这个问题
- 通过初始化标明变量类型
let found = false; // 布尔值
- 使用匈牙利表示法标明数据类型
let bFound; // 布尔值
- 使用类型注释表明数据类型
let found /*:Boolean*/ = false;
3、松散耦合
- 某个部分对另一个部分依赖得过于紧密，代码就会变成紧密耦合，因而难以维护
1、解耦HTML/JavaScript
2、解耦CSS/JavaScript
3、解耦应用程序逻辑/事件处理程序
4、编码惯例
1、尊重对象所有权
2、不声明全局变量
3、不要比较null
4、使用常量
2、性能
1、作用域意识
1、避免全局查找
2、不使用with语句
2、选择正确的方法
1、避免不必要的属性查找
2、循环优化
3、展开循环
- 如果循环的次数是有限的，那么通常抛弃循环而直接多次调用函数会更快
- 如果不能提前预知循环的次数，那么或许可以使用一种叫作达夫设备的技术
4、避免重复解释
5、其他性能优化注意事项
3、语句最少化
1、多个变量声明
2、插入迭代性值
let name = values[i];
i++;
let name = values[i++];
3、使用数组和对象字面量
4、优化DOM交互
1、实时更新最小化
- 使用文档片段构建 DOM 结构
document.createDocumentFragment()
2、使用innerHTML
- 使用 DOM方法如 createElement()和 appendChild()， 以及使用 innerHTML
- 对于少量 DOM 更新，这两种技术区别不大，但对于大量 DOM 更新，使用 innerHTML 要比使用标准 DOM 方法创建同样的结构快很多
- 在给 innerHTML 赋值时，后台会创建 HTML 解析器，然后会使用原生 DOM 调用而不是 JavaScript 的 DOM 方法来创建 DOM 结构。原生 DOM 方法速度更快，因为该方法是执行编译代码而非解释代码
3、使用事件委托
- 以把事件处理程序添加到负责处理多个目标的高层元素上
- 只要可能，就应该 在文档级添加事件处理程序，因为在文档级可以处理整个页面的事件
4、注意HTMLCollection
3、部署
1、构建流程
1、文件结构
2、任务运行器
3、摇树优化
- 摇树优化（tree shaking）是非常常见且极为有效的减少冗余代码的策略
4、模块打包器
- 以模块形式编写代码，并不意味着必须以模块形式交付代码
- 由大量模块组成的 JavaScript 代码在构建时需要打包到一起，然后只交付一个或少数几个 JavaScript 文件
- 模块打包器的工作是识别应用程序中涉及的 JavaScript 依赖关系，将它们组合成一个大文件
2、验证
3、压缩
1、代码压缩
2、JavaScript编译
- 删除未使用的代码
- 将某些代码转换为更简洁的语法
- 全局函数调用、常量和变量行内化
3、JavaScript转译
4、HTTP压缩
