1）背景介绍：

               组件库就是界面设计常用控件或元素的集合， 一个好的组件库，衡量标准主要包括灵活性、复用性、全面性。 前端组件库，这是一个概念，也是一种技术。

（2）知识剖析：

            为什么要做组件库？

                      传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用， 而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长， 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

                         组件化的初衷并非提高一致性、利于团队合作这些高大上的目的，而是人类进步的第一生产力——「懒」。 消灭重复劳动是提高效率的主要途径，勤劳如小蜜蜂的设计师也不例外，那么组件化就是无论交互前端开发还是UI设计中我们不得不思考的问题。

（3）常见问题：

                为什么要进行组件化？

（4）解决方案：

                   ①从开发者角度来看： 在CSS上，保证代码上的模块化，具有独立作用域； 内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响； 在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响。极大提高工程编译速度,
                     ②进行组件化拆分后，每个业务或者功能都是一个单独的工程，这个单独的工程可以独立编译运行，拆分后的工程通常都比较小，代码量也比较少，我再也不用像以前编译一下得等待好几分钟了。
从公司角度来看： 业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务； 项目可维护性更强，提高开发效率； 更好排查问题，某个组件出现问题，直接对组件进行处理； 开发测试过程中，可以只编译自己那部分代码，不需要编译整个项目代码。

（5）编码实战：

               关于导航栏组件库

<div class="nav-head">

（6）拓展思考：

              组件库的优缺点：

       优点：

1极大提高工程编译速度

2业务模块解耦，有利于多人团队协作开发

业务组件之间不能相互引用，每个组件都把对应的业务功能收敛在一个工程里，彼此互不打扰。 在多人团队里，每个人只负责自己的业务模块，他对业务功能的增删改查，都只限定在自己的这个业务模块里，不会影响其他人的业务，他代码质量的好坏也只会影响到自己的业务模块；对测试来说，也十分方便，大部分情况下，我们只需要着重测试修改过的业务组件即可，而不用老是进行全部回归测试。

3组件化是功能重用的基石

业务组件类似一个个积木一样，我们可以用积木搭建出不同的房子，同理我们也可以创建多个不同的APP。我们只需要维护好每个组件，需要用到该组件的功能时，一建引用集成就可以了。

        缺点：

1:组件化开发前期可能要花费更多的时间来进行模块拆分；
2:一个人的小项目完全没必要组件化开发，那样只会给自己带来更多的工作量；
3:组件化可能会带来更多重复的代码；
4:组件化需要良好的架构设计，包括怎么拆分业务，组件之间怎么通信等等，
5:需要有个高水平的架构师统筹全局，经验不足的同学盲目进行组件化反而会适得其反，带来更多的麻烦；

（7）参考文献

                         参考一：前端框架及组件库选型分析

                         参考二： 前端为什么一定要做组件化

（8）更多讨论：

              1：轮播图怎么实现图片跳转；

 三张图片我宽度给了500%，放在一起，每张图片宽度100%，利用媒体查询，最后利用checked来回转换点击

              2：组件库有哪些作用？

利于开发，维护，便于写作开发，增加开发效率。

              3：组件库的本质是什么？

 组件库就是界面设计常用控件或元素的集合