转载请注明预见才能遇见的博客&＃xff1a;http://my.csdn.net/

原文地址&＃xff1a;https://blog.csdn.net/pcaxb/article/details/100516574

Javascript设计模式系列—模式篇&＃xff08;四&＃xff09;迭代器模式

目录

Javascript设计模式系列—模式篇&＃xff08;四&＃xff09;迭代器模式

1.1 jQuery 中的迭代器

1.2 实现自己的迭代器

1.3 内部迭代器和外部迭代器

1. 内部迭代器

2. 外部迭代器

1.4 迭代类数组对象和字面量对象

1.5 倒序迭代器

1.6 中止迭代器

1.7 迭代器模式的应用举例

1.8 小结

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素&＃xff0c;而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来&＃xff0c;在使用迭代器模式之后&＃xff0c;即使不关心对象的内部构造&＃xff0c;也可以按顺序访问其中的每个元素。

1.1 jQuery 中的迭代器

//回调函数中的参数 i 为当前索引&＃xff0c; n 为当前元素
$.each( [1, 2, 3], function( i, n ){console.log( &＃39;当前下标为&＃xff1a; &＃39;&＃43; i );console.log( &＃39;当前值为:&＃39; &＃43; n );
});

1.2 实现自己的迭代器

var each &＃61; function( ary, callback ){for ( var i &＃61; 0, l &＃61; ary.length; i };function testCase(){var users &＃61; [{name:"aa",age:10},{name:"bb",age:14},{name:"bb",age:18},]each( users, function( i, n ){console.log(this);console.log ( [ i, n ] );});
}

1.3 内部迭代器和外部迭代器

1. 内部迭代器

我们刚刚编写的 each 函数属于内部迭代器&＃xff0c; each 函数的内部已经定义好了迭代规则&＃xff0c;它完全接手整个迭代过程&＃xff0c;外部只需要一次初始调用。

内部迭代器在调用的时候非常方便&＃xff0c;外界不用关心迭代器内部的实现&＃xff0c;跟迭代器的交互也仅仅是一次初始调用&＃xff0c;但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定&＃xff0c;上面的 each 函数就无法同时迭代 2个数组了。

比如现在有个需求&＃xff0c;要判断 2个数组里元素的值是否完全相等&＃xff0c; 如果不改写 each 函数本身的代码&＃xff0c;我们能够入手的地方似乎只剩下 each 的回调函数了&＃xff0c;代码如下&＃xff1a;&＃xff08;compare 函数一点都算不上好看&＃xff09;

var compare &＃61; function( ary1, ary2 ){if ( ary1.length !&＃61;&＃61; ary2.length ){throw new Error ( &＃39;ary1 和ary2 不相等&＃39; );}each( ary1, function( i, n ){if ( n !&＃61;&＃61; ary2[ i ] ){throw new Error ( &＃39;ary1 和ary2 不相等&＃39; );}});alert ( &＃39;ary1 和ary2 相等&＃39; );
};
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( &＃39;ary1 和ary2 不相等&＃39; );


在一些没有闭包的语言中&＃xff0c;内部迭代器本身的实现也相当复杂。比如 C语言中的内部迭代器是用函数指针来实现的&＃xff0c;循环处理所需要的数据都要以参数的形式明确地从外面传递进去。

2. 外部迭代器

外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度&＃xff0c;但相对也增强了迭代器的灵活性&＃xff0c;我们可以手工控制迭代的过程或者顺序。

var Iterator &＃61; function( obj ){var current &＃61; 0;var next &＃61; function(){current &＃43;&＃61; 1;};var isDone &＃61; function(){return current >&＃61; obj.length;};var getCurrItem &＃61; function(){return obj[ current ];};return {next: next,isDone: isDone,getCurrItem: getCurrItem}
};//再看看如何改写compare 函数&＃xff1a;
var compare &＃61; function( iterator1, iterator2 ){while( !iterator1.isDone() && !iterator2.isDone() ){if ( iterator1.getCurrItem() !&＃61;&＃61; iterator2.getCurrItem() ){throw new Error ( &＃39;iterator1 和iterator2 不相等&＃39; );}iterator1.next();iterator2.next();}alert ( &＃39;iterator1 和iterator2 相等&＃39; );
}
var iterator1 &＃61; Iterator( [ 1, 2, 3 ] );
var iterator2 &＃61; Iterator( [ 1, 2, 3 ] );
compare( iterator1, iterator2 ); // 输出&＃xff1a;iterator1 和iterator2 相等


外部迭代器虽然调用方式相对复杂&＃xff0c;但它的适用面更广&＃xff0c;也能满足更多变的需求。内部迭代器和外部迭代器在实际生产中没有优劣之分&＃xff0c;究竟使用哪个要根据需求场景而定。

1.4 迭代类数组对象和字面量对象

迭代器模式不仅可以迭代数组&＃xff0c;还可以迭代一些类数组的对象。比如 arguments 、{"0":&＃39;a&＃39;,"1":&＃39;b&＃39;} 等。 通过上面的代码可以观察到&＃xff0c;无论是内部迭代器还是外部迭代器&＃xff0c;只要被迭代的聚合对象拥有 length 属性而且可以用下标访问&＃xff0c;那它就可以被迭代。在 Javascript 中&＃xff0c; for in 语句可以用来迭代普通字面量对象的属性。jQuery 中提供了$.each&＃96;函数来封装各种迭代行为&＃xff1a;

$.each &＃61; function( obj, callback ) {var value,i &＃61; 0,length &＃61; obj.length,isArray &＃61; isArraylike( obj );if ( isArray ) { // 迭代类数组for ( ; i };

1.5 倒序迭代器

 迭代器模式提供了循环访问一个聚合对象中每个元素的方法&＃xff0c;但它没有规定我们以顺序、倒序还是中序来循环遍历聚合对象。

var reverseEach &＃61; function( ary, callback ){for ( var l &＃61; ary.length - 1; l >&＃61; 0; l-- ){callback( l, ary[ l ] );}
};reverseEach( [ 0, 1, 2 ], function( i, n ){console.log( n ); // 分别输出&＃xff1a;2, 1 ,0
});

1.6 中止迭代器

迭代器可以像普通 for 循环中的 break 一样&＃xff0c;提供一种跳出循环的方法。在 1.4节 jQuery的each 函数里有这样一句&＃xff1a;

if ( value &＃61;&＃61;&＃61; false ) {break;
}

如果回调函数的执行结果返回 false &＃xff0c;则提前终止循环。下面我们把之前的 each 函数改写一下&＃xff1a;

var each &＃61; function( ary, callback ){for ( var i &＃61; 0, l &＃61; ary.length; i };each( [ 1, 2, 3, 4, 5 ], function( i, n ){if ( n > 3 ){ // n 大于3 的时候终止循环return false;}console.log( n ); // 分别输出&＃xff1a;1, 2, 3
});

1.7 迭代器模式的应用举例

根据不同的浏览器获取相应的上传组件对象&＃xff1a;&＃xff08;第一是很难阅读&＃xff0c;第二是严重违反开闭原则&＃xff09;

var getUploadObj &＃61; function(){try{return new ActiveXObject("TXFTNActiveX.FTNUpload"); // IE 上传控件}catch(e){if ( supportFlash() ){ // supportFlash 函数未提供var str &＃61; &＃39;&＃39;;return $( str ).appendTo( $(&＃39;body&＃39;) );}else{var str &＃61; &＃39;&＃39;; // 表单上传return $( str ).appendTo( $(&＃39;body&＃39;) );}}
};

在不同的浏览器环境下&＃xff0c;选择的上传方式是不一样的。因为使用浏览器的上传控件进行上传速度快&＃xff0c;可以暂停和续传&＃xff0c;所以我们首先会优先使用控件上传。如果浏览器没有安装上传控件&＃xff0c;则使用 Flash上传&＃xff0c; 如果连 Flash也没安装&＃xff0c;那就只好使用浏览器原生的表单上传了。

把每种获取 upload 对象的方法都封装在各自的函数里&＃xff0c;然后使用一个迭代器&＃xff0c;迭代获取这些 upload 对象&＃xff0c;直到获取到一个可用的为止&＃xff1a;

var getActiveUploadObj &＃61; function(){try{return new ActiveXObject( "TXFTNActiveX.FTNUpload" ); // IE 上传控件}catch(e){return false;}
};var getFlashUploadObj &＃61; function(){if ( supportFlash() ){ // supportFlash 函数未提供var str &＃61; &＃39;&＃39;;return $( str ).appendTo( $(&＃39;body&＃39;) );}return false;
};var getFormUpladObj &＃61; function(){var str &＃61; &＃39;&＃39;; // 表单上传return $( str ).appendTo( $(&＃39;body&＃39;) );
};

在 getActiveUploadObj 、 getFlashUploadObj 、 getFormUpladObj 这 3个函数中都有同一个约定&＃xff1a;如果该函数里面的 upload 对象是可用的&＃xff0c;则让函数返回该对象&＃xff0c;反之返回 false &＃xff0c;提示迭代器继续往后面进行迭代。

迭代器代码如下&＃xff1a;

var iteratorUploadObj &＃61; function(){for ( var i &＃61; 0, fn; fn &＃61; arguments[ i&＃43;&＃43; ]; ){var uploadObj &＃61; fn();if ( uploadObj !&＃61;&＃61; false ){return uploadObj;}}
};
var uploadObj &＃61; iteratorUploadObj( getActiveUploadObj, getFlashUploadObj, getFormUpladObj );


重构代码之后&＃xff0c;我们可以看到&＃xff0c;获取不同上传对象的方法被隔离在各自的函数里互不干扰&＃xff0c;try 、 catch 和 if 分支不再纠缠在一起&＃xff0c;使得我们可以很方便地的维护和扩展代码。比如&＃xff0c;后来我们又给上传项目增加了 Webkit控件上传和 HTML5上传&＃xff0c;我们要做的仅仅是下面一些工作。

增加分别获取 Webkit控件上传对象和 HTML5上传对象的函数&＃xff1a;  依照优先级把它们添加进迭代器&＃xff1a;

var getWebkitUploadObj &＃61; function(){// 具体代码略
};
var getHtml5UploadObj &＃61; function(){// 具体代码略
};
var uploadObj &＃61; iteratorUploadObj( getActiveUploadObj, getWebkitUploadObj,getFlashUploadObj, getHtml5UploadObj, getFormUpladObj );

1.8 小结

迭代器模式是一种相对简单的模式&＃xff0c;简单到很多时候我们都不认为它是一种设计模式。目前的绝大部分语言都内置了迭代器。

Javascript设计模式系列—模式篇&＃xff08;四&＃xff09;迭代器模式

博客地址&＃xff1a;https://blog.csdn.net/pcaxb/article/details/100516574