javascript设计模式与开发实践阅读笔记——迭代器模式

Posted 2020-08-21 出世Sunny

迭代器模式：指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

流行语言如Java、Ruby 等都已经有了内置的迭代器实现，许多浏览器也支持javascript的Array.prototype.forEach。

jQuery中的迭代器

1 $.each( [1, 2, 3], function( i, n ){
2 　　console.log( ‘当前下标为： ‘+ i );
3 　　console.log( ‘当前值为:‘ + n );
4 });

实现自己的迭代器

1 var each = function( ary, callback ){
2 　　for ( var i = 0, l = ary.length; i < l; i++ ){
3 　　　　callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给callback 函数
4 　　}
5 };
6 
7 each( [ 1, 2, 3 ], function( i, n ){
8 　　alert ( [ i, n ] );
9 });

内部迭代器和外部迭代器

·内部迭代器
我们刚刚编写的each函数属于内部迭代器，each函数的内部已经定义好了迭代规则，它完全接手整个迭代过程，外部只需要一次初始调用。
内部迭代器在调用的时候非常方便，外界不用关心迭代器内部的实现，但由于内部迭代器的迭代规则已经被提前规定，上面的each函数就无法同时迭代2个数组了。

在不改变each函数情况下，如果要比较两个数组是否完全一致就得这样写

 1 var compare = function( ary1, ary2 ){
 2     if ( ary1.length !== ary2.length ){
 3         throw new Error ( ‘ary1 和ary2 不相等‘ );
 4     }
 5     each( ary1, function( i, n ){
 6         if ( n !== ary2[ i ] ){
 7             throw new Error ( ‘ary1 和ary2 不相等‘ );
 8         }
 9     });
10     alert ( ‘ary1 和ary2 相等‘ );
11 };
12 
13 compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( ‘ary1 和ary2 不相等‘ );    

·外部迭代器

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

 1 var Iterator = function( obj ){
 2 　　var current = 0; //指代当前序号
 3 　　var next = function(){ //next方法，序号+1
 4 　　　　current += 1;
 5 　　};
 6 　　var isDone = function(){ //isDone方法，判断是否数组遍历结束
 7 　　　　return current >= obj.length;
 8 　　};
 9 　　var getCurrItem = function(){ //getCurrItem方法，获得当前序号的具体值
10 　　　　return obj[ current ];
11 　　};
12 　　return { //返回一个对象，利用闭包保存current的值
13 　　　　next: next,
14 　　　　isDone: isDone,
15 　　　　getCurrItem: getCurrItem
16 　　}
17 };
18 
19 var iterator_1 = Iterator( [ 1, 2, 3 ] ); //生成实例
20 var iterator_2 = Iterator( [ 1, 2, 3 ] );
21 
22 var compare = function( iterator1, iterator2 ){
23 　　while( !iterator1.isDone() && !iterator2.isDone() ){ //当两者都没有遍历结束时
24 　　　　if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){ //如果两者当前序号的值不等
25 　　　　　　throw new Error ( ‘iterator1 和iterator2 不相等‘ );
26 　　　　}
27 　　　　iterator1.next(); //序号增加
28 　　　　iterator2.next();
29 　　}
30 　　alert ( iterator1+‘和‘+iterator2+‘相等‘ );
31 }
32 
33 compare( iterator_1, iterator_2 ); // 输出：iterator_1 和iterator_2 相等

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

无论是内部迭代器还是外部迭代器，只要被迭代的聚合对象拥有length 属性而且可以用下标访问，那它就可以被迭代。
JavaScript中，for in语句可以用来迭代普通字面量对象的属性。jQuery中的$.each函数如下

 1 $.each = function( obj, callback ) {
 2 　　var value,
 3 　　　　i = 0,
 4 　　　　length = obj.length,
 5 　　　　isArray = isArraylike( obj );
 6 　　if ( isArray ) { // 迭代类数组
 7 　　　　for ( ; i < length; i++ ) {
 8 　　　　　　value = callback.call( obj[ i ], i, obj[ i ] );
 9 　　　　　　if ( value === false ) {
10 　　　　　　　　break;
11 　　　　　　}
12 　　　　}
13 　　} else {
14 　　　　for ( i in obj ) { // 迭代object 对象
15 　　　　　　value = callback.call( obj[ i ], i, obj[ i ] );
16 　　　　　　if ( value === false ) {
17 　　　　　　　　break;
18 　　　　　　}
19 　　　　}
20 　　}
21 　　return obj;
22 };

倒序迭代器

遍历时候反着来就可以了

中止迭代器

给个条件，让迭代器终止。
jQuery的each 函数里有这样一句：

1 if ( value === false ) {
2     break;
3 }

这句代码的意思是，约定如果回调函数的执行结果返回false，则提前终止循环。

总结

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