JavaScript设计模式与开发实践学习--迭代器模式

迭代器模式

实现一个自己的迭代器

现在实现一个each函数 each函数接受2个参数 第一个为被循环的数组 第二个为循环中的每一步后将触发的回调函数

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

内部迭代器和外部迭代器

内部迭代器

刚刚我们编写的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不相等')

外部迭代器

外部迭代器增加了调用复杂度 但也增强了迭代器的灵活性 我们可以手动控制整个迭代的过程或者循序

var Iterator = function (obj) {
	var current = 0
	var next = function(){
		current += 1
	}
	var isDone = function(){
		return current >= obj.length
	}
	var getCurrent = 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()){
			thorw 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++){//迭代类数组
					value = callback.call(obj[i], i,obj[i])
					if(value === false){
						break
					}
				}
			}else{
				for(i in obj){//迭代object对象
					value = callback.call(obj[i], i, obj[i])
					if(value === false){
							break
					}
				}
			}
}

倒叙迭代器

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一样 提供一种跳出循环的方法

var each = function(ary, callback){
	for(var i = 0 ; l = ary.length; i < l ; i++){
		if(callback(i, ayr[i]) === false){// callback的执行结果返回false 提前终止迭代
			break
		}
	}
}
each([1, 2, 3, 4, 5], function(i, n){
	if(n > 3){ //n 大于3的时候终止循环
		return false
	}
	console.log(n) //分别输出1, 2, 3
})

迭代器模式的应用举例

对于如下代码

var getUploadObj = function(){ 
 try{ 
 		return new ActiveXObject("TXFTNActiveX.FTNUpload"); // IE 上传控件
 }catch(e){ 
 		if ( supportFlash() ){ // supportFlash 函数未提供
 			var str = ''; 
 			return $( str ).appendTo( $('body') ); 
 		}else{ 
 			var str = ''; // 表单上传
			return $( str ).appendTo( $('body') );
 		}
 	}
}

在不同的浏览器环境下，选择的上传方式是不一样的。因为使用浏览器的上传控件进行上传速度快，可以暂停和续传，所以我们首先会优先使用控件上传。如果浏览器没有安装上传控件，则使用 Flash 上传， 如果连 Flash 也没安装，那就只好使用浏览器原生的表单上传了。看看上面的代码，为了得到一个 upload 对象，这个 getUploadObj 函数里面充斥了 try，catch以及 if 条件分支。缺点是显而易见的。第一是很难阅读，第二是严重违反开闭原则。 在开发和调试过程中，我们需要来回切换不同的上传方式，每次改动都相当痛苦。后来我们还增加支持了一些另外的上传方式，比如，HTML5 上传，这时候唯一的办法是继续往 getUploadObj 函数里增加条件分支。
现在来梳理一下问题，目前一共有 3 种可能的上传方式，我们不知道目前正在使用的浏览器支持哪几种。就好比我们有一个钥匙串，其中共有 3 把钥匙，我们想打开一扇门但是不知道该使用哪把钥匙，于是从第一把钥匙开始，迭代钥匙串进行尝试，直到找到了正确的钥匙为止。 同样，我们把每种获取 upload 对象的方法都封装在各自的函数里，然后使用一个迭代器，迭代获取这些 upload 对象，直到获取到一个可用的为止：

var getActiveUploadObj = function(){ 
 try{ 
 return new ActiveXObject( "TXFTNActiveX.FTNUpload" ); // IE 上传控件
 }catch(e){ 
 return false; 
 } 
}; 
var getFlashUploadObj = function(){ 
 if ( supportFlash() ){ // supportFlash 函数未提供
 var str = ''; 
 return $( str ).appendTo( $('body') ); 
 } 
 return false; 
}; 
var getFormUpladObj = function(){ 
 var str = ''; // 表单上传
 return $( str ).appendTo( $('body') ); 
};

在 getActiveUploadObj、getFlashUploadObj、getFormUpladObj 这 3 个函数中都有同一个约定：如果该函数里面的 upload 对象是可用的，则让函数返回该对象，反之返回 false，提示迭代器继续往后面进行迭代。所以我们的迭代器只需进行下面这几步工作。

提供一个可以被迭代的方法，使得 getActiveUploadObj，getFlashUploadObj 以及 getFlashUploadObj依照优先级被循环迭代。
如果正在被迭代的函数返回一个对象，则表示找到了正确的 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, getFormUpladObj );

重构代码之后，我们可以看到，获取不同上传对象的方法被隔离在各自的函数里互不干扰，try、catch 和 if 分支不再纠缠在一起，使得我们可以很方便地的维护和扩展代码。比如，后来我们又给上传项目增加了 Webkit 控件上传和 HTML5 上传，我们要做的仅仅是下面一些工作。
增加分别获取 Webkit 控件上传对象和 HTML5 上传对象的函数：

var getWebkitUploadObj = function(){ 
 // 具体代码略
}; 
var getHtml5UploadObj = function(){ 
 // 具体代码略
}; 

依照优先级把它们添加进迭代器：

var uploadObj = iteratorUploadObj( getActiveUploadObj, getWebkitUploadObj, 
 getFlashUploadObj, getHtml5UploadObj, getFormUpladObj );