前端项目的一些优化小技巧(编码习惯)

封装第三方组件

1. $attrs使用

比如input中二次封装，当我们想传入disabled的时候，我们一般会写：

<a-input v-model="inputVal" :disabled="disabled"></a-input>

然而，这种写法不方便后续扩展更多props，比较好的是:

<a-input v-model="inputVal" v-binds="$attrs"></a-input>

$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件

除此之外，我们还需要把inheritAttrs选项设置为false，简单来说，就是避免设置的属性添加到我们自己组件的根元素div上。

在antd-design-pro源码也有应用：

2. 使用第三方组件自定义事件

一般而言，我们都会用$emits进行事件传递。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

<a-input v-model="input" v-bind="$attrs" v-on="$listeners"></a-input>

js优化

封装复杂判断，增加可读性

//bad 基本无可读性
switch(num){ 
    case 1: ... 
    case 3: ... 
    case 7: ... 
} if(x === 0) {
... 
}

//good 增强可读性
enum DayEnum { 
    oneDay = 1, 
    threeDay = 3, 
    oneWeek = 7
} 
let num = 1; 
switch(num){ 
    case DayEnum.oneDay: ... 
    case DayEnum.threeDay: ... 
    case DayEnum.oneWeek: ... 
}

使用非变量

这个本人也使用过，isNotShow isOrNotShow 等。可读性差。

//bad
let isOrNotShow = false //是否展示，否表示不展示

//good
let isShow = false //是否展示

删除不必要的代码注释

这是在代码整洁之道里有的，没有必要保留的代码和注释就应该赶紧删除，在git上能看到历史记录。

if 语句优化。

//bad
if(value === 'duck' || value === 'dog' || value === 'cat') { 
  // ... 
}
//good
const animationsOptions = ['duck', 'dog', 'cat']; 
if (animationsOptions.includes(value)) { 
  // ... 
}

尽量让函数'纯'一些

也就是一个函数只做一件事。

单做一个截图功能

函数组合成类

类是多数现代编程语言的基本构造，能够将数据和函数进行捆绑在一个环境，将部分数据和函数进行暴露使用。在实践中，当你发现一组函数与同一块数据紧密联系，那么就可以考虑将它们单独封装成类。

原始代码

function base(reading){} 
function textbleCharge(reading){} 
function calculateBaseCharge(reading){}

重构代码：

class Reading{ 
  constructor(){} 
  base(){} 
  textableCharge(){} 
  calculateBaseCharge(){} 
}