迭代器模式的定义
迭代器模式(Iterator)：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。
迭代器模式是一种相对简单的模式，目前的绝大部分语言都内置了迭代器，如js里的map,forEach等
内部迭代器的实现
内部迭代器在调用的时候非常方便，外界不关心迭代器内部的实现，只做初始调用，但是由于内部迭代器的迭代规则已经被提前规定，所以无法扩展需求。
let each = function (arr,callback) { for(let i in arr){ callback.call(arr[i],i,arr[i]); } }; each([1,2,3],function (i,n) { console.log(i,n); });
现有需求，判断两个数组里的元素是否完全相等：
/** * 判断两个数组的元素是否完全相等 */ let compare = function (arr1,arr2) { if(arr1.length!==arr2.length){ throw new Error('arr1 和 arr2不相等'); } each(arr1,function (i,n) { if(n!==arr2[i]){ throw new Error('arr1 和 arr2不相等'); } }); console.log('arr1 和 arr2相等'); }; compare([1,2,3],[1,2,4]); // throw new Error('arr1 和 arr2不相等');
外部迭代器的实现
外部迭代器必须显式的请求迭代下一个元素，增强了迭代器的灵活性，使得我们可以控制迭代的过程和顺序，但是相对的也增加了一些调用的复杂度。
/** * 外部迭代器的实现 */ class Iterator { constructor(obj) { this.obj = obj; this.current = 0; } next() { this.current += 1; } isDone() { return this.current >= this.obj.length; } getCurrentItem() { return this.obj[this.current]; } }
现在改写compare函数：
let compareIsEqual = function (iterator1, iterator2) { if (iterator1.length !== iterator2.length) { console.log('iterator1和iterator2不相等'); } while (!iterator1.isDone() && !iterator2.isDone()) { if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) { console.log('iterator1和iterator2不相等'); } iterator1.next(); iterator2.next(); } console.log('iterator1和iterator2相等'); }; let iterator1 = new Iterator([1, 2, 3]); let iterator2 = new Iterator([1, 2, 3]); compareIsEqual(iterator1, iterator2); //iterator1和iterator2相等
项目实战范例——文件上传
不同的浏览器环境下，选择的上传方式不一样
- 浏览器的上传控件进行上传速度快，可以暂停和续传，所以我们首先会优先使用控件上传
- 如果浏览器没有安装上传控件， 则使用 Flash 上传
- 如果连 Flash 也没安装，那就只好使用浏览器原生的表单上传了
目前一共有 3 种可能的上传方式，我们不知道目前浏览器支持那种上传方式，那就需要逐个尝试，直到成功为止，分别定义以下几个函数：
// IE 上传控件 var getActiveUploadObj = function() { try { return new ActiveXObject("TXFTNActiveX.FTNUpload"); } catch (e) { return false; } }; // Flash 上传 var getFlashUploadObj = function() { if (supportFlash()) { // 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')); };
在以上三个函数中，如果该函数里面的 upload 对象是可用的，则让函数返回该对象，反之返回 false，提示迭代器继续往后面进行迭代。
var iteratorUpload = function() { for (var i = 0, fn; fn = arguments[i++];) { var upload = fn(); if (upload !== false) { return upload; } } }; var uploadObj = iteratorUpload( getActiveUploadObj, getFlashUploadObj, getFormUpladObj )
上传对象的各个函数彼此分离互补干扰，很方便维护和扩展，如果后期增加了 Webkit 控件上传和 HTML5 上传，我们就增加对应的函数功能并在迭代器里添加：
var getWebkitUploadObj = function(){ // 具体代码略 } var getHtml5UploadObj = function(){ // 具体代码略 } // 依照优先级把它们添加进迭代器 var uploadObj = iteratorUploadObj( getActiveUploadObj, getWebkitUploadObj, getFlashUploadObj, getHtml5UploadObj, getFormUploadObj );
更多设计模式详见——js设计模式【详解】总目录
https://blog.csdn.net/weixin_41192489/article/details/116154815
