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

最新推荐文章于 2024-06-14 02:30:00 发布

杏子姐_1024

最新推荐文章于 2024-06-14 02:30:00 发布

阅读量176

点赞数

分类专栏：设计模式

本文链接：https://blog.csdn.net/weixin_44135121/article/details/106017624

版权

设计模式专栏收录该内容

30 篇文章 2 订阅

订阅专栏

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

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

概念与特点

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

特点：

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

结构与实现

结构：
迭代器模式包含抽象聚合类、具体聚合类、抽象迭代器和具体迭代器。
抽象聚合类：定义存储、添加、删除聚合对象以及创建迭代器对象的接口。
具体聚合类：实现抽象聚合类，返回一个具体迭代器的实例。
抽象迭代器：定义访问和遍历聚合元素的接口，通常包含 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>