关于偷懒的一点心得（也可说是优化代码）

这两年一直写后台管理的项目比较多，比较习惯用已经被公司大佬构建完善优化的非常全面的后台框架写东西，在这个框架内，一些常用的组件（如列表，表单验证，上传下载，树结构等），请求拦截器（统一增加头部信息，时间戳，token校验等）等等功能，都已经做好了，我只需要根据业务需求在框架内写业务流程便可，久而久之，发现自己对很多基础知识荒废不少，而且思维也越来越狭窄，总是习惯固定化的去思考一些东西，所以后面会多记录关于代码基础和框架核心这些方面的东西，而不是只流于表面的只思考业务流程。

今天记录一下发散思维这件事，到底能有多偷懒和简化代码。

后台中有时候会遇到这种需求，一个获取列表的接口，接收某一个状态参数，从而得到不同的数据，比如，我需要写一个获取某某记录列表的接口，这个接口接收已完成/未完成（0/1）这个参数，由于业务需求，客户要求将这两种状态分别使用两个列表页面展示出来，也就是说，同一个接口获取的列表，我需要展示在两个页面上，唯一的区别就是请求接口的时候，状态参数不同。

这个需求很常见，我作为一个思维比较片面的前端人员，当下二话不说撸起袖子写了第一个页面，固定状态参数为0，紧接着又复制粘贴了一遍，修改固定状态参数为1，两个页面就完成了，并不费多长时间，自己也没觉得哪里有问题。

直到今天要修改某个项目的bug，这个项目之前是公司大佬写的前端代码，扫了一眼之后，立刻拍手叫绝。

先说一下，大佬写的这块和我描述的需求是一样的，根据不同的状态展示不同的页面，此列表一共有四种状态，先看一下大佬关于这四个页面的路由配置：

{
        path: "/Site/Order/List/:ProcessState",
        name: "Site-Order-List-ProcessState",
        component: () => import("@/views/Layout.Site/Order/List-ProcessState.vue")
 }

嗯，没错，大佬只写了一个页面，这个页面从路由中接收状态参数，然后在页面中进行判断：

var strState = this.$route.params.ProcessState;
      if (strState == "Wait") {
            this.pageTitle = '待祭祀订单列表'
            this.processState = 0;
        }
        else if (strState == "Fate") {
            this.pageTitle = '祭祀中订单列表'
            this.processState = 1;
        }
        else if (strState == "Complete") {
            this.pageTitle = '已祭祀订单列表'
            this.processState = 2;
        }
        else if (strState == "Reply") {
            this.pageTitle = '已回复订单列表'
            this.processState = 3;
        }
        this.table.params = {
            processState: this.processState
        }

然后通过导航配置了四个页面的跳转路由及参数，可以说非常的简单了~

看完了这些代码之后，我在想，这个项目当时要是让我写，我大概率会复制粘贴四个页面出来...而大佬写的这些，里面所用的知识都非常非常的基础，逻辑也很简单明了，但是为什么同样的功能，我去写的时候，就根本没有往这里想，每天把简化代码挂在嘴上的我，在遇到真正需要简化的时候，又全然忘记这件事。

今天的记录，没有什么让人惊叹的技术点，但给我带来的启发非常非常的大，我常常说要简化，要简化，可是简化的第一步不就是要尽量的以最少的代码达到需求吗，我明明知道复制粘贴一遍的时候，有很多代码是重复的，但我却根本没有意识要去思考解决这件事，只觉得达到目的就好了，需求完成了就好了，但长久以往，我的代码可能会越写越烂，越写越累赘，连自己都不想再维护自己的代码了。