【组件模块化5】JS组件设计分析

js组件设计原则

a、高内聚低耦合
b、周期性迭代

a、高内聚低耦合

一个组件之内不要依赖任何其他组件，不要被其他组件所牵制，要把这个组件的内容封装在当前组件内。
比如说：点击优惠券要跳转到某个链接，这种跳法就不能把这种交互放到刚才所说的抽象列表组件内（指的是包含优惠券那一行按钮栏），因为要做到高内聚，详细的交互要封装这个组件本身，不要被这个组件所控制。

高内聚示例图

低耦合示意图

这个组件和上图的组件都是列表，无非一个是纵向，另外一个是横向的。
做到低耦合：把它们都抽象出一个js列表组件，抽象的组件不包括任何功能，这两个组件中间复用了一个抽象的列表组件，两个之间是没有任何关系的。

b、周期性迭代

所有的代码不可能一步到位，需要学习实践这么个磨合的过程，有个不固定的周期，反复迭代。

js组件设计方法

a、先整体后部分再颗粒化
b、尽可能的抽象

a、先整体后部分再颗粒化

列表示意图

先整体看：可以看成 1*8或者 2*4或者 4*2
后部分看：假设只有一个列表，实现两个部分的这种列表，配合css的换行，js上也就是借鉴了css的技巧
颗粒化看：通过整体抽象的大组件，真正实现这个模块时，继承了抽象的组件，再实例化它，也就是颗粒化，这就是业务上的完成。

b、尽可能的抽象

列表还能继续抽象成单个的item，item里面不放任何结构，因为单看这两个组件，上图标下文字，但是如果增加一个标签或者别的，这个组件就不能被继承和使用了，所以要尽可能的抽象，抽象到任何东西能用地步。