学习JavaScript设计模式之迭代器模式

深入JavaScript设计模式中的迭代器模式

你是否曾在编程过程中想要顺序访问某个聚合对象中的每个元素，同时希望保持该对象的内部结构不被外界干扰？那么，JavaScript中的迭代器模式将是你不可或缺的工具。

一、jQuery中的迭代器

在jQuery库中，我们经常使用$.each函数来遍历数组或对象。例如：

```javascript

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

console.log("当前下标为 " + i + "，当前元素为 " + n);

});

```

这里的$.each就是一个典型的迭代器，它让我们能够按顺序访问数组中的每个元素。

二、实现自己的迭代器

除了使用jQuery提供的迭代器，我们还可以自己实现迭代器。下面是一个简单的例子：

```javascript

var each = function(ary, callback) {

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

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

}

};

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

console.log("当前下标为 " + i + "，当前元素为 " + n);

});

```

这个自定义的each函数就是一个内部迭代器，它完全接手整个迭代过程。注意它和Array.prototype.forEach的参数有所不同。

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

（1）内部迭代器：已经定义好了迭代规则，它完全接手整个迭代过程。我们上述自定义的each函数就是一个内部迭代器的例子。

（2）外部迭代器：需要显示地请求迭代下一个元素。这种情况下，外部代码有更多的控制权，可以决定何时开始迭代，何时结束迭代，以及何时请求下一个元素。但实现外部迭代器的代码相对复杂一些，需要根据具体需求来定制。

数组比较示例

示例一：内部迭代器

在JavaScript中，我们可以通过内部迭代的方式比较两个数组是否相等。如下：

```javascript

// 内部迭代器实现

var each = function(ary, callback) {

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

callback.call(ary[i], i, ary[i]); // 调用回调函数，并传入当前元素及其索引

}

};

// 比较函数

var compareArrays = function(ary1, ary2) {

if (ary1.length !== ary2.length) {

console.log("数组长度不等，不相等");

return; // 如果数组长度不等，直接返回不相等

}

each(ary1, function(index, value) {

if (value !== ary2[index]) {

console.log("数组元素不匹配，不相等"); // 如果找到不匹配的元素，记录并返回不相等结果

return false; // 返回false以终止迭代并退出函数

}

});

console.log("数组相等"); // 如果所有元素都匹配，则输出相等结果

};

compareArrays([1, 2, 3], [1, 2, 4]); // 输出：数组不相等

```

示例二：外部迭代器与终止迭代器的应用

外部迭代器允许我们更加灵活地处理迭代过程。以下是一个外部迭代器的示例，并用于数组比较。我们还会终止迭代器的概念。

```javascript

// 外部迭代器实现

var Iterator = function(obj) {

var current = 0; // 当前索引位置

var next = function() { // 移动到下一个元素的方法

current++; // 更新索引位置到下一个元素处。如果超出数组长度，则不再更新。可以视作向前一步的推进动作。 ）; return current >= obj.length ? null : obj[current]; // 判断是否还有下一个元素，如果有则返回当前元素的值，否则返回null结束迭代。 }; var isDone = function() { // 判断是否已到达数组末尾 return current >= obj.length; }; var getCurrentItem = function() { return obj[current]; }; return { next: next, isDone: isDone, getCurrentItem: getCurrentItem }; }; // 比较函数 var compareIterators = function(iterator1, iterator2) { while (!iterator1.isDone() && !iterator2.isDone()) { if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) { console.log("数组元素不匹配，不相等"); return false; } iterator1.next(); iterator2.next(); } console.log("数组相等"); }; compareArrays(new Iterator([1, 2, 3]), new Iterator([1, 2, 4])); // 输出：数组不相等 ``` 终止迭代器的应用 在某些情况下，我们可能希望在满足特定条件时提前终止迭代过程。以下是一个终止迭代器的简单示例： ```javascript var each = function(ary, callback) { var i = 0; while (i < ary.length) { if (callback(ary[i], i) === false) break; i++; } }; each([1, 2, 4, 1], function(n, index) { if (n > 3) return false; console.log(n); }); ``` 在实际应用中，终止迭代器可用于文件上传等场景。根据不同的浏览器获取相应的上传组件对象时，可以使用终止迭代器来提前结束某些操作或处理特定条件。例如，当文件大小超过限制时，我们可以提前结束上传进程并进行相应的错误处理。应用落地：文件上传 在实际的文件上传应用中，我们可以使用终止迭代器来检测文件大小、类型等条件。根据不同的浏览器获取相应的上传组件对象后，进行必要的验证和处理操作。如果文件满足上传要求，则继续后续处理；否则，提前终止上传过程并提示用户相应错误信息。这种方式有助于提高用户体验和应用程序的效率。《JavaScript设计模式——责任链模式与上传对象构建》

在Web开发中，上传功能是非常核心的一部分。为了适配不同的浏览器和环境，我们经常需要准备多种上传方案。在JavaScript中，我们可以通过责任链模式来优雅地处理这个问题。

设想我们有一个`iteratorUploadObj`函数，它接收一系列函数作为参数，依次执行这些函数，并返回第一个非false的返回值。这样，我们可以将不同的上传对象创建函数传递给这个函数，第一个能成功创建上传对象的函数将会被选用。

例如：

```javascript

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

```

在这个例子中，`getActiveUploadObj`尝试创建一个针对IE浏览器的上传控件，`getFlashUploadObj`尝试创建一个Flash上传对象，而`getFormUploadObj`则创建一个基于HTML表单的上传对象。

接下来，让我们看看这些函数的实现：

`getActiveUploadObj`尝试使用ActiveX创建一个IE专用的上传控件。如果失败，则返回false。

`getFlashUploadObj`检查是否支持Flash，并创建一个Flash对象。

`getFormUploadObj`创建一个简单的HTML文件上传输入元素。

我们还看到了一个`supportFlash`函数，它检查当前环境是否支持Flash，并返回其版本信息。这个函数考虑了不同的浏览器和环境，包括IE和基于标准的浏览器。

责任链模式在这里的应用非常巧妙。我们不必关心哪个上传方案会被选用，只需将各种方案的创建函数传递给`iteratorUploadObj`，让这个函数去处理兼容性问题。这种模式的优点在于，它使得代码更加模块化，易于维护，同时提高了代码的兼容性和可扩展性。

本文通过责任链模式展示了如何在JavaScript中处理上传功能的多种方案。希望本文所述对大家学习javascript程序设计有所帮助。我们也期待读者能够在实际项目中应用这些技术，提高代码的质量和用户体验。

通过`cambrian.render('body')`将本文的内容呈现给读者，希望读者能够从中受益，并在实践中不断提升自己的技能。