找回密码
 注册
搜索
查看: 74|回复: 0

大家会重新优化自己写过的代码嘛?

[复制链接]
发表于 2024-6-28 15:16:45 | 显示全部楼层 |阅读模式
作者: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 内部维护的数据,哪些需要父组件传入;另外确定暴露的事件(分发事件),比如搜索,传递出去的参数,要告诉父组件触发了搜索事件,父组件接收到才会去更新内容部分。

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

Archiver|手机版|小黑屋|52RD我爱研发网 ( 沪ICP备2022007804号-2 )

GMT+8, 2024-7-23 05:14 , Processed in 0.063490 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表