JavaScript设计模式 - 迭代器模式

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

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

许多浏览器都支持 Javascript 的 Array.prototype.forEach

迭代器可以分为 内部迭代器 和 外部迭代器

一、jQuery 中的迭代器

 $.each( [1,2,3,4], function (i, n) {

     console.log( "当前下表为：" + i + " , 当前值为：" + n );

 });

二、自实现一个迭代器

 // 自己实现一个数组迭代器

 var each = function( arry, callback ){

     for( var i = 0, l = arry.length; i < l; i++){

         callback.call( arry[i], i, arry[ i ]);

     }

 };

 each([1,2,3,4], function (i, n) {

     console.log( i + " - " + n ); // 输出数组下标和值

 });

三、内部迭代器

　　上边的 each 函数属于内部迭代器， each 函数内部已经定义好了迭代原则，它完全接手整个迭代过程，外部只需要一次初始调用。
　　内部迭代器的优点也刚好是它的缺点 - 使用方便，迭代交互也仅仅是一次初始调用
　　示例: 在不改写 each 本身的代码前提，实现判断两个数组里元素的值是否完全相等

 //判断两个数组的值是否完全相等

 var compare = function( arry1, arry2){

     if( arry1.length !== arry2.length ){

         throw new Error( "arry1和arry2不相等" );

     }

     each( arry1, function( i, n ){

         if( n !== arry2[i] ){

             throw new Error("arry1和arry2不相等");

         }

     });

     console.log( "arry1和arry2相等" );

 };

 compare( [1,2,3,4], [1,2,3]);

 四、外部迭代器

　　外部迭代器必须显式地请求迭代下一个元素
　　外部迭代器增加了一些调用的复杂度，但相对的也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序
　　示例: 重写 compare

　　　　外部迭代器:

 // 外部迭代器

 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

     }

 }

　　　　改写 Compare

 // 改写 Compare

 var compare = function( iterator1, iterator2 ){

     while( iterator1.isDone() && iterator2.isDone() ){

         if( iterator1.getCurrItem() !== iterator2.getCurrItem() ){

             throw new Error( "iterator1 和 iterator2不相等" );

         }

         iterator1.next();

         iterator2.next();

     }

     console.log( "iterator1 和 iterator2相等" );

 };

 var iterator1 = Iterator( [1,2,3,4] );

 var iterator2 = Iterator( [1,2,3,4] );

 compare(iterator1,iterator2);

 五、中止迭代器
　　重写 each 函数实现中止迭代

 // 重写 each 函数实现中止迭代

 var each = function( arry, callback ){

     for( var i = 0, l = arry.length; i < l; i++ ){

         // callback 的执行结果返回false，提前中止迭代

         if( callback( i, arry[i] ) === false ){

             break;

         }

     }

 };

 each( [1,2,3,4,5], function ( i, n ) {

     if( n>3 ){ // n 大于3的时候中止循环

         return false;

     }

     console.log(n); // 输出 1 2 3

 });

 六、迭代器应用示例
　　目的：根据不同的浏览器获取相应的上传组件对象
　　　　
　　　　将不同的上传对象封装到各自的函数里; 如果函数可用，则返回该对象，否则返回false，提示迭代器继续

 // 将不同的上传对象封装到各自的函数里; 如果函数可用，则返回该对象，否则返回false，提示迭代器继续

 var getActiveUploadObj = function(){

     try{

         return new ActiceXObject( "TXFTNActiveX.FTNUpload" ); // IE 上传控件

     }catch(e){

         return false;

     }

 };

 var getFlashUploadObj = function(){

     if( supportFlash() ){

         var str = "<object type='application/x-shockwave-flash'></object>";

         return $( str).appendTo( $("body") );

     }

     return false;

 };

 var getFormUpl0adObj = function(){

     var str = "<input type='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, getFormUpl0adObj );

七、总结

迭代模式相对简单，简单到很多时候我们不认为它是一种设计模式

阅读参考书籍 - << JavaScript 设计模式与开发实践 >>

巴特西

JavaScript设计模式 - 迭代器模式

最新文章

热门文章