1.背景介绍
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
2.知识剖析
在软件时代，就一直遵从着两个原则来解决这个问题
内聚性:又称块内联系。指模块的功能强度的度量，即一个模块内部各个元素彼此结合的紧密程度的度量。若一个模块内各元素（语名之间、程序段之间）联系的越紧密，则它的内聚性就越高。
耦合性：也称块间联系。指软件系统结构中各模块间相互联系紧密程度的一种度量。模块之间联系越紧密，其耦合性就越强，模块的独立性则越差。模块间耦合高低取决于模块间接口的复杂性、调用的方式及传递的信息。
所谓高内聚是指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。
一个完整的系统，模块与模块之间，尽可能的使其独立存在。也就是说，让每个模块，尽可能的独立完成某个特定的子功能。模块与模块之间的接口，尽量的少而简单。如果某两个模块间的关系比较复杂的话，最好首先考虑进一步的模块划分。这样有利于修改和组合。
组件化并不是一个十分难以理解的词语，他就像我们组装电脑一样，由不同的组件构成，例如显示器，显卡，cpu，风扇，硬盘等，对应着来看可以分为头部，导航栏，侧边栏，底部等一系列的组件，这些组件就像电脑一样，当某个部件出了问题不会影响其他的部件，我们可以很快的确认电脑哪个地方出现了问题，我们还可以升级电脑，同理，我们也可以通过更换修改组件来进行功能拓展。
３.常见问题
为什么要进行组件化？
４.解决方案
从开发者角度来看：
在CSS上，保证代码上的模块化，具有独立作用域；
内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响；
在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响。
从公司角度来看：
业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务；
项目可维护性更强，提高开发效率；
更好排查问题，某个组件出现问题，直接对组件进行处理；
开发测试过程中，可以只编译自己那部分代码，不需要编译整个项目代码。
５.编码实战
６.拓展思考
组件化与模块化的区别？
模块化强调的是 拆分 ，无论是从业务角度还是从架构、技术角度，模块化首先意味着将代码、数据等内容按照其职责不同分离，使其变得更加容易维护、迭代，使开发人员可以分而治之。例如一个完整的系统可以拆分为功能模块，架构模块，而功能模块又可以拆分为商品浏览模块、订单模块、购物车模块、消息模块、支付模块，而架构模块可以拆分成数据存储模块，数据请求模块，缓存模块，数据处理模块等。
组件化则着重于 可重用性 ，不管是界面上反复使用的用户头像按钮，还是处理数据的流程中的某个部件，只要可以被反复使用，并且进行了高度封装，只能通过接口访问，一个网站可以分为导航组件，头部组件，留言组件，底部组件等等。
模块化的诉求是解耦，组件化的诉求是好用，但是他们的思想都是通过分治来让开发人员的工作变得更加轻松，让软件系统具有更优秀的可用性和可靠性。
７.参考文献
８.更多讨论
一个完整的组件化方案所需要具备的能力？
资源高内聚---- 组件资源内部高内聚，组件资源由自身加载控制
作用域独立----内部结构密封，不与全局或其他组件产生影响
自定义标签----定义组件的使用方式
可相互组合----组件真正强大的地方，组件间组装整合
接口规范化----组件接口有统一规范，或者是生命周期的管理
Ｑ：一些比较常见的网站插件？
某网站的弹窗？一些网页里的小宠物，框架里大都数都是组件
Ｑ：组件如何拆分如何组合：
自然是根据需要选择最合适的粒度来拆分啊
Ｑ:bootstrap以外的框架？
easyUI,foundation，Pure等等
Q：做组件的css文件存放问题
我觉得单独存放不要跟html文件混杂起来比较好，每个功能块放一个或者多个css文件
鸣谢
感谢大家观看