js设计模式【详解】—— 迭代器模式

js设计模式【详解】—— 迭代器模式

目录

​​迭代器模式的定义​​

​​内部迭代器的实现​​

​​外部迭代器的实现​​

​​项目实战范例——文件上传​​

迭代器模式的定义

迭代器模式(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 = ''; return $(str).appendTo($('body')); }; return false;}// 表单上传var getFormUpladObj = function() { var str = ''; 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设计模式【详解】总目录​​​​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。