JavaScript设计模式与开发实践 迭代器模式

Posted Surahe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 ,提示迭代器继续往后面进行迭代。

 

以上是关于JavaScript设计模式与开发实践 迭代器模式的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript设计模式与开发实践---读书笔记 迭代器模式

JavaScript设计模式与开发实践

摘JavaScript设计模式与开发实践--单例模式

迭代器模式:理解与实践

迭代器模式:理解与实践

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件