前端优化

1、清楚的命名
好的代码能够清除的表述它所执行的逻辑，这也是所谓的'自解释代码'
而自解释代码首先就需要将代码中的变量、方法等声明清除，需要注意的是，需要完整表述变量或方法所代表的含义
不要为了省事，而使用看不懂的缩写
对于长命名，编辑器会有提示不全，也可以通过鼠标双击选中变量并进行复制

2、直接了当的语义化代码
清晰的语义可以在看到任何一行代码，任何一个变量都能直观的知道这个东西是做什么的，而不需要你去找变量的声明、或使用的地方，才知道具体作用
虽然下面两段代码的含义相同，但是看到forEach 就能知道是对数据里的每一个元素进行处理

image.png

image.png

第一段的意思是找到等于0的元素，如果有，做一些什么

而第二段逻辑是找到数组中等于0的元素，过滤并判断数据长度，如果过滤后的数组长度大于0（有等于0的元素），做一些什么

虽然两段代码的功能是一样的，但是第二段的意思会更加绕口一些

3、模块化代码
模块化的含义是：将代码拆分成单独的模块，每个模块的代码拥有自己的含义，大到整个项目，小到一行代码，都可以作为单独的一个模块

拆分方法

将多行语句拆分成方法，是常见的拆分方法，这使得多行代码的逻辑，能够用一句话来表达

对齐代码

出了拆分成方法，合理划分代码也是一种将代码模块化的方法，使得在文件的某一块具备它自己的意思

对于方法无论使用哪种方式，都是可以的，主要还是看项目整体风格

但是无论使用哪一种，都隐含着模块的理念在里面

对于第一种，function的首字母f和}是对齐的，在这整个一块区域里，就是foo的逻辑
第二种也是，两个大括号之间则是（PS：js会遇到自动补全分号导致的bug，所以优先推荐第一种）

image.png

对于标签，也是同样的道理，在一个闭合的区域里，包含的是同一功能的内容

image.png

针对函数调用，JSX也是同理，让 （ 和 ） 两个括号对齐，来形成一个区域， 来封闭一块内容

image.png

让每行代码都有它的含义

出了上面的情况，甚至应该让每一行代码都有它自己的意思

比如下面的代码

对于组件属性，每一行代表着设置某一个属性，只需要按照纵向扫过去，有没有设置哪些

属性将会一目了然

而方法的调用，第几个参数传的是什么内容，也能直观的看到

image.png

4、当代码能够清楚表达它所做的事情，是不需要额外的注释来为他做解释，但不代表着永远不需要写注释了

代码只能想阅读者传达出这段代码的作用，但是为什么要这么做，却只能通过注释来向读者说明

这是一个项目中表格列宽自适应部分的代码，这里的注释说明了为什么要这么做的内容---防止单元格内容被遮挡

image.png

5、单一职责

一个文件维护一类代码，一个方法维护一个功能，一块区域里的代码做一件事，一行代码值代表一个意思

当遵循这么一个简单的理念，从一行代码到整个项目，都会有着自己的含义

将代码模块化也是为了保持每个模块的职责单一

6、减少重复
当代码中出现重复的部分的时候，就是考虑拆分的时候了
相关属性及方法拆分到一起，就是类；
模板+逻辑+样式拆分到一起，就是组件
功能相关的代码拆分到一个文件，就是模块文件

类、组件、模块、框架、或者说封装操作，正式为了聚合关联性强的代码，使之形成一个有一个的模块

而这些封装操作将大块代码聚合在一起，正是为了保持职责单一，并且后续如果需要进行维护或功能拓展时也会变得方便

比如遍历数组元素并设值，对于下面这样的代码，完全可以在循环体顶部声明一个变量然后取值

这里只有两行，我遇到过七八行代码都是这样的，当取值逻辑变化时，如果变成 i + 1，那所有取值的部分都需要修改一次

image.png

拆分方法也是同理，如果某一段相同的代码逻辑需要变动，那么所有地方都得修改一次

如果我们要对内部进行改造，只要保持整个模块内部的功能是一致的，也不用担心原有功能受到影响