前端组件设计之理论篇

前言

什么是前端组件？对于一个前端开发人员来说再熟悉不过了。是的，“再熟悉不过”，但是当让你尝试具体描述下呢，我想大多数人脑袋中可能只有“组件化”这三个字，其他信息都模模糊糊，根本没有一个整体和结构性的概念；就拿Vue的开发者来说，脱口而出的可能是“每个.vue文件就是一个组件···”等等，很明显这并不是我想要的答案！

大多数人可能在实际开发中知道怎么开发一个组件，因为这都是实践后的经验，但是这些经验都是片段化的:

1、没法形成整体思维，无法说出一二，可能连面试都应付不了；

2、容易形成经验主义，复用到不合适的场景和业务；

3、容易开发出“四不像”组件，比如功能不完整、过度依赖等；

针对，上述问题，本文将从理论上系统的讲述下组件设计相关知识，希望对开发者能有所帮助！

一、什么是前端组件

就前端开发而言，组件可以简单的描述为视图逻辑和非视图逻辑的集合。视图逻辑即样式代码和视图交互部分，用于组件样式和交互动作的渲染，非视图逻辑可以看做数据处理逻辑和交互处理逻辑代码。视图和数据的结合构成了一个完整的前端组件。

二、组件设计原则

“一个组件的复杂度，主要来源就是自身的状态；