bootstrap 时间范围组件_【第十四课】自己的CSS组件库

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learning by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

---

一、这次将要执行的任务

拆出属于自己的组件库

---

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能？

组件化：组件化就好像我们的 PC 组装机一样，整个机器（应用）由不同的部件组成，例如显示器、主板、内存、显卡、硬盘等等。而自己组装的 PC 有这么几个好处：随意更换部件不会影响整个机器运作；当机器出了问题也可以通过快速插拔的方式定位问题；如果PC显卡或者是内存不够用时（兼容问题）可以单独更换显卡或者升级内存。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案？

长期以后，我们受惠于开源世界，各种插件，组件，各种框架，不计其数的开发人员，帮助我们写代码。现在是时候让自己也试着成为其中一员，通过编写自己的组件库，可以更好理解CSS的应用。即使现在还不能写JS的部分，但也可以把学到的CSS先用起来

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成？

组件的本质就是一点：封装。

4.做这个任务设置了哪些具体步骤，为什么这么设计？

这个任务的步骤主要还是按开发步骤设计，又将设计组件的步骤着重提炼了出来，锻炼了设计组件的能力。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料？

对于页面需要高度自定义的时候，也许会发现普通的bootstrap等库根本没法用，而如果这个相对比较大型，又有团队协作时，才是自己开发组件的合适时机，不要为了开发而开发。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订？

目的：可以像组装机器一样组装页面。

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间？

任务做到这里，我们认为已经不会出现完全做不来的问题了，一切都是为了精益求精达到一个更高的职业标准。而这个任务可能需要15个小时左右就可以完成，也可以花费更多一点的时间来追求更完美的结果，但注意我们不可能一味追求完美更不可能仅仅通过一俩个任务就达到想象中的完美，更重要的是保持这样的心态在以后的工作中持续这样下去，一定会收获丰盛的回报。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，应该没什么特别困难的地方，希望所有人都能完成任务。

---

三、学习任务之前要先学会哪些知识点

1.为何要组件化

大部分项目都是起源于各种奇特的需求，而随着业务发展，项目必然会衍生出更多同质化的项目，很多项目在基础层有许多的相似之处，而如果缺乏管理，将会有大量重复代码。于是一套底层的基础样式库去支撑各种项目，提升可用性和一致性就变得非常有必要，也更好维护。

2.业务组件库

前端的组件库是百花齐放，现有的组件库已经非常强大。但是这些组件库的粒度是基于单个交互，而这些交互与产品之间还隔着业务场景。要解决组件与特定场景的关联依赖，就需要自行设计提供有效的业务组件库。

3.组件库设计思路

首先要保证各个组件的视觉风格和交互规范一致。具备足够的扩展性，对外提供控制权。因此主要考虑：

• 组件设计思路、需要解决的场景
• 组件代码规范
• 组件测试
• 组件维护

---

四、开始动手做吧

1.（环境搭建）配置本地nginx，本地启动服务器通过配置的域名访问新创建的页面（1小时） 
2.（知识学习）学习现成的组件库，理解构造方式 
3.（编码实战）设置项目的基础CSS重置和基础样式（1小时） 
4.（编码实战）设置全局的依赖样式，如变量、颜色、度量等（1小时） 
5.（编码实战）设置布局样式（4小时） 
6.（编码实战）拆出相应的组件块（5小时） 
7.（编码实战）组件快拆出模块（5小时） 
8.（编码实战）为组件模块等设置样式（5小时） 
9.（编码实战）将组件放到布局中来，组成整个页面（1小时） 
10.（编码实战）写完后反复检查优化代码（2小时） 
11.（环境搭建）上传到学员服务器（0.5小时） 
12.（代码调试）使用不同设备访问网址查看页面（0.5小时） 
13.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 
14.（思考答疑）写日报总结学到的知识点和难点是如何解决的，完成后提交审核（1小时） 
15.（JS前期准备）自行查看JS如何获取Dom属性的值，以及修改Dom属性值。如Input，DIV，Checkbox等（4小时） 

---

五、验收自己的成果

1.对自己要求有多高，这个任务就能完成得有多好

---

六、来做一次深度思考

1.为什么要做组件库？ 点击查看相关小课堂

---

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来