如何对vue模块进行功能封装,vue组件封装技巧
当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用。与其让自己或他人面临这种问题,不如我们一起来学习下,如何将代码更优雅的组织起来,前人栽树,后人乘凉。
我经常和别人强调,一定要做好设计,设计的目标是什么?个人理解是,增加代码的可塑空间,降低维护成本。
文档设计是必要的吗?
答案是肯定的,在做业务之前一定要做好设计,但究竟哪些是需要我们设计的呢?做好以下几点,轻松搞定前端文档设计:
- 需求目标是什么?
- 你是怎么理解需求的
- 实现方案是什么
- 关键节点的数据解构设计是什么
- 模块的作用
- 如何CRUD
- 新人拿到这个文档是否可以理解你的设计思路
很多时候大家是没有时间做设计的,但在开发之前这些是你必须要确认清楚的,尤其是对于新手来说,建议大家不要立刻开始开发任务,一定是要想清楚才动手。理想情况下70%设计(输出伪代码),30%的业务填充。好的领导一定会重视员工的成长和项目的未来的,如果有条件,就用文档把想法输出吧。
有了思路和方案,我们来看看怎么去把代码组织的更优雅吧,首先我们需要思考几个问题:
- 目录结构如何建设,理由是什么。
- 模块功能划分,是否遵循高内聚,低耦合的思想?
- 函数怎么设计,是否可移植可复用。
- 是否有清晰的注释说明
以上4点,我们在开发过程中,新建文件和函数时,要时刻注意,目标是让我们建设的工程,结构清晰,模块作用明确,各施其职,就像一排排整齐的水管。
vue组件封装技巧
- 提取公共常量
- 提取公共工具类
- 提取类型声明文件
- 单个vue组件封装
单个vue组件封装
组件拆分
将独立的功能拆成一个个组件,就像你看到一个网页设计稿,很容易把它拆成不同的div模块,相互协作拼装出来一个完整的网页一样,稍加练习,这对大家来说很容易做到。
例如:
数据模型
按照功能模块将数据封装成对象或数组
反面例子:
private pprMenuTemporary = []; // 正在拼装中的pprMenu,这个是为了解决处理过程中更新数组不刷新的问题
private entityName: Array<string>