Lernen Sie das Iteratormuster von JavaScript-Entwurfsmustern_Javascript-Fähigkeiten

• Das Iteratormuster bezieht sich auf die Bereitstellung einer Methode für den sequentiellen Zugriff auf die einzelnen Elemente in einem Aggregatobjekt, ohne die interne Darstellung des Objekts offenzulegen.
  

Array.prototype.forEach in JavaScript

1. Iterator in jQuery

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

2. Implementieren Sie Ihren eigenen Iterator

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 );
});

Hinweis: Parameter, die sich von Array.prototype.forEach unterscheiden! ! !

[1, 2, 3].forEach(function(n, i, curAry){
  console.log("当前下标为："+ i + " 当前元素为："+ n + " 当前数组为：" + curAry);
})

3. Interner Iterator, externer Iterator

(1) Interner Iterator: hat die Iterationsregeln definiert, übernimmt vollständig den gesamten Iterationsprozess und erfordert lediglich einen ersten Aufruf von außen. Der obige Brauch ist jeweils ein interner Iterator!
(2) Externer Iterator: muss explizit die Iteration des nächsten Elements anfordern.
Beispiel: Bestimmen Sie, ob zwei Arrays gleich sind

Beispiel 1: Interner Iterator

// 内部迭代器
var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]);
  }  
};
// 比较函数
var compareAry = function(ary1, ary2) {
  if(ary1.length != ary2.length) {
    throw new Error("不相等"); // return console.log("不相等"); 
  }
  // 且住
  each(ary1, function(i, n) {
    if(n !== ary2[i]) {
      // return console.log("不相等"); 
      // return 只能返回到each方法外，后续console.log("相等")会继续执行，所以这里得使用throw
      throw new Error("不相等");
    }
  });
  console.log("相等");
}

compareAry([1, 2, 3], [1, 2, 4]);

Beispiel 2: Externer Iterator

// 外部迭代器
var Iterator = function(obj) {
  var current = 0,
    next = function() {
      current++;
    },
    isDone = function() {
      return current >= obj.length;  
    },
    getCurrentItem = function() {
      return obj[current];
    };
  return {
    next: next,
    isDone: isDone,
    getCurrentItem: getCurrentItem
  };
};
// 比较函数
var compareAry = function(iterator1, iterator2) {
  while( !iterator1.isDone() && !iterator2.isDone() ){
    if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
      throw new Error("不相等");
    }
    iterator1.next();
    iterator2.next();
  }
  console.log("相等");
}

compareAry(new Iterator([1, 2, 3]), new Iterator([1, 2, 4]));

4. Iterator beenden

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

each([1, 2, 4, 1], function(i, n) {
  if(n > 3) {
    return false;
  }
  console.log(n);
});

5. Anwendung (Umsetzung)

Datei hochladen, das entsprechende Upload-Komponentenobjekt je nach Browser abrufen.
Vergleiche „JavaScript Design Pattern – Chain of Responsibility Pattern“

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

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

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

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

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

// 是否支持flash
function supportFlash() {
  var hasFlash = 0; //是否安装了flash
  var flashVersion = 0; //flash版本
  if (document.all) {
    var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
    if (swf) {
      hasFlash = 1;
      VSwf = swf.GetVariable("$version");
      flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
    }
  } else {
    if (navigator.plugins && navigator.plugins.length > 0) {
    var swf = navigator.plugins["Shockwave Flash"];
      if (swf) {
        hasFlash = 1;
        var words = swf.description.split(" ");
        for (var i = 0; i < words.length; ++i) {
          if (isNaN(parseInt(words[i]))) continue;
          flashVersion = parseInt(words[i]);
        }
      }
    }
  }
  return { f: hasFlash, v: flashVersion };
}

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.