欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS设计模式学习 - 迭代器模式

程序员文章站 2022-03-07 11:21:12
迭代器模式(Iterator)提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按照顺序访问其中的每个元素。目前,几乎所有流行的语言如 Java、Ruby 等都已经有了内置迭代器的实现,许多浏览器也支持 JavaScript 的 Array.prototype.forEach。jQuery 中的迭代器迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuer...

迭代器模式(Iterator)

提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。

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

目前,几乎所有流行的语言如 Java、Ruby 等都已经有了内置迭代器的实现,许多浏览器也支持 JavaScript 的 Array.prototype.forEach。

jQuery 中的迭代器

迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuery 中的$.each 函数,其中回调函数职工的参数 i 为当前索引,n 为当前元素,代码如下:

$.each([1, 2, 3], function(i, n) {
  console.log("当前下标为: " + i);
  console.log("当前值为: " + n);
});

实现自己的迭代器

现在我们来自己实现一个 each 函数,each 函数接受两个参数,第一个为被循环的数组,第二个为循环中的每一步后将被触发的回调函数:

var each = function(ary, callback) {
  for (var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]); // 把下标和元素当作参数传给callback函数
  }
};

each([1, 2, 3], function(i, n) {
  alert([i, n]);
});

内部迭代器和外部迭代器

迭代器可以分为内部迭代器和外部迭代器,它们有各自的适用场景。

内部迭代器

刚编写过的 each 属于内部迭代器,each 内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用。

内部迭代器在调用的时候非常方便,外界不用关心迭代器内部的实现,跟迭代器的交互也仅仅是一次初始调用,但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定好,上面的 each 函数就无法同时迭代 2 个数组了。

比如现在有个需求,要判断 2 个数组里元素的值是否完全相等,如果不改写 each 函数本身的代码,我们能够入手的地方似乎只剩下 each 的回调函数了,代码如下:

var compare = function(ary1, ary2) {
  if (ary1.length !== ary2.length) {
    throw new Error("ary1和ary2不相等");
  }
  each(ary1, function(i, n) {
    if (n !== ary2[i]) {
      throw new Error("ary1和ary2不相等");
    }
  });
  alert("ary1和ary2相等");
};

compare([1, 2, 3], [1, 2, 4]); // throw new Error("ary1和ary2不相等");

感谢 JavaScript 里可以把函数当作参数传递的特性,但是在其他语言中未必就能如此幸运。

在一些没有闭包的语言中,内部迭代器本身的实现也相当复杂。比如 C 语言中的内部迭代器是用函数指针来实现的,循环处理所需要的数据都要以参数的形式明确地从外面传递进去。

外部迭代器

外部迭代器必须显式地请求迭代下一个元素。

外部迭代器增加了一些调用的复杂度,但相对也增加了迭代器的灵活性,我们可以手工控制迭代的过程或者顺序。

下面代码来源于《*的程序世界》,原文是 Ruby,翻译为 JavaScript。

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 函数:

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相等

外部迭代器虽然调用方式相对复杂,但它的适用面更广,也能满足更多变的需求。内部迭代器和外部迭代器在实际生产中没有优劣之分,使用哪个需要视情况而定。

迭代类数组对象和字面量对象

迭代器模式不仅可以迭代数组,还可以迭代一些类数组的对象。比如 arguments、{“0”:‘a’,“1”:‘b’}等。通过上面的编码可以观察到,无论是内部迭代器还是外部迭代器,只要被迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。

在 JavaScript 中,for in 语句可以用来迭代普通字面量对象的属性。jQuery 中提供了$.each 函数来封装各种迭代行为:

$.each = function(obj, callback) {
  var value,
    i = 0,
    length = obj.length,
    isArray = isArraylike(obj);

  if (isArray) {
    for (; i < length; i++) {
      vallue = callback.call(obj[i], i, obj[i]);
      if (value === false) {
        break;
      }
    }
  } else {
    for (i in obj) {
      value = callback.call(obj[i], i, obj[i]);
      if (value === false) {
        break;
      }
    }
  }
  return obj;
};

倒序迭代器

由于 GoF 中对迭代器模式的定义非常松散,所以我们可以有多种多样的迭代器实现。总的来说,迭代器模式提供了循环访问一个聚合对象中每个元素的方法,但它没有规定我们可以顺序,倒序还是中序来循环遍历聚合对象。

下面实现一个倒序访问的迭代器:

