前端进阶之路--代码规范(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);

使用时：

接口请求的封装

修改前的写法：

上面接口请求的步骤分为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);