JavaScript——从行为设计到组件框

从行为设计到组件框架 行为设计 行为设计即实现组件的各种功能，如动画，变换等。通常，一个良好的行为API应保证原子操作，职责单一，并且要满足灵活性。

解耦的用处 拆分代码之间的耦合，增强代码的可重用性，可升级性，可改性。

下面用月影老师的轮播图为例 JS Bin - Collaborative JavaScript Debugging (h5jun.com)

这其中的所有组件都较为紧密的耦合在一起，较难以区分每一个部件的作用是什么。

因此老师提出了解耦的概念 为了实现解耦又有插件化，模板化，抽象化三步

插件化，即将控制元素抽取成插件，插件和组件之间通过依赖注入的方式实现联系。

JS Bin - Collaborative JavaScript Debugging (h5jun.com)

通过了插件化之后，轮播图（slider）、控制器（pluginController）以及前进（pluginPrevious）和后退（pluginNext）得以从整体分开，实现分工合作，到此，代码的耦合性降低了，提高了代码的拓展性。

模板化，即再次修改代码，提高代码的可移植性，简化了使用难度。

image.png

JS Bin - Collaborative JavaScript Debugging (h5jun.com)

现在的HTML结构就十分的简单

之前：

现在： 抽象化，即从代码中抽象出来可以通用的组件模型。

image.png

JS Bin - Collaborative JavaScript Debugging (h5jun.com)

通过抽象化的组件模型，现在仅仅需要在创建的时候把图片路径作为参数输入构造方法即可完成创建：

const slider = new Slider('my-slider', {name: 'slide-list', data: ['p5.ssl.qhimg.com/t0119c74624…', 'p4.ssl.qhimg.com/t01adbe3351…', 'p2.ssl.qhimg.com/t01645cd5ba…', 'p4.ssl.qhimg.com/t01331ac159…'], cycle:3000}); 总结 组件设计的原则——封装性、正确性、拓展性和复用性 实现步骤：结构设计、展现效果、行为设计 三次重构 插件化 模板化 抽象化 改进：CSS模板化、父子组件的状态同步和消息通信等等