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

Posted 2020-08-19 Surahe

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

　 一、内部迭代器和外部迭代器

　　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 ，提示迭代器继续往后面进行迭代。