Iterator 迭代器模式

JavaScript Design Pattern「Iterator 迭代器模式」筆記。

Iterator(迭代器模式)是一種提供簡單操作介面,而不用暴露資料來源的方法或更動它。也就是說,我們提供一個界面,讓其他人利用這個介面對資料元素做操作。

簡單實作範例

我們將資料儲存在一個 private 變數data裡面,並用另外一個 private 變數index指向下一個元素。關於資料的操作,我們使用next()hasNext()rewind()current()做存取,而不會直接觸碰到資料本身。

var agg = (function() {
  var index = 0,
      data = [1, 2, 3, 4, 5],
      length = data.length;

  return {
    next: function() {
      var element;
      if(!this.hasNext()) {
        return null;
      }
      element = data[index];
      index = index + 1;
      return element;
    },
    hasNext: function() {
      return index < length;
    },
    rewind: function() {
      // 重新設定索引指向資料的開頭
      index = 0;
    },
    current: function() {
      // 用來取得當前的元素
      return data[index];
    }
  }
}())

while(agg.hasNext()){
  console.log(agg.next()); // 1, 2, 3, 4, 5
}

agg.rewind();
console.log(agg.current()); // 1

看原始碼

實例 - jQuery 的應用

jQuery 中有一個非常有名的迭代實作 - $.each方法。透過$.each我們可以傳入資料和額外的 function,來對這個資料中的元素進行操作。如下範例(參考深入理解JavaScript系列(35):設計模式之迭代器模式- 湯姆大叔- 博客園):

$.each(['Apple', 'Bob', 'Cat', 'Dog'], function (index, value) {
  console.log(index + ': ' + value)
});

或是

$('li').each(function (index) {
  console.log(index + ': ' + $(this).text())
});

總結

使用 Iterator(迭代器模式)的時機在於

我們就可以使用這樣的方法。

推薦閱讀 / 參考文件


這篇文章的原始位置在這裡-JavaScript Design Pattern - Iterator 迭代器模式

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus