學習JavaScript設計模式之迭代器模式，javascript設計模式

學習JavaScript設計模式之迭代器模式，javascript設計模式

• 迭代器模式是指提供一種方法順序訪問一個彙總對象中的各個元素，而又不需要暴露該對象的內部表示。
  

JavaScript中的Array.prototype.forEach

一、jQuery中的迭代器

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

二、實現自己的迭代器

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

注意：區別於Array.prototype.forEach的參數！！！

[1, 2, 3].forEach(function(n, i, curAry){  console.log("當前下標為："+ i + " 當前元素為："+ n + " 當前數組為：" + curAry);})

三、內部迭代器、外部迭代器

（1）內部迭代器：已經定義好了迭代規則，它完全接手整個迭代過程，外部只需一次初始調用。上述自訂each即為內部迭代器！
（2）外部迭代器：必須顯示地請求迭代下一個元素。
樣本：判斷兩個數組是否相等

樣本一：內部迭代器

// 內部迭代器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]);

樣本二：外部迭代器

// 外部迭代器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]));

四、終止迭代器

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

五、應用（落地）

檔案上傳，根據不同的瀏覽器擷取相應的上傳組件對象。
對比《JavaScript設計模式–責任鏈模式》

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"));}// 是否支援flashfunction 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 };}

希望本文所述對大家學習javascript程式設計有所協助。

您可能感興趣的文章:

• 深入理解JavaScript系列（35）：設計模式之迭代器模式詳解