发表于： 2019-03-26 22:28:21
0 620
今日完成：
今天时间都花在了整理小课堂资料上面，今天日报就用小课堂代替吧。晚上把任务三最后一个界面结尾。
标题：
为什么要做组件库？
开场语：
大家好，我是IT修真院深圳分院第16期的学员何潇，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网css（职业）任务14，深度思考中的知识点——为什么要做组件库？
（1）背景介绍：
是是一个含义很大的概念，一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。例如V8引擎是Chrome浏览器的一部分，负责运行javascript代码，这里V8引擎就可以视为一个组件。V8引擎同时也是Node.js的javascript解释器，这体现了组件的可复用性。
（2）知识剖析：
库(Library)：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；bootstrap、jQuery、react（React和react-router, react-redux结合起来才叫框架，本身只是充当一个前端渲染的库而已）、underscore就是库
框架(Framework)：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。angular、backbone、vue就属于框架
（3）常见问题：
如何构建组件库
（4）解决方案：
（1）先整体后部分再颗粒化
1.布局级别：先看大局（譬如移动端的布局，是怎么去布局，用这个布局去抽象出来几个模块）
2.页面级别：页面页面之间的关联关系，譬如页面之间有公共的样式，这个时候布局模块里面的某一个样式
3.功能级别：譬如很多页面都有这个按钮，但是按钮的文本以及功能是不一样的，这个时候可以站在一个大的角度去思考问题，写一个比较基 础的按钮，通过继承，重写等方式去实现不同的按钮，那么这个基础的按钮就是一个功能组件了
4.业务级别：譬如页面中返回按钮，这个按钮通过继承功能按钮，就可以变成一个业务组件了
从上面看的出来是通过大到小的一个思路去写这个样式的
（2）先抽象再具体
譬如很多页面，有很多的模块，但是某一个模块其实是不一样的，这个时候不要具体去看不同的，而是把这些都看成相同的东西，只不过隐藏，或者增加了某一些模块的东西，这就是就可以抽离出一个组件了，然后这个组件是通过继承，重写，配置等等，实现成具体的某一个模块，这就是先抽象再具体的原理了
（5）扩展思考：
1、组件的本质是什么？
封装
2、组件的核心意义是什么？
高内聚低耦合，提高可扩展性
3、组件有哪些作用？
解决资源整合问题、增强功能促进开发效率。提高可维护性，便于协同开发
（6）参考文献：
（7）更多讨论：
模块和组件经常混淆，今天介绍的是组件库，那什么是模块化呢，如果实现模块化呢？
（8）鸣谢：
感谢各位师兄，此教程是在他们之前技术分享的基础上完善而成。
（9）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
明日计划：
开始任务四，把这个系列的任务结束，进一步熟悉jquery。
返回列表
评论