哪些情况需要封装组件

一段代码在项目中出现两次就开始考虑是否应该进行封装,出现三次就肯定要封装,大到一个页面,一个组件,小到一个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{} /* 修饰符 */