黑马程序员技术交流社区

标题: 【广州前端】编写更优雅的 JavaScript 代码(长期更新) [打印本页]

作者: neekin    时间: 2018-9-6 17:23
标题: 【广州前端】编写更优雅的 JavaScript 代码(长期更新)
本帖最后由 neekin 于 2018-9-6 17:26 编辑

总结下对 JavaScript 代码编写的认识,写尽可能优雅的代码。
代码技巧

优先 ES6 新特性写法

熟练使用 ES6 新特性可以优化代码,更加简洁,代码对比
// 箭头函数
function foo(){
  console.log('hello world')
}

const foo = () => console.log('hello world')

// 数组去重
const formatArray = arr => [...new Set(arr)]

// 数组合并
const newArr = [...arr1, ...arr2, 'value']

// 对象浅拷贝
const newObj = {...obj}

// 解构赋值
const person = {name: 'bao', age: 18}
const { name, age } = person

...

优化逻辑判断语句

大量的 if else 逻辑判断难以维护,且性能较差,可用多种方式代替
// 对象配置法
// 函数内部有条件判断,且 return 值时,满足条件立即return,而不要在结尾return
const foo = v => {
  if (v === 'name') {
    return 'bao'
  } else if (v === 'age') {
    return '18'
  } else if (v === 'height') {
    return '180'
  }
}
const cfg = {
  name: 'bao',
  age: '18',
  height: '180'
}
const foo = v => cfg[v]

// 数组配置法
if (value === 'hello' || value === 'world' || value === 'blabla') {
  // ...
}
// 配置数组形式
const rightValue = ['hello', 'world', 'blabla']
if (rightValue.includes[value]) {
  // ...
}

善用 && 、 || 和 三元运算

if (name === 'bao') {
  someFunc()
}

name === 'bao' && someFunc()

if (name === 'bao') {
  someFunc()
} else {
  elseFunc()
}

name === 'bao' ? someFunc() : elseFunc()

对象属性变量应用

如在 react 中,调用 action 方法来获取数据,不同条件执行不同方法
if (isMember) {
  let res = await actions.getMemberInfo(params)
} else {
  let res = await actions.getCommonUserInfo(params)
}

const actionName = isMember ? 'getMemberInfo' : 'getCommonUserInfo'
let res = await actions[actionName](params)
更高效的代码

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

局部变量的读取速度最快,而引用类型的数据读取需要按引用指针去查找,所以可以对多次使用的引用类型属性
使用局部变量读取一次,重复使用
let obj = {
  person: {
    man: {
      bao: {
        age: 18
      }
    }
  }
}

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

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

删除属性时,js 引擎会去查找该属性的值是否是其他对象的引用,所以删除前提前赋值为 null,可以减少
js 引擎的检测过程,提高效率
let obj = {
  person: {
    man: {
      bao: {
        age: 18
      }
    }
  }
}
obj.person = null
delete obj.person

局部变量保存数组 length

关于这个优化的讨论一直不少,参考有没有必要缓存JavaScript数组的length
let len = arr.length
for(let i=0; i<len; i++)){
  // ...
}
代码结构组织等优化
随着项目(react 项目)的日益扩大,代码量快速增多,后期维护非常耗费时间,主要通过以下方法减少代码量

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

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

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

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

善用装饰器
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 {
  // ...
}
编不下去了,暂时就想起来这么多,想起来了再添加...






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2