JS常用的设计模式(13)——组合模式
组合模式又叫部分-整体模式,它将所有对象组合成树形结构。使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作。
一个再好不过的例子就是jquery对象,大家都知道1个jquery对象其实是一组对象集合。比如在这样一个HTML页面
<div> <span></span> <span></span> </div>
我们想取消所有节点上绑定的事件, 需要这样写
var allNodes = document.getElementsByTagName("*"); var len = allNodes.length; while( len-- ){ allNodes.unbind("*"); }
但既然用了jquery,就肯定不会再做这么搓的事情。我们只需要$( ‘body’ ).unbind( ‘*’ );
当每个元素都实现unbind接口, 那么只需调用最上层对象$( ‘body’ )的unbind, 便可自动迭代并调用所有组合元素的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; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。