前端为什么要做组件化

而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。

我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰

就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。

这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。

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

组件化和模块化的区别：

来自https://www.jianshu.com/p/cac0beae8876

组件化

就是"基础库"或者“基础组件"，意思是把代码重复的部分提炼出一个个组件供给功能使用。
使用：Dialog，各种自定义的UI控件、能在项目或者不同项目重复应用的代码等等。
目的：复用，解耦。
依赖：组件之间低依赖，比较独立。
架构定位：纵向分层（位于架构底层，被其他层所依赖）

模块化

就是"业务框架"或者“业务模块"，也可以理解为“框架”，意思是把功能进行划分，将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。
使用：按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播.....）
目的：隔离/封装（高内聚）。
依赖：模块之间有依赖的关系，可通过路由器进行模块之间的耦合问题。
架构定位：横向分块（位于架构业务框架层）。

总结

其实组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。

而模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。

感觉组件化和之前看的样式分离非常像，都是把一个个复用性的代码拼装到通用库里，各个样式可以随意组合，而组件就是组成模块的细化样式，可以拼装成为一个模块。

模块化与架构相关，就是按照功能，需求拆分出来，甚至把header，fooder的样式单独的css文件拆分出来，在页面css里使用@import进行引用，遇到需要某部分完全变更删除或者修改的时候，直接修改对应css文件即可。需要某些功能或者添加新需求的时候，引用@import就可以了，这就是模块化的便利之处，但是使用@import也有弊端：

1. 因为@import的文件是额外请求的，所以页面加载的时候会有一小会儿的裸体（样式没加载进来），要等这些模块一个一个加载

2. 请求数太多，页面性能不佳，对服务器压力也会相对大一些。

3. 不同的浏览器以及不同的书写形式可能会有不同的加载顺序。

所以，最好的办法就是把模块打包！这和js模块化一样的，模块化开发，然后上线之前打包，线上完美使用。

（暂时不理解与样式分离的区别，或者说是否与模块化混淆了概念，也许是组件和样式分离的概念相近或者说，组件化就是样式分离的延伸，只不过定义了功能是用于组成模块。）

搜索了其他不同说法：

组件化：

把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强

就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。

模块化：

分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。模块就像有多个USB插口的充电宝，可以和多部手机充电，接口可以随意插拔。复用性很强，可以独立管理。就像是独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架。

参考了bootstrap，组件就是功能单位（按钮，导航，下拉栏），模块就是功能组成的独立区域。

先攻略轮播图的实现：

自动轮播图

核心样式：

animation: name 5s ease-out infinite;

@keyframes name {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -父级宽度;
}
70%, 100% {
margin-left: -n倍父级宽度;
}

父级展示div，子级图片div（宽度为父级的宽度x n张图片），给图片设置宽度等同于展示div，float-left，就可以实现向左滑动效果。

还有一种是手动轮播图，暂时搁置，把页面一组件写完。

明天计划的事：

目前在实现bootstrap的栅格系统，栅格虽然会用，但是col的具体实现方法还没去研究透彻，打算明天自己写一个简单的栅格。

任务14在写的过程中，对于模块和组件的概念逐渐清晰，这两者之间也许不需要分的那么清（毕竟英文都是：module）。

组件组成模块，组件库，模块库也可以是一个东西，我觉得模块库就是把复杂的模块组件分类罢了。

遇到的问题和收获：

任务13回顾一下以前遇到的问题，重写的时候使用样式的思路不一样了，除了侧边栏没什么其他难点。就是对照模块库写html。

任务13-2的页面顶部想要根据视窗定位到顶部的话（position：fixed），会导致侧拉导航栏脱离文档流，无法覆盖全局，尝试把input单独拿出来放到header下，和顶部分开，确实还能覆盖，但是产生新的问题，无法推动顶部的图标了，尝试了几种解决办法，但是只要顶部还是处于脱离状态就无法把checked关联到图标，这个问题目前没能找出解决办法，暂时搁置。

看完了关于模块和组件的相关资料，纠结了一段时间，关于模块和组件之间的概念没搞清楚，虽然看了下bootstrap后就明白了。