前端代码优化案例（初版）

本案例集合，用于常规前端开发使用，用以提升团队整体代码质量。

总原则：

1、Don't Repeat Yourself (不要重复你自己)。

DRY是指Don't Repeat Yourself特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。《The Pragmatic Programmer》对这一思想做了很好的阐述。把一切重复的代码抽象出来。我觉得最主要的原因是很好维护，当需要改动时只需要改动一次。

代码复用的层次：

函数级别复用，对象级别复用，接口级别的，类库级别复用，框架级别复用。

注：我们目前还处在“函数级别复用”上。(这个最基本的做好也减少了不少重复代码.....)

另一个有关的观点是：把固定的部分和变化的部分分离出来。

固定的部分分离有利于代码复用，变换的部分分离，在变换发生时容易修改替换。

简洁比简单更重要，维护成本高低的决定因素。

2、No zuo no die. No can no BB

意思是，你如果不做蠢事，蠢事就不会返回来找你麻烦。但是如果你做了蠢事，蠢事肯定会返回来找你麻烦。

“不作不死”是一个“不A不B”型四字词组，意思是“如果你不作死，你就不会死”。从逻辑关系上讲，“不作”是假设条件，“不死”是预想结果。no zuo no die 是逐字逐个翻译的四字词组，no zuo 是假设条件，no die 是预想结果。其实，英语本来不乏这种no A no B 结构的词组，例如英语谚语No pain, no gain（不劳则无获）。no pain 是假设条件，no gain 是预想结果。

如下为案例部分：

1. 三目运算，不做三重以上叠加使用

建议：使用计算属性或者方法进行书写

图形用户界面, 文本 描述已自动生成

三目运算，建议存在两层判断使用进行使用

1. 计算属性使用

账面上，存在两种使用方式，一般对于表单元素的双向绑定场景下，存在对应get及set的操作

1. veux数据处理

总原则： actions 可以处理异步及同步问题，可以做多个动作；mutations 只能处理同步数据，建议只做一个动作；即actions 触发对应的mutations 对应数据读取，使用getters进行读取； 页面对于vuex数据使用，统一采用computed进行及时读取； 涉及到对应数据变动，使用规范的套路，如：

文本 描述已自动生成

涉及到vuex接受数据之后，需要进行数据加工，大体有两种思路： 接口数据请求处理的时候，进行加工；或者在对应页面拿到数据之后，进行类似计算属性的拼装

1. vuex持久化缓存技术

核心点在于是否都缓存，或者都不出缓存或者部分缓存 对应的方案，大体有三种，如下：

文本 描述已自动生成

1. 常见模块处理思路

顶层文件拿数据之后，进行数据分发，

文本 描述已自动生成

对应组件接受数据之后，进行对应业务操作

需要加工的数据，额外处理 这块涉及到两种情况,就是自身模块对应veux数据初始化的处理 可以在顶层文件初始化的时候，进行vuex变量的初始化之后，再进行接口请求，这样离开对应页面的时候，就不用进行vuex变量的初始化； 或者在顶层文件初始化的时候，未进行vuex变量的初始化，但是在离开的时候，进行了vuex变量的初始化； 主要是为了解决，页面业务或者接口处理数据的时候，可以有类似容器的概念的东西，进行存储，及js不报错，可以正常进行业务逻辑的书写

1. 性能优化等图书推荐

图片包含 文本 描述已自动生成

图片包含 文本 描述已自动生成

图片包含 图形用户界面 描述已自动生成

图形用户界面, 文本 描述已自动生成

图形用户界面, 文本, 白板 描述已自动生成

文本, 应用程序 中度可信度描述已自动生成