JavaScript设计模式与开发实践 迭代器模式
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。
一、内部迭代器和外部迭代器
1. 内部迭代器
内部迭代器函数的内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用。
内部迭代器在调用的时候非常方便,外界不用关心迭代器内部的实现,跟迭代器的交互也仅仅是一次初始调用,但这也刚好是内部迭代器的缺点。
var each = function( ary, callback ){ for ( var i = 0, l = ary.length; i < l; i++ ){ callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给callback 函数 } }; var compare = function( iterator1, iterator2 ){ while( !iterator1.isDone() && !iterator2.isDone() ){ if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){ throw new Error ( 'iterator1 和iterator2 不相等' ); } iterator1.next(); iterator2.next(); } alert ( 'iterator1 和iterator2 相等' ); } var iterator1 = Iterator( [ 1, 2, 3 ] ); var iterator2 = Iterator( [ 1, 2, 3 ] ); compare( iterator1, iterator2 ); // 输出:iterator1 和iterator2 相等
2. 外部迭代器
外部迭代器必须显式地请求迭代下一个元素。
外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的灵活性,我们可以手工控制迭代的过程或者顺序。
//外部迭代器 var Iterator = function( obj ){ var current = 0; var next = function(){ current += 1; }; var isDone = function(){ return current >= obj.length; }; var getCurrItem = function(){ return obj[ current ]; }; return { next: next, isDone: isDone, getCurrItem: getCurrItem } }; //比较数组是否相同 var compare = function( iterator1, iterator2 ){ while( !iterator1.isDone() && !iterator2.isDone() ){ if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){ throw new Error ( 'iterator1 和iterator2 不相等' ); } iterator1.next(); iterator2.next(); } alert ( 'iterator1 和iterator2 相等' ); } var iterator1 = Iterator( [ 1, 2, 3 ] ); var iterator2 = Iterator( [ 1, 2, 3 ] ); compare( iterator1, iterator2 ); // 输出:iterator1 和iterator2 相等
二、迭代类数组对象和字面量对象
无论是内部迭代器还是外部迭代器,只要被迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。如数组、对象、arguments。
三、迭代器模式的应用举例
下面的方法是根据不同的浏览器获取相应的上传组件对象,因为使用浏览器的上传控件进行上传速度快,可以暂停和续传,所以我们首先会优先使用控件上传。如果浏览器没有安装上传控件,则使用 Flash 上传,如果连 Flash 也没安装,那就只好使用浏览器原生的表单上传了。
var getUploadObj = function(){ try{ // IE 上传控件 return new ActiveXObject("TXFTNActiveX.FTNUpload"); }catch(e){ if ( supportFlash() ){ // supportFlash 函数未提供 var str = '<object type="application/x-shockwave-flash"></object>'; return $( str ).appendTo( $('body') ); }else{ // 表单上传 var str = '<input name="file" type="file"/>'; return $( str ).appendTo( $('body') ); } } };
getUploadObj 函数里面充斥了 try,catch以及 if 条件分支。缺点是显而易见的。第一是很难阅读,第二是严重违反开闭原则。 在开发和调试过程中,我们需要来回切换不同的上传方式,每次改动都相当痛苦。后来我们还增加支持了一些另外的上传方式,比如,HTML5 上传,这时候唯一的办法是继续往 getUploadObj 函数里增加条件分支。
我们把每种获取 upload 对象的方法都封装在各自的函数里,然后使用一个迭代器,迭代获取这些 upload 对象,直到获取到一个可用的为止:
// IE 上传控件 var getActiveUploadObj = function(){ try{ return new ActiveXObject( "TXFTNActiveX.FTNUpload" ); }catch(e){ return false; } }; // supportFlash 函数未提供 var getFlashUploadObj = function(){ if ( supportFlash() ){ var str = '<object type="application/x-shockwave-flash"></object>'; return $( str ).appendTo( $('body') ); } return false; }; // 表单上传 var getFormUpladObj = function(){ var str = '<input name="file" type="file" class="ui-file"/>'; return $( str ).appendTo( $('body') ); }; //迭代器 var iteratorUploadObj = function(){ for ( var i = 0, fn; fn = arguments[ i++ ]; ){ var uploadObj = fn(); if ( uploadObj !== false ){ return uploadObj; } } }; var uploadObj = iteratorUploadObj( getActiveUploadObj, getFlashUploadObj, getFormUpladObj );
在 getActiveUploadObj 、 getFlashUploadObj 、 getFormUpladObj 这 3 个函数中都有同一个约定:如果该函数里面的 upload 对象是可用的,则让函数返回该对象,反之返回 false ,提示迭代器继续往后面进行迭代。