前端组件化

什么叫前端组件化？

1、组件是对逻辑的封装，不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件，而这些并不能称为控件
2、组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件（如引入样式、引入框架等）。然而这一点现有那些所谓组件库做得并不好，技术上也不大现实
3、组件是声明式定义的，而非命令式。这个不想多说，很大程度上是自己主观的一个想法
而上面最重要的就是第一点，所以要问我什么是“组件化开发”，我的说法是：
把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式

前端组件化的问题

不过话说回来，在这个要求之下，组件其实不是那么好进行抽象设计的，随便说几个例子，有难的也有简单的：
1、非图形元素的各种需求如何统一接口，如timer和ajax
2、组件可以横向组件，但是纵向复用如何解决，如希望任何图形元素都可以实现被鼠标拖拽的效果，则鼠标拖拽应该也是个组件，这个组件与其它组件的关系是什么
3、有些组件对其可被组合的组件是有要求的，比如HTML里就不大好意思把一个

放进一个里，这一点如何在组件上表达（实现不难，表达比较难）
一些我们原本想当然认为纯的小函数的东西，是不是也能当组件玩，比如underscore.pick要不要也是个组件

组件化其实并不是一个很难理解的词语：

组件化就好像我们的 PC 组装机一样，整个机器（应用）由不同的部件组成，例如显示器、主板、内存、显卡、硬盘等等。自己组装的 PC 有这么几个好处：
1、在保持硬件的兼容性前提下，随意更换每一个部件，都不会影响整个机器的运行
2、当机器出现了问题的时候，我们可以通过插拔法快速定位硬件错误
3、假如 PC 跑不起四路泰坦的仙剑6，我们可以单独更换显卡或者升级内存

假如把以上特点对应到前端领域中，组件化开发有如下的好处：
1、降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现。
2、调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。
3、提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。例如某个组件负责处理异步请求，与业务无关，我们添加缓存机制，序列化兼容，编码修正等功能，一来整个系统中的每个使用到这个组件的模块都会受惠；二来可以使这个组件更具健壮性。
4、在团队开发中，组件化带来的优势是便于协同开发，由于代码中的耦合度降低了，每个模块都可以分拆为一个组件，例如异步请求组件，路由组件，各个视图组件。团队中每个人发挥所长维护各自组件，对整个应用来说是精细的打磨。

在Javascript 的开发中，组件化其实和模块化的意义相当，大概是根据功能、业务进行代码划分，使到这部分的代码可以被复用，例如 $、_ 这些工具库就是将功能进行模块化。在近一两年中，ng、react 等在我们开发的 view 层中引入一些自定义标签就可以渲染出整个组件，大家会觉得组件化这东西比较新颖，其实本质上和我们以往的模块化并无差别。

组件化和模块化
组件化和模块化的价值都在于分治，web应用系统的复杂度不断提升，兼顾开发效率和产品实际运行效率，会在开发阶段运用组件化和模块化的手段分离关注点，结合构建工具合理打包。
组件化更多关注的是UI部分，你看到的一个管理界面的弹出框，头部，内容区，确认按钮和页脚都可以是个组件，这些组件可以组成一个弹出框组件，跟其他组件组合又是一个新的组件。
模块化侧重于功能或者数据的封装，一组相关的组件可以定义成一个模块，一个暴露了通用验证方法的对象可以定义成一个模块，一个全局的json配置文件也可以定义成一个模块。封装隔离来后，更重要的是解决模块间的依赖关系。