JavaScript 高效代码

更高效的代码

1. 使用局部变量代替引用类型查找

局部变量的读取速度最快，而引用类型的数据读取需要按引用指针去查找，所以可以对多次使用的引用类型属性 使用局部变量读取一次，重复使用

let obj = {
  person: {
    man: {
      bao: {
        age: 18
      }
    }
  }
}

let age = obj.person.man.bao.age
// use age do many things

2. 删除多个对象属性时先使属性为 null

删除属性时，js 引擎会去查找该属性的值是否是其他对象的引用，所以删除前提前赋值为 null，可以减少 js 引擎的检测过程，提高效率

let obj = {
  person: {
    man: {
      bao: {
        age: 18
      }
    }
  }
}
obj.person = null
delete obj.person

3. 局部变量保存数组 length

关于这个优化的讨论一直不少，参考有没有必要缓存JavaScript数组的length

let len = arr.length
for(let i=0; i<len; i++)){
  // ...
}

代码结构组织等优化

随着项目（react 项目）的日益扩大，代码量快速增多，后期维护非常耗费时间，主要通过以下方法减少代码量

1. 凡是二次出现的代码片段，立即考虑复用，拆分公共组件
2. 封装功能函数

最近做了一个复杂的图表、表格数据交互功能，涉及表格数据的各种计算、排序、比较、编辑前后对比等功能， 逻辑复杂，按交互不同有多种逻辑执行过程。采取的方法是单一功能函数封装，对每个计算、数据处理步骤， 都封装为小函数，不同逻辑不同函数组件组合，保证每个函数的可用性，整体功能也可以保证质量。

同时可以将项目常用的功能方法封装公用 util 来复用使用

3. 善用 class 类的继承，复用功能方法 主要封装了 fetch 请求的 get/post 方法到 CommonActions class, 然后创建 actions 时只需要 extends CommonActions 就可以在新的 actions 中直接调用 this.get()/this.post() 来完成 请求数据。

总之，在逻辑清晰的情况下，尽可能复用组件、方法，维护好高质量的公共组件、方法，便于项目维护

4. 善用装饰器 react 高阶函数已经提供了一种优雅的组件复用形式，而装饰器的使用可以更优雅地实现高阶函数 如我的另一篇记录 React Error Boundary 组件异常处理方案实践

同时，ant design Form 组件的创建也可用装饰器更简单的实现

class MyForm extends React.Component {
  // ...
}

const WrapForm = Form.create()(MyForm)

// 其他组件使用 WrapForm 组件
// 装饰器形式

@Form.create()
class MyForm extends React.Component {
  // ...
}

作者：baolq
链接：https://juejin.im/post/5b8fd36fe51d450e6475a92d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。