作者：up_up_up

前言

• 今天在忙完工作的时候，发现还有很多时间，于是......我利用这些时间来优化自己之前写的代码。
• 项目：Vue2 + Element ui

😺 为什么要优化？

因为看见一个页面代码篇幅太“长”（950行+），这里的950行，并不是说所有900行的单页面就是长代码了，我前面提到的这个 “长” 是针对我这个页面的功能的。

我认为我这个页面的功能，可以把这部分代码写得更少，封装得更好，可读性也能继续提高，所以选择重构。虽然这个页面功能较多这个无可厚非，但是这个不是 长篇幅 的理由哈哈哈😂。

虽然里面已经有封装了组件，但是不够完善，data属性过多，methods方法多，拆分不完善，不全面，后期想快速 定位问题 可能比较 困难，所以选择 重构。

😺 重构的前提

我们 不要 用 代码行数 来作为 代码好坏的标准。我认为这是较为狭义的，不严谨的一种说法。Vue单页面因为 template、script 和 style 都在一个文件里，很容易写出行数较长代码，尤其是样式，如果说需要响应式，行数根本 hold 不住，所以一般我们会把 <style> 放到文件的底部。

而影响 Vue单页面可读性 和 可维护性 的，主要在脚本那部分。这部分写得烂的话，不需要堆成山就足够让人崩溃了，这也和行数无关。

对于独立且比较重的业务 来讲，写在 一个文件 里也是 没太大问题 的，那些把代码拆解到300~500行一个文件的同学，有一部分是为了拆而拆。不复用的话，我们拆了可能意义不大，所以我们要具体分析是否有拆分的意义所在。

😺 拆分优化

第一：分析页面结构，拆分出可独立维护的子模块

我们来看看掘金的首页，我们可以大致分成这几块，具体内容在具体分析（这里简单给大家演示一下 页面结构 基础拆分，详细的小伙伴可以自己继续深入研究😀）

第二：明确子模块对应的代码，确定可以拆分的子组件

其中像我今天优化的这个页面中存在比较多的Tabs 标签页， 每个tab 里面又包含了基础的表单查询+表格+分页，很明显这部分如果写在同一个页面将产生很多基础组件 和 方法（函数）等，这部分可以优先拆分。还有就是弹窗，抽屉 一类的也可进行拆分，即便在同一个 Vue 文件中编写，这类组件也是比较独立的部分，拆分起来相对容易。

第三：针对子组件负责的渲染及业务逻辑，明确其所需的属性及事件

细分每个子组件负责的事情，比如还是用我们掘金的首页做分析，我们要把 header 部分拆分出来，首先需要明细 header 需要渲染的内容，像 logo ，导航菜单啊，创作者中心，用户头像等等；其次确定哪些是 header 内部维护的数据，哪些需要父组件传入；另外确定暴露的事件（分发事件），比如搜索，传递出去的参数，要告诉父组件触发了搜索事件，父组件接收到才会去更新内容部分。

🐱 写到最后

• 今天的分享就到此为止啦！😉
• 如果大家还有不懂的地方可以在评论区留言或者大家一起讨论哦！
• 顺便吆喝一声，如果你计算机、软件工程、电子等相关专业本科及以上学历，欢迎来共事。前端/后端/测试​均可投，技术大厂。😆
• 感谢大家支持🤩