JS红皮书读书笔记-24-最佳实践

提醒:本文发布于 1472 天前,文章内容可能 因技术时效性过期 或 被重新修改,请谨慎参考。

TOC
  1. 1. 可维护性
    1. 1.1. 什么是可维护的代码
    2. 1.2. 代码约定
    3. 1.3. 松散耦合
    4. 1.4. 编程实践
  2. 2. 性能
    1. 2.1. 注意作用域
    2. 2.2. 选择正确方法
    3. 2.3. 最小化语句
    4. 2.4. 优化DOM交互
  3. 3. 部署

可维护性

可维护性并不是js专有, 其他语言也有这么个说法, 可维护性最大的价值是让别人更好的在你代码的基础上维护和增减功能

什么是可维护的代码

通常写入注释是为了让其他人更好地看懂自己写了啥, 不过我相信一条原则, 写的好的代码, 本身就是注释, 可维护的代码有以下几个特征:

  • 可理解: 容易被理解
  • 直观: 直观可读
  • 可适应: 代码以一种数据上的变化不需要完全重写原来的方法
  • 可扩展: 在某种程度上考虑到将来要用到的功能
  • 可调试

代码约定

团队开发中通常约定代码风格, 例如缩进, 换行, 变量/函数命名大小写等, 注意不要起令人困惑或者没有意义的变量名, 也无需担心变量名过长, 因为可压缩.

松散耦合

  1. 解耦HTML/JS: 尽可能避免在html元素中直接写js
  2. 解耦Css/JS: 尽可能不要用js设置css
  3. 解耦JS逻辑: 每一个函数尽可能实现单一的功能(按照最小化分离原则)

编程实践

  1. 尊重对象所有权:
    • 不要修改默认类型的属性和方法
    • 不要定义自己存在的方法
  2. 避免全局对象: 前面作用域链也讲过, 全局作用域中保存的变量是最后查找的
  3. 尽量避免和null对比: 应该用更具体的类型或者实例进行对比
  4. 使用常量: 在ES5中我们用大写标识符表示常量

性能

注意作用域

  1. 避免全局查找
  2. 避免with语句: with设计的目的是为了简写某个对象, 方便开发者操作属性, 但是这非常容易造成作用域混乱

选择正确方法

  1. 避免不必要的属性查找: 在计算机科学中,算法的复杂度是使用 O 符号来表示的。最简单、最快捷的算法是常数值即 O(1)。之后,算法变得越来越复杂并花更长时间执行。
    使用变量和数组要比访问对象上的属性更有效率,后者是一个 O(n)操作。对象上的任何属性查找都要比访问变量或者数组花费更长时间,因为必须在原型链中对拥有该名称的属性进行一次搜索。简而言之,属性查找越多,执行时间就越长。所以有必要, 就缓存某一个常用的值.

    下面这个表展示算法复杂度种类:

    • O(1) : 不管有多少值,执行的时间都是恒定的。一般表示简单值和存储在变量中的值
    • O(log n): 总的执行时间和值的数量相关,但是要完成算法并不一定要获取每个值。例如:二分查找
    • O(n) : 总执行时间和值的数量直接相关, 例如: 遍历某个数据中的所有元素
    • O(n^2) : 总执行时间和值的数量有关, 每个值至少获取n次, 例如:插入排序
  2. 优化循环
  3. 展开循环
  4. 避免双重解释
  5. 其他注意事项
    • 原生方法最快
    • switch比一系列的的if-else要快
    • 位运算符比较快

最小化语句

  1. 多个变量声明: 可以使用一个var
  2. 插入迭代值 (个人认为可读性会降低)
  3. 使用数组和对象字面量: 简洁明了

优化DOM交互

  1. 最小化现场更新: 优先使用document.createFragment
  2. 使用innerHTML创建元素更快
  3. 事件代理: 使用事件代理可以减少事件绑定, 提高性能
  4. 注意HTMLCollcetion: 循环的时候不要用它作为终止条件

部署

书上使用的一些工具比较旧, 所以不打算在这里讲解, 之后另开一篇文章


本章完

访客评论