Iterator 迭代器模式
28 Jun 2015JavaScript 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 系列 - 湯姆大叔- 博客園：深入理解 JavaScript 系列文章。
- 深入理解 JavaScript 系列（35）：設計模式之迭代器模式- 湯姆大叔- 博客園：迭代器模式的解說與範例。
- 從實例學設計模式 by Jace Ju
這篇文章的原始位置在這裡-JavaScript Design Pattern - Iterator 迭代器模式
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
