前言
优秀的代码必然是可读性强，健壮性强，性能好的代码，但是怎么才能写出优秀的前端代码，别着急，本文为你打下坚实的基础。
封装
封装可以简单理解为把一箱苹果或者梨装进一个包装盒的过程，然后贴一个标签苹果或者梨，别人就可以知道这个是苹果或者梨。
封装代码
封装代码是把代码逻辑的实现隐藏在这个盒子里面，然后告诉别人这个盒子里面封装的代码是什么功能，需要什么输入，会有什么输出。别人调用的时候遵守调用规则就好，当然封装的代码由封装它的人的负责。因此对封装的人而言，无论封装的代码的内部怎么实现的，只要对外的调用规则没有变化，内部实现可以随意地修改。对调用的人而言，他可以不用关心封装的代码是如何实现的，只需要遵守调用规则去调用就可以。
四个要素
从单个函数的角度来看，写出优秀的代码，我们只要把握好这几个要素，函数名，函数参数，函数内部实现，函数返回。
函数名
函数名应该做到见名思义，比如查找数组中的某一个元素，函数名可以定义为findElementFromArrayById。
函数参数
函数参数应该遵守一个规则，如果参数个数多了，可以定义成对象。
函数内部实现
函数内部实现应该根据具体的情况来做取舍，比如选择占用内存少的方式还是选择计算次数少的方式还是折中的方式。
函数返回
函数返回就是定义的函数的输出。比如函数findElementFromArrayById，它肯定是期望输出一个id是xx的element。
注意： 我们应该尽可能让函数的功能单一，这样复用的概率会更高，修改的概率会更低。
示例
/**
* @function 查找字段名是idName的，字段idName是id的某个元素
* @param array 必传
* @param id 必传
* @param idName 必传
* @returns res {null/Object}
*/
const findElementFromArrayById = (array, id, idName) => {
let res = null
for (let i = 0; i < array.length; i++) {
if (id === array[i][idName]) {
res = array[i]
break
}
}
return res
}
const res = findElementFromArrayById([{id: 1}, {id: 2}], 1, 'id')
const res1 = findElementFromArrayById([{pid: 1}, {pid: 2}], 1, 'pid')
console.log(res)
console.log(res1)
上面的例子中函数的参数idName是一个变化的，可以是id也可以是pid，也可以是其他，这样增强了函数适用范围，也减少了代码量。
谢谢阅读！
