TAT.svenzeng 【Javascript设计模式13】-组合模式
In Web开发 on 2012年10月24日 by view: 8,400
7

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


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

但既然用了jquery,就肯定不会再做这么搓的事情。我们只需要$( ‘body’ ).unbind( ‘*’ );
当每个元素都实现unbind接口, 那么只需调用最上层对象$( ‘body’ )的unbind, 便可自动迭代并调用所有组合元素的unbind方法.
再来个具体点的例子, 还是dev.qplus.com这个网站的即时验证表单。

注意下面那个修改资料的按钮,如果有任意一个field的验证没有通过,修改资料的按钮都将是灰色不可点的状态。 这意味着我们重新填写了表单内容后, 都得去校验每个field, 保证它们全部OK.
这代码不难实现.

似乎我们用一个外观模式也能勉强解决这里条件分支堆砌的问题,但真正的问题是,我们并不能保证表单里field的数量,也许明天产品经理就让你删掉一个或者增加两个.那么这样的维护方式显然不能被接受.
更好的实现是有一个form.validata函数, 它负责把真正的validata操作分发给每个组合对象.
form.validata函数里面会依次遍历所有需要校验的field. 若有一个field校验未通过, form.validata都会返回false. 伪代码如下.

[目录]

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-combined-mode/

  1. 2016 年 4 月 24 日

    …..我并不觉得这是组合模式咯…..

  2. 【Javascript设计模式2】-简单工厂模式 | Tencent AlloyTeam 2012 年 10 月 25 日

    […] 组合模式 […]

  3. 【Javascript设计模式9】-策略模式 | Tencent AlloyTeam 2012 年 10 月 25 日

    […] 组合模式 […]

发表评论