var reverseEach = function(ary, callback) {
  for (var l = ary.length - 1; l >= 0; l--) {
    callback(l, ary[l]);
  }
};
reverseEach([0, 1, 2], function(i, n) {
  console.log(n); // 分别输出:2,1,0
});

中止迭代器

迭代器可以像普通的 for 循环中的 break 一样,提供一种跳出循环的方法。下面修改之前的 each 函数:

var each = function(ary, callback) {
  for (var i = 0, l = ary.length; i < l; i++) {
    if (callback(i, ary[i]) === false) {
      break;
    }
  }
};

each([1, 2, 3, 4, 5], function(i, n) {
  if (n > 3) {
    return false;
  }
  console.log(n); // 分别输出:1,2,3
});

迭代器模式的应用举例

如下代码,目的是根据不同的浏览器获取相应的上传组件对象:

var getUploadObj = function() {
  try {
    return new ActiveXObject("TXFTNActiveX.FTNUpload"); // IE上传控件
  } catch (e) {
    if (supportFlash()) {
      var str = '<object type="application/x-shockwave-falsh"></object>';
      return $(str).appendTo($("body"));
    } else {
      var str = '<input name="file" type="file"/>'; // 表单上传
      return $(str).appendTo($("body"));
    }
  }
};

在不同的浏览器环境下,选择的上传方式是不一样的。因为使用浏览器的上传控件进行上传速度快,可以暂停和续传,所以我们首先会优先使用控件上传。如果浏览器没有安装上传控件,则使用 Flash 上传,如果连 Flash 也没用,则使用原生表单上传。

以上代码为了得到一个 upload 对象,这个 getUploadObj 函数里充满了 try,catch 和 if 条件语句。缺点显而易见。第一是很难阅读,第二是严重违反开闭原则。在开发和调试过程中,我们需要来回切换不同的上传方式,每次改动都相当痛苦。如果之后我们要增加一些其他的上传方式,比如 HTML5 上传,这时候唯一的办法就是继续往 getUploadObj 函数里增加条件分支。

此时我们就可以使用迭代器来迭代这些上传方式,直到获取到一个可用的为止:

var getActiveUploadObj = function() {
  try {
    return new ActiveXObject("TXFTNActiveX.FTNUpload"); // IE上传控件
  } catch (e) {
    return false;
  }
};

var getFlashUploadObj = function() {
  if (supportFlash()) {
    var str = '<object type="application/x-shockwave-falsh"></object>';
    return $(str).appendTo($("body"));
  } else {
    return false;
  }
};

var getFormUploadObj = function() {
  var str = '<input name="file" type="file"/>'; // 表单上传
  return $(str).appendTo($("body"));
};

在 getActiveUploadObj()、getFlashUploadObj()、getFormUploadObj() 这 3 个函数中都有同一个约定:如果函数的 upload 对象可用,则返回对象,否则返回 false,提示继续向后迭代。

所以我们的迭代器只需要一下几步工作:

  • 提供一个可以被迭代的方法,使得 getActiveUploadObj()、getFlashUploadObj()、getFormUploadObj()按照优先级被循环迭代。
  • 如果正在被迭代的对象返回了一个对象,说明找到了正确的 upload 对象,反之如果返回 false,则继续迭代。

迭代器代码如下:

var iteratorUploadObj = function() {
  for (var i = 0, fn; (fn = arguments[i++]); ) {
    var uploadObj = fn();
    if (uploadObj !== false) {
      return uploadObj;
    }
  }
};

var uploadObj = iteratorUploadObj(
  getActiveUploadObj,
  getFlashUploadObj,
  getFormUploadObj
);

重构之后,我们可以看到,获取不同上传对象的方法被隔离在各自的函数中互不干扰,try、catch 和 if 分支不再纠缠在一起,使得我们可以很方便的维护和扩展代码。比如我们添加了 HTML5 上传方式。我们要做的仅仅是一下工作:

  • 增加 HTML5 上传对象的函数;
  • 按照优先级添加到迭代器中。

小结

迭代器模式是一种相对简单的模式,简单到我们很多人都不认为它是一种设计模式。目前绝大部分语言都内置了迭代器。

放在最后

如果您喜欢我的文章,拜托点赞收藏关注,博主会根据大家喜好来推出相关系列文章~

更多精彩内容也可以访问我的博客Aelous-BLog

本文地址:https://blog.csdn.net/Aelous_dp/article/details/107480836