前言

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

😺 为什么要优化？

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

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

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

😺 重构的前提

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

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

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

😺 拆分优化

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

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

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

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

🐱 写到最后

• 今天的分享就到此为止啦！😉
• 如果大家还有不懂的地方可以在评论区留言或者大家一起讨论哦！
• 如果这篇文章有帮到您的的话不妨 关注 点赞 收藏 评论 转发支持一下，大家的支持就是我更新最大的动力啦~😆
• 如果想跟我一起讨论和学习的话，可以私信留言，或者评论区留言，拉你进我的前端学习群哦！
• 感谢大家支持🤩