0%

迭代器模式


迭代器模式是指提供一种方法,顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心内部构造,也可以按顺序访问其中的每个元素。

jQuery中的迭代器

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

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

然而,作为一个合格的前端开发者,我们不应该只是会用,而更应该去研究他的实现,因此下面我们就来自己实现一个each函数

1
2
3
4
5
6
7
8
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函数本身的代码,就只能够增加一个compare函数然后对each的回调进行更改了。

1
2
3
4
5
6
7
8
9
10
11
12
13
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不相等');

代码看起来有点丑,所以要搬出外部迭代器。
外部迭代器必须显示地请求迭代下一个元素,他增加了一些调用的复杂度,但也相对的增加了迭代器的灵活性,我们可以手工控制迭代的过程或者顺序

我们根据这个思想稍微改写一下compare函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
}
};
var compare = function(iterator1 , iterator2) {
while (iterator1.isDone() && !iterator2.isDone()) {
if (iterator1.getCurrItem() !== iterator2.getCurrItem()) {
throw new Error('不相等');
}
iterator1.next();
iterator2.next();
}
alert('相等');
};
var iterator1 = Iterator( [1, 2, 3] );
var iterator2 = Iterator( [1, 2, 3] );
compare(iterator1 , iterator2); //相等

迭代类数组和字面量变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.each = function(obj, callback) {
var value,
i = 0,
lenght = obj.length,
isArray = isArraylike(obj);
if (isArray) { //迭代类数组
for(; i < length; i++) {
value = callback.call(obj[i], i, obj[i]);
if(value === false) {
break;
}
}
} else {
for (i in obj) { //迭代obj对象
value = callback.call(obj[i], i, obj[i]);
if (value === false) {
break;
}
}
}
return obj;
};

终止迭代器

上面的each函数里面我们有一句

1
2
3
if (value === false) {
break;
}

这里是如果回调函数的执行结果返回false,则提前终止循环,前面each函数的改写这里就不多阐述。

迭代器的应用举例

我们先看一种情况:不同的浏览器中上传文件的方式是不一样的,因为使用的浏览器上传控件进行上传进度快,可以暂停和续传,所以我们首先会优先使用控件上传。如果浏览器没有安装上传控件则用flash上传,如果flash也没安装那就只能用浏览器原生表单上传了。
通常我们会这么做:

1
2
3
4
5
6
7
8
9
10
11
12
13
var getUploadObj = function() {
try{
return new ActiveXObject('TXFTNActive.FTNUpload'); //IE上传控件
} catch(e) {
if (supportFlash()) { //supportFlash函数未提供
var str = '<object type = "application/x-shockwave-flash"></object>';
return $(str).appendTo($('body'));
} else { //表单上传
var str = '<input name = "file" type ="file" />';
return $(str).appendTo($('body'));
}
}
};

以上,为了得到一个upload对象,这里就充满了很多if条件分支,缺点显而易见。难以阅读,严重违反开闭原则,还有调试的时候我们需要来回切换不同的上传方式,每次改动都想当痛苦,如果要增加html5上传则又要添加分支…
这里我们可以把每种获取upload对象的方法都封装在各自的函数里,然后使用一个迭代器,迭代获取这些upload对象,直到获取到一个可用的为止。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var getActiveUploadObj = function() {
try{
return new ActiveXObject('TXFTNActive.FTNUpload'); //IE上传控件
} catch(e) {
return false;
}
};

var getFlashUploadObj = function() {
if (supportFlash()) { //supportFlash函数未提供
var str = '<object type = "application/x-shockwave-flash"></object>';
return $(str).appendTo($('body'));
}
return false;
};

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

接着我们的迭代器只需要进行下面几步工作:

  • 提供一个可以被迭代的方法,使getActiveUploadObj ,getFlashUploadObj ,getFormUploadObj 依照优先级被循环迭代。

  • 如果正在被迭代的函数返回一个对象,则表示找到了正确的upload对象,反之则让迭代器继续工作

1
2
3
4
5
6
7
8
9
10
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);

以后要加也就只需相应的调整参数顺序就好。

我知道是不会有人点的,但万一有人想不开呢?