本案例集合,用于常规前端开发使用,用以提升团队整体代码质量。
总原则:
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 是预想结果。
如下为案例部分:
- 三目运算,不做三重以上叠加使用
建议:使用计算属性或者方法进行书写
三目运算,建议存在两层判断使用进行使用
- 计算属性使用
账面上,存在两种使用方式,一般对于表单元素的双向绑定场景下,存在对应get及set的操作
- veux数据处理
总原则: actions 可以处理异步及同步问题,可以做多个动作;mutations 只能处理同步数据,建议只做一个动作;即actions 触发对应的mutations 对应数据读取,使用getters进行读取; 页面对于vuex数据使用,统一采用computed进行及时读取; 涉及到对应数据变动,使用规范的套路,如:
涉及到vuex接受数据之后,需要进行数据加工,大体有两种思路: 接口数据请求处理的时候,进行加工;或者在对应页面拿到数据之后,进行类似计算属性的拼装
- vuex持久化缓存技术
核心点在于是否都缓存,或者都不出缓存或者部分缓存 对应的方案,大体有三种,如下:
- 常见模块处理思路
顶层文件拿数据之后,进行数据分发,
对应组件接受数据之后,进行对应业务操作
需要加工的数据,额外处理 这块涉及到两种情况,就是自身模块对应veux数据初始化的处理 可以在顶层文件初始化的时候,进行vuex变量的初始化之后,再进行接口请求,这样离开对应页面的时候,就不用进行vuex变量的初始化; 或者在顶层文件初始化的时候,未进行vuex变量的初始化,但是在离开的时候,进行了vuex变量的初始化; 主要是为了解决,页面业务或者接口处理数据的时候,可以有类似容器的概念的东西,进行存储,及js不报错,可以正常进行业务逻辑的书写
- 性能优化等图书推荐