迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。迭代器模式是一种相对简单的模式,简单到很多时候都不认为它是一种设计模式。本文将详细介绍迭代器模式
迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuery 中的 $.each 函数,其中回调函数中的参数 i 为当前索引,n 为当前元素,代码如下:
- $.each( [1, 2, 3], function( i, n ){
- console.log( '当前下标为: '+ i );
- console.log( '当前值为:' + n );
- });
现在来自己实现一个 each 函数,each 函数接受 2 个参数,第一个为被循环的数组,第二个为循环中的每一步后将被触发的回调函数
- 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 不相等' );
【外部迭代器】
外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的灵活性,可以手工控制迭代的过程或者顺序
- 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++) {
- 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;
- }
- }
- }
- return obj;
- };
迭代器模式提供了循环访问一个聚合对象中每个元素的方法,但它没有规定以顺序、倒序还是中序来循环遍历聚合对象
下面实现一个倒序访问的迭代器
- 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 一样,提供一种跳出循环的方法。在 jQuery 的 each 函数里有这样一句:
- if (value === false) {
- break;
- }
这句代码的意思是,约定如果回调函数的执行结果返回 false,则提前终止循环。下面把之前的 each 函数改写一下:
- var each = function( ary, callback ){
- for ( var i = 0, l = ary.length; i < l; i++ ){
- if ( callback( i, ary[ 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 种可能的上传方式,但不知道目前正在使用的浏览器支持哪几种。把每种获取 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,提示迭代器继续往后面进行迭代
所以我们的迭代器只需进行下面这两步工作:1、提供一个可以被迭代的方法,使得 getActiveUploadObj,getFlashUploadObj 以及 getFlashUploadObj 依照优先级被循环迭代;2、如果正在被迭代的函数返回一个对象,则表示找到了正确的 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 上传,要做的仅仅是下面一些工作
- var getWebkitUploadObj = function() {
- //具体代码略
- };
- var getHtml5UploadObj = function() {
- //具体代码略
- };
依照优先级把它们添加进迭代器:
- var uploadObj = iteratorUploadObj(getActiveUploadObj, getWebkitUploadObj, getFlashUploadObj, getHtml5UploadObj, getFormUpladObj);
来源: http://www.cnblogs.com/xiaohuochai/p/8030802.html