JS学习十九天----组合模式

组合模式

 

前言

我今天又看了一下我自己写的博客,排版咋能这么丑?还能再丑一点吗?!我看了看我同学的排版,那叫一个漂亮啊,我想起来了一句诗:排版写得好,老公回家早!这几天我在修改我的排版,如果大家有什么意见,欢迎来稿!谢谢.

 

 

正文

 

组合模式:把多个对象组成树状结构来表示局部与整体,使得用户可以一样的对待单个对象和对象的组合.

 

1.可以以相同的方法处理对象的集合与其中的特定子对象.组合对象与组合该对象的对象可实现同一批操作.对组合(Composite)对象执行的操作过程将向下传递到所有的组成对象,使得所有组成对象都会执行同样的操作.

 

2.可以将对象组织成树状结构,并且使整棵树可被遍历.所有组合对象都实现一个用来获取其子对象的方法,借助该方法可以隐藏实现的细节,阻止子对象,使子对象内部实现不形成依赖.

(说概念不是本屌的风格)

 

想想你每次去理发店理发的场景吧,貌似每次理发师都要忽悠你办卡!!我就被忽悠了好几次!!搞得我每次都不想听他们逼逼!!烦的想让他要死不活的!理发师无法和你说办了卡打折啊,而且他们还有分店,加盟店,总店,一张卡都可以用,这和组合模式的定义相似,组合模式定义:将对象组合成树形结构以表示”部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性.

就用办卡这个案例说吧,一张卡可以在总店,分店,加盟店里使用,这个属性结构的店面层次关系就明确了.

那么,总店消费和分店消费就是一样的道理,总店和分店对会员卡的使用也具有一致性(打的折是一样的).

别忘了,你理一次发,给你10个积分,100个积分就能免费理一次,,那么你在总店理发,不管是总店,分店,加盟店,对于你的会员卡都知道你又增加了10个积分,在总店增加了10个积分,所有点都知道了你增加了10个积分,积分通用知道吗?我想你应该明白我的意思了,我说的有点啰嗦,只是希望你明白.

 

JS中的组合模式案例

组合模式又叫部分-整体模式，它将所有对象组合成树形结构。使得用户只需要操作最上层的接口，就可以对所有成员做相同的操作。
一个再好不过的例子就是jquery对象，大家都知道1个jquery对象其实是一组对象集合。

在这样一个HTML页面中:

<div>
<span></span>
   	<span></span>
</div>
 

我们想取消所有节点上绑定的事件,需要这样写:

 

var allNodes = document.getElementsByTagName("*");
var len = allNodes.length;
while( len-- ){
  	allNodes.unbind("*");
}
 

再来个具体点的例子， 还是dev.qplus.com这个网站的即时验证表单。

注意到下面”修改资料”的按钮了吗?如果有人以一个field的验证没有通过,修改资料的按钮都将是灰色不可点的状态.这意味着我们重新填写表单内容后,都得去校验每个field,保证他们全部OK.

这样的代码不难实现

if ( nameField.validata() && idCard.validata() && email.validata() && phone.validata() ){
  	alert ( "验证OK" );
}

 

似乎我使用一个外观模式也能解决问题,但是问题是,我们并不能保证表单里field的数量,也许明天产品经理就让你删掉一个或者两个,或者增加一两个,那么这样的维护方法显然不合理.

更好的实现是有一个form.validata函数, 它负责把真正的validata操作分发给每个组合对象.
form.validata函数里面会依次遍历所有需要校验的field. 若有一个field校验未通过, form.validata都会返回false. 伪代码如下:

form.validata = function(){
  forEach( fields, function( index, field ){
    if ( field.validata() === false  ){
       return false;
    }
  })
  return true;
}
 

 

 

简单的说,组合模式是将一批子对象组织为树形结构,一条顶层的命令在操作数中所有的对象.提高了代码的模块化程度,对于动态的HTML界面具有很强的适用性.

 

小小的总结一下

是不是还是对组合模式一知半解,不明所以呢?没关系,其实呢,关于设计模式呢,代码啥的无所谓,不会就不会吧,也别记住实现代码,没啥用处,主要是记住理论,理解了就行