前端开发必知：组件封装的原则

admin管理员组

文章数量:1794759

前端开发必知：组件封装的原则

哪些情况需要封装组件

一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式。

封装原则

1、单一原则：负责单一的页面渲染

2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等

3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复

4、可扩展：需求变动能够及时调整，不影响之前代码

5、代码逻辑清晰

6、封装的组件必须具有高性能，低耦合的特性

7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可。

可维护性 可扩展性 1：活用组件继承 2：活用slot 3：使用props灵活表现界面元素 4：父子拆分 协作性 1：使用computed对props进行二次封装 2：css使用BEM命名 3：事件以handle开头 4：私有方法以_开头著名 5：对外暴露类似html空间的原生属性来贴近原生行为 6：常量使用const声明

【BEM: Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。】

.site-search{} /* 块 */ .site-search__field{} /* 元素 */ .site-search--full{} /* 修饰符 */

本文标签： 组件原则