zoukankan      html  css  js  c++  java
  • 《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 = 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,则提前终止循环。

    总结

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

  • 相关阅读:
    jQuery瀑布流绝对定位布局(二)(延迟AJAX加载图片)
    jQuery图片上传裁剪插件imgAreaSelect(分析四) 上传服务器端
    jQuery表格的排序,
    jQuery图片上传裁剪插件imgAreaSelect(分析二) 同步显示图像位置信息
    jQuery图片上传裁剪插件imgAreaSelect(分析三) 如何获得选择域的图像信息
    JS Get URL param
    Dictionary 比List占用更多的内存
    修改金蝶采购订单的默认采购方式
    sqlserver 数据库操作记录 实现
    用Python模拟键盘输入
  • 原文地址:https://www.cnblogs.com/grey-zhou/p/6126582.html
Copyright © 2011-2022 走看看