小课堂——上海分院

组件化的简单介绍

分享人:何岳

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是组件?

组件(Component)。它的核心意义在于代码复用。功能相对单一或者独立,在整个系统的代码层次上位于最底层,被其他代码所依赖。

什么是模块?

模块(Module)。它的核心意义在于分离职责。它的关注点在于功能划分。 例如: 视频通话、语音通话等功能就可以被分为不同的模块

为什么要做组件库?

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

组件化的意义

1.为前端提供了很好的分治策略,可以实现独立维护,可维护性强

2.组件具有独立性,组件之间可以自由组合

3.页面只不过是组件的容器,负责组合组件即可形成功能完整的界面

2.知识剖析

组件开发的原则

标准性

任何一个组件都应该遵守一套标准,可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合,而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示,肯定是要依赖不同组件之间的组合,嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体,可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能,仅包含自身的,与其它组件无关的逻辑,使其更加的容易理解,使其更加的容易理解,同时大大减少发生bug的几率。

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

http://www.w3cplus.com/preprocessor/architecture-sass-project.html

https://blog.csdn.net/chenchun91/article/details/53375041

8.更多讨论

讨论时间到,欢迎大家提问!

鸣谢

感谢大家观看

By 何岳