JavaScript 23 种设计模式之 20 迭代器模式

逃离我推掉我的手 2023-03-13 02:05 3阅读 0赞

### JavaScript 23 种设计模式之 20 迭代器模式 ###

*  概念与特点
 *  结构与实现
 *  应用场景
 *  应用实例
 *  总结

# 概念与特点 #

**概念：**  
迭代器模式是提供一个对象依次访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示，也不关心聚合对象的内部结构。

**特点：**

1.  访问一个聚合对象的内容而无需暴露它的内部表示。
2.  遍历任务由迭代器完成，简化了聚合类。
3.  支持以不同方式遍历一个聚合对象，甚至可以自定义迭代器的子类以支持新的遍历。
4.  增加新的迭代器类和聚合类都很方便。
5.  封装性良好，遍历不同的聚合结构提供一个统一的接口。

# 结构与实现 #

**结构：**  
迭代器模式包含抽象聚合类、具体聚合类、抽象迭代器和具体迭代器。  
抽象聚合类：定义存储、添加、删除聚合对象以及创建迭代器对象的接口。  
具体聚合类：实现抽象聚合类，返回一个具体迭代器的实例。  
抽象迭代器：定义访问和遍历聚合元素的接口，通常包含 hasNext()、first()、next() 等方法。  
具体迭代器：实现抽象迭代器中所定义的方法，完成对聚合对象的遍历，记录遍历的当前位置。

**案例**：  
实现一个旅游景区查看景点名称和详情。并且可以很方便地查看上一个/下一个景点，第一个景点和最后一个景点等等功能。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        //获取景点名称和详情
        class WyViewSpot{ 
              constructor(name,des){ 
                  this.name = name;
                  this.des = des;
              }
              getName(){ 
                  return this.name;
              }
              getDes(){ 
                    return this.des;
              }
        }
        //抽象聚合类-定义添加，删除，查看景点信息的方法
        class ViewSpotSet{ 
             add(){ };
             del(){ };
             getIterator(){ }
        }
        //具体聚合类-实现添加，删除，查看景点信息的方法
        class WyViewSpotSet extends ViewSpotSet{ 
            constructor(props){ 
                super(props);
                this.ArrayList = [];
            }
            add(item){ 
                this.ArrayList.push(item)
            };
            del(index){ 
                this.ArrayList.splice(index,1)
            };
            getIterator(){ 
                return  new WyViewSpotIterator(this.ArrayList);
            }
        }
        //抽象迭代器-定义是否有下一个景点、获取第一个景点和最后一个景点、获取上一个景点和下一个景点的方法
        class ViewSpotIterator{ 
             hasNext(){ }
             first(){ }
             last(){ }
             previous(){ }
             next(){ }
             
            
        }
        //具体迭代器-实现是否有下一个景点、获取第一个景点和最后一个景点、获取上一个景点和下一个景点的方法
        class WyViewSpotIterator extends ViewSpotIterator{ 
            constructor(list){ 
                super();
                this.list = list;
                this.index = -1;
                this.item = { };
            }
            //判断是否有下一个景点
            hasNext(){ 
                if(this.list.length-1>this.index){ 
                    return true;
                }else { 
                    return  false;
                }
            }
            //获取第一个景点
            first(){ 
               this.index = 0;
               this.item = this.list[this.index];
               return this.item;
            }
            //获取最后一个景点
            last(){ 
                this.index = this.list.length-1;
                this.item=this.list[this.index];
                return this.item;
            }
            //获取前一个景点
            previous(){ 
                if(this.index>0){ 
                    this.item=this.list[--this.index];
                }
                return this.item;
            }
            //获取后一个景点
            next(){ 
                if(this.hasNext()){ 
                    this.item=this.list[++this.index];
                }
                return this.item;
            }
        }
        class Customer{ 
            static main(){ 
                let wyViewSpotSet = new WyViewSpotSet();
                //添加景点
                wyViewSpotSet.add(new WyViewSpot("东方明珠","在上海"));
                wyViewSpotSet.add(new WyViewSpot("天安门","在北京"));
                wyViewSpotSet.add(new WyViewSpot("九寨沟","在江西"));
                //获取迭代器对象
                let it = wyViewSpotSet.getIterator();
                //获取最后一个景点
                let item = it.last();
                //获取上一个景点
                let item1 = it.previous();
                //打印景点名称和详情
                console.log(item.getName(),item.getDes());
                console.log(item1.getName(),item1.getDes())
            }
        }
        Customer.main();
    </script>
    </body>
    </html>

# 应用场景 #

1.  当需要为聚合对象提供多种遍历方式时。
2.  当需要为遍历不同的聚合结构提供统一的接口时。
3.  当访问一个聚合对象的内容而无需暴露其内部细节时。

# 应用实例 #

参考以上案例。

# 总结 #

迭代器模式非常适合前端轮播图的应用场景。正常开发轮播图功能时，都是通过循坏遍历的方式去获取每个元素，这样就暴露了整个图片对象的内部结构，而且遍历行为与聚合对象强耦合。如果将遍历行为抽离到迭代器对象中，就可以进行很好地解耦。而且在迭代器对象中不需要通过循坏就可以很方便地按顺序访问到每个元素。

【聚合对象】：  
1、提供添加和删除及获取迭代器对象的方法。

【迭代器对象】：  
1、定义 list 容器，储存聚合对象，  
2、提供 hasNext 是否有下一个元素的方法，提供获取第一个 first、最后一个 last、上一个 previous、下一个 next 的方法。