js组件设计原则
a、高内聚低耦合
b、周期性迭代
a、高内聚低耦合
一个组件之内不要依赖任何其他组件,不要被其他组件所牵制,要把这个组件的内容封装在当前组件内。
比如说:点击优惠券要跳转到某个链接,这种跳法就不能把这种交互放到刚才所说的抽象列表组件内(指的是包含优惠券那一行按钮栏),因为要做到高内聚,详细的交互要封装这个组件本身,不要被这个组件所控制。
这个组件和上图的组件都是列表,无非一个是纵向,另外一个是横向的。
做到低耦合:把它们都抽象出一个js列表组件,抽象的组件不包括任何功能,这两个组件中间复用了一个抽象的列表组件,两个之间是没有任何关系的。
b、周期性迭代
所有的代码不可能一步到位,需要学习实践这么个磨合的过程,有个不固定的周期,反复迭代。
js组件设计方法
a、先整体后部分再颗粒化
b、尽可能的抽象
a、先整体后部分再颗粒化
先整体看:可以看成
1*8
或者2*4
或者4*2
后部分看:假设只有一个列表,实现两个部分的这种列表,配合css的换行,js上也就是借鉴了css的技巧
颗粒化看:通过整体抽象的大组件,真正实现这个模块时,继承了抽象的组件,再实例化它,也就是颗粒化,这就是业务上的完成。
b、尽可能的抽象
列表还能继续抽象成单个的item,item里面不放任何结构,因为单看这两个组件,上图标下文字,但是如果增加一个标签或者别的,这个组件就不能被继承和使用了,所以要尽可能的抽象,抽象到任何东西能用地步。