【JS】166-JavaScript設計模式——疊代器模式

三、疊代器模式(Iterator Pattern)

1.概念介紹

疊代器模式(Iterator Pattern) 是提供一種方法，順序通路一個聚合對象中每個元素，并且不暴露該對象内部。

這種模式屬于行為型模式，有以下幾個特點：

通路一個聚合對象的内容，而無需暴露它的内部表示。
提供統一接口來周遊不同結構的資料集合。
周遊的同僚更改疊代器所在的集合結構可能會導緻問題。

在疊代器模式中，通常包含有一個包含某種資料集合的對象，需要提供一種簡單的方法來通路每個元素。

這裡對象需要提供一個

next()

方法，每次調用都必須傳回下一個連續的元素。

這裡假設建立一個對象

leo

，我們通過調用它的

next()

方法通路下一個連續的元素：

1. let obj;
2. while(obj = leo.next()){
3.     // do something
4.     console.log(obj);
5. }

另外疊代器模式中，聚合對象還會提供一個更為漸變的

hasNext()

方法，來檢查是否已經到達資料末尾，我們這麼修改前面的代碼：

1. while(leo.hasNext()){
2.     // do something
3.     console.log(obj);
4. }

2.優缺點和應用場景

2.1優點

它簡化了聚合類，并支援以不同的方式周遊一個聚合對象。
在同一個聚合上可以有多個周遊。
在疊代器模式中，增加新的聚合類和疊代器類都很友善，無須修改原有代碼。

2.2缺點

由于疊代器模式将存儲資料和周遊資料的職責分離，增加新的聚合類需要對應增加新的疊代器類，類的個數成對增加，這在一定程度上增加了系統的複雜性。

2.3應用場景

通路一個聚合對象的内容而無須暴露它的内部表示。
需要為聚合對象提供多種周遊方式。
為周遊不同的聚合結構提供一個統一的接口。

3.簡單案例

根據上面的介紹，我們這裡實作一個簡單案例，将設我們資料隻是普通數組，然後每次檢索，傳回的是間隔一個的數組元素（即不是連續傳回）：

然後我們還要給它提供更簡單的通路方式和多次疊代資料的能力，我們需要添加下面兩個方法：

1. let leo = (function(){
2.     let index = 0, data = [1, 2, 3, 4, 5],
3.         len = data.length;
4.     return {
5.         next: function(){
6.             let obj;
7.             if(!this.hasNext()){
8.                 return null;
9.             };
10.             obj = data[index];
11.             index = index + 2;
12.             return obj;
13.         },
14.         hasNext: function(){
15.             return index < len;
16.         }
17.     }
18. })()

rewind() 重置指針到初始位置；
current() 傳回目前元素，因為當指針步前進時無法使用 next() 操作；

代碼變成這樣：

這樣這個案例就完整了，接下來我們來測試：

1. let leo = (function(){
2.     //.. 
3.     return {
4.          // .. 
5.          rewind: function(){
6.              index = 0;
7.          },
8.          current: function(){
9.              return data[index];
10.          }
11.     }
12. })();

1. // 讀取記錄
2. while(leo.hasNext()){
3.     console.log(leo.next());
4. };  // 列印 1 3 5
5. // 回退
6. leo.rewind();
7. // 擷取目前
8. console.log(leo.current()); // 回到初始位置，列印1

4.應用場景

疊代器模式通常用于：對于集合内部結果常常變化各異，我們不想暴露其内部結構的話，但又響讓客戶代碼透明底通路其中的元素，這種情況下我們可以使用疊代器模式。

簡單了解：周遊一個聚合對象。

jQuery應用例子：

jQuery中的

$.each()

方法，可以讓我們傳入一個方法，實作對所有項的疊代操作：

1. $.each([1,2,3,4,5],function(index, value){
2.     console.log(`${index}: ${value}`)
3. })
• 使用疊代器模式實作 each()方法
4. let myEach = function(arr, callback){
5.     for(var i = 0; i< arr.length; i++){
6.         callback(i, arr[i]);
7.     }
8. }

4.小結

參考資料

《JavaScript Patterns》

【JS】166-JavaScript設計模式——疊代器模式