首页 > 代码库 > javascript设计模式与开发实践阅读笔记(7)——迭代器模式
javascript设计模式与开发实践阅读笔记(7)——迭代器模式
迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。
迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。
流行语言如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 =http://www.mamicode.com/ callback.call( obj[ i ], i, obj[ i ] ); 9 if ( value =http://www.mamicode.com/== false ) { 10 break; 11 } 12 } 13 } else { 14 for ( i in obj ) { // 迭代object 对象 15 value =http://www.mamicode.com/ callback.call( obj[ i ], i, obj[ i ] ); 16 if ( value =http://www.mamicode.com/== false ) { 17 break; 18 } 19 } 20 } 21 return obj; 22 };
倒序迭代器
遍历时候反着来就可以了
中止迭代器
给个条件,让迭代器终止。
jQuery的each 函数里有这样一句:
1 if ( value =http://www.mamicode.com/== false ) { 2 break; 3 }
这句代码的意思是,约定如果回调函数的执行结果返回false,则提前终止循环。
总结
迭代器模式是一种相对简单的模式,简单到很多时候我们都不认为它是一种设计模式。目前的绝大部分语言都内置了迭代器。
javascript设计模式与开发实践阅读笔记(7)——迭代器模式