前端进阶之路--代码规范(1)
在我三年工作经验的认知中,我认为可以分为三个阶段:
第一阶段"生存阶段"即东拼西凑完成功能需求阶段,可能别人map,filter能实现的我用了双层for循环...(有点类似生存阶段的温饱阶段)
第二阶段"生活阶段"会考虑一些东西复用,包括用一些高级的函数,完成需求不在话下,但是也没有什么亮点的代码,这个阶段持续很久...(持续了很久,除非自己想要改变想要进阶)
第三阶段"享受阶段"追求极简干净的代码实现复杂的需求...
虽然我认为第三阶段我还没完全达到,但是在经历了几个月被cto盯着修改代码之后,现在觉得看到以前的代码都会吃不下饭🤮,下面总结一下关于前端时间review代码的一些心得:
禁止写重复代码!!!禁止写重复代码!!!禁止写重复代码!!!
这是解决问题的最重要的一点,初级前端和高级前端不同的地方就在于封装,初级前端不厌其烦的写着重复代码,高级前端封装着各种各样的组件和方法,有经典的、有实用的、有我们看不懂的。
- 二次封装--message
这种代码可能大家都会觉得没有必要再封装了,其实如果想要修改某一个属性值的时候就会看到封装的必要性,例如修改duration改为3000,那么是不是所有用到的地方都需要修改呢?
下面是封装后的写法:
1 import Vue from 'vue'; 2 import { Message } from 'element-ui'; 3 4 const messageSuccess = { 5 install(Vue) { 6 Vue.prototype.messageSuccess = function ({ 7 showClose = true, 8 message = '', 9 type = 'success', 10 duration = 5000 11 }) { 12 Message({ 13 showClose, 14 type, 15 message, 16 duration 17 }); 18 }; 19 } 20 }; 21 Vue.use(messageSuccess); 22 23 const messageWarning = { 24 install(Vue) { 25 Vue.prototype.messageWarning = function ({ 26 showClose = true, 27 message = '', 28 type = 'warning', 29 duration = 5000 30 }) { 31 Message({ 32 showClose, 33 type, 34 message, 35 duration 36 }); 37 }; 38 } 39 }; 40 Vue.use(messageWarning);
使用时:
![](https://img2020.cnblogs.com/blog/1801750/202010/1801750-20201013160555906-1526629346.png)
- 接口请求的封装
修改前的写法:
上面接口请求的步骤分为loading开始,请求接口拿到数据,关闭loading。这算是一个固定的请求模式,那么是否可以抽离封装成一个方法呢?
1 import Vue from 'vue'; 2 3 /** 4 * 公共接口请求, 目前error和catch处理逻辑一致 5 * @param {Function} loading 页面loading 6 * @param {Function} runner 页面接口请求 7 * @param {Function} success 页面成功方法 8 * @param {Function} catcher 页面失败及异常方法 9 * @param {Function} finaller 请求最后执行方法 10 */ 11 const EMPTY_FUNCTION = () => undefined; 12 const RequestProcessor = { 13 install(Vue) { 14 Vue.prototype.RequestProcessor = async ({ 15 loading = EMPTY_FUNCTION, 16 runner = EMPTY_FUNCTION, 17 success = EMPTY_FUNCTION, 18 catcher = EMPTY_FUNCTION, 19 finallier = EMPTY_FUNCTION 20 } = {}) => { 21 try { 22 loading(true); 23 const { data } = await runner(); 24 if (data.code === 0) { 25 success(data); 26 } else { 27 catcher(data.msg); 28 Vue.prototype.messageError({ message: data.msg }); 29 } 30 } catch (e) { 31 catcher(e); 32 Vue.prototype.messageError({ message: e }); 33 } finally { 34 finallier(); 35 loading(false); 36 } 37 }; 38 } 39 }; 40 Vue.use(RequestProcessor);
那么修改后的写法是:
这种写法的好处给人一种“分层”的感觉,处理loading的方法,处理接口请求的,处理数据的,处理异常的,清晰明了且减少很多重复代码。对于整个项目来说这是很有必要的!!
- if判断语句和三目运算
if语句中一条表达式的时候,尽量考虑用三目运算:
以前的cto是严禁(非常反感)if语句中一条布尔赋值语句,即
因为这是一句话就可以解决的代码:
所以进阶第一步,先去除重复代码,看看代码的可读性和优雅性是不是提高了很多???
最近看到的一段代码:
不知道我的老大看到之后会不会气吐血!!!毕竟他是眼里容不得沙子的,说实话我看到之后也很难受,感觉像是实习生写的,但是或许不注意我们写的代码里面就有这样的。。。
前端代码进阶第一步,严禁写重复代码!!!严禁直接拷贝!!!