深入理解JavaScript设计模式之迭代器模式-CSDN博客

文章目录

深入理解JavaScript设计模式之迭代器模式

深入理解JavaScript设计模式之迭代器模式

定义

官方翻译

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，不用关心对象你的内部构造也可以按顺序访问其中的每个元素。

白话翻译

为遍历不同数据结构的集合提供统一的接口，能遍历访问集合数据中的项，不用关心项的数据结构。

实现jQuery中的each迭代器

实现数组迭代器

很简单，就是创建一个高阶函数结构两个参数，一个参数为数组，另外一个参数为调用此函数的回调函数，回调函数中返回遍历对象的下标与对应下标值。

<html>
  <body>
    <script>
      var each = function (arr, callback) {
        for (var i = 0, l = arr.length; i < l; i++) {
          callback.call(arr, i, arr[i]);
        }
      };
      each([1, 2, 3], function (i, n) {
        console.log(i, n);
      });
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代器实现创建Dom元素

在很多原生开发业务中，需要批量创建n个指定元素，也可以将迭代与业务区分开来实现，如下代码根据数组中的内容动态创建li元素,业务模式与迭代方法分类分离的设计模式。

<html>
  <body>
    <ul id="list"></ul>
    <script>
      var each = function (arr, callback) {
        for (var i = 0, l = arr.length; i < l; i++) {
          callback.call(arr, i, arr[i]);
        }
      };
      each([1, 2, 3], function (i, n) {
        var oli = document.createElement("li");
        oli.innerHTML = n;
        list.appendChild(oli);
      });
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

内部迭代器和外部迭代器

内部迭代器

上面代码中的each函数属于内部迭代器，each函数的内部已经定义好了迭代规则，each完全接手整个迭代过程，外部只需要依次调用，内部迭代器很方便，不用关心迭代器内部的实现，跟迭代器的交互也就是一次调用。但是也有缺点，由于内部迭代器的迭代规则已经被规定死，上面的each函数就无法同时迭代两个数组了，如果有需求要求迭代两个数组，判断两个数组是否相等，如果不该写内部迭代器each的代码，只能在外部套一个compare的方法进行数组相等逻辑的判断。

<html>
  <body>
    <ul id="list"></ul>
    <script>
      var each = function (arr, callback) {
        for (var i = 0, l = arr.length; i < l; i++) {
          callback.call(arr, i, arr[i]);
        }
      };
      var compare = function (ary1, ary2) {
        if (ary1.length !== ary2.length) {
          throw new Error("ary1 和 ary2 不相等");
        }
        each(ary1, function (i, n) {
          if (n !== ary2[i]) {
            throw new Error("ary1 和 ary2 不相等");
          }
        });
        console.log("ary1 和 ary2 相等");
      };
      compare([1, 2, 3], [1, 2, 4]); // throw new Error ( 'ary1 和 ary2 不相等' )
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式
上面写的compare函数真的难看难懂，但是好歹可以完成需求。

外部迭代器

部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序。
定义一个Iterator函数，接收一个对象或者数组作为参数，返回一个包含三个方法的对象next,isDone和getCurrItem，它们允许外部代码控制迭代过程。
改写compare方法，compare接收两个迭代器作为参数，并逐一比较这两个迭代器所指向的元素，如果任意两个迭代器对应的元素不相等，就抛出错误不相等，如果元素都相等且两个迭代器都达到了莫问，则弹出警告，显示相等。

<html>
  <body>
    <ul id="list"></ul>
    <script>
      var Iterator = function (obj) {
        var current = 0;
        var next = function () {
          current += 1;
        };
        var isDone = function () {
          return current >= obj.length;
        };
        var getCurrItem = function () {
          return obj[current];
        };
        return {
          next: next,
          isDone: isDone,
          getCurrItem: getCurrItem,
        };
      };
      var compare = function (iterator1, iterator2) {
        while (!iterator1.isDone() && !iterator2.isDone()) {
          if (iterator1.getCurrItem() !== iterator2.getCurrItem()) {
            throw new Error("iterator1 和 iterator2 不相等");
          }
          iterator1.next();
          iterator2.next();
        }
        console.log("iterator1 和 iterator2 相等");
      };
      var iterator1 = Iterator([1, 2, 3]);
      var iterator2 = Iterator([1, 2, 3]);
      compare(iterator1, iterator2); // 输出：iterator1 和 iterator2 相等
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代类数组对象和字面量对象

有时候迭代器需要迭代遍历数组也能迭代遍历对象的需求，其实就是在上面的方法中添加一个if判断，判断是否是数组和对象，通过for或者for in进行遍历即可。

<html>
  <body>
    <script>
      var each = function (obj, callback) {
        var value,
          i = 0,
          length = obj.length,
          isArray = Array.isArray.apply(obj);
        if (isArray) {
          // 迭代类数组
          for (; i < length; i++) {
            value = callback.call(obj[i], i, obj[i]);
            if (value === false) {
              break;
            }
          }
        } else {
          for (i in obj) {
            // 迭代 object 对象
            value = callback.call(obj[i], i, obj[i]);
            if (value === false) {
              break;
            }
          }
        }
        return obj;
      };
      each([1, 2, 3, 4, 5], function (i, v) {
        console.log(i, v);
      });
      console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
      each({ a: 1, b: 2, c: 3, d: 4, e: 5 }, function (i, v) {
        console.log(i, v);
      });
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

倒序迭代器

倒序遍历数组输出，其实就是长度高到低判断：

<html>
  <body>
    <script>
      var reverseEach = function (ary, callback) {
        for (var l = ary.length - 1; l >= 0; l--) {
          callback(l, ary[l]);
        }
      };
      reverseEach([0, 1, 2], function (i, n) {
        console.log(n); // 分别输出：2, 1 ,0
      });
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

中止迭代器

上面代码中有这么一段，迭代器可以像普通for循环中的break一样，可以跳出循环方法，如果回调函数的执行结果返回false，则提前终止循环。

if (isArray) {
  // 迭代类数组
  for (; i < length; i++) {
    value = callback.call(obj[i], i, obj[i]);
    if (value === false) {
      break;
    }
  }
}

代码展示如下，如果i>2则跳出循环即可。return false。

<html>
  <body>
    <script>
      var each = function (obj, callback) {
        var value,
          i = 0,
          length = obj.length,
          isArray = Array.isArray.apply(obj);
        if (isArray) {
          // 迭代类数组
          for (; i < length; i++) {
            value = callback.call(obj[i], i, obj[i]);
            if (value === false) {
              break;
            }
          }
        } else {
          for (i in obj) {
            // 迭代 object 对象
            value = callback.call(obj[i], i, obj[i]);
            if (value === false) {
              break;
            }
          }
        }
        return obj;
      };
      each([1, 2, 3, 4, 5], function (i, v) {
        if (i > 2) {
          return false;
        }
        console.log("each", i, v);
      });
    </script>
  </body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代器的应用举例

音乐播放器

场景一、假设我们正在开发一个音乐播放列表功能，需要实现一个可以逐首播放歌曲的播放器，并支持“下一首”、“重置”等功能。

有一个歌曲数组。
可以按顺序播放歌曲。
支持“下一首”、“当前歌曲”、“是否播放完毕”等操作。

使用外部迭代器实现：

<html>
  <body>
    <script>
      function PlaylistIterator(songs) {
        let index = 0;

        return {
          next() {
            return index < songs.length
              ? { value: songs[index++], done: false }
              : { done: true };
          },
          current() {
            return songs[index];
          },
          reset() {
            index = 0;
          },
          hasNext() {
            return index < songs.length;
          },
        };
      }

      // 使用示例
      const songs = ["Song X", "Song Y", "Song Z"];
      const player = PlaylistIterator(songs);
      console.log(player.next().value); // Song X
      console.log(player.next().value); // Song Y
      console.log(player.hasNext()); // true
      console.log(player.next().value); // Song Z
      console.log(player.hasNext()); // false
      player.reset(); // 从头开始
      console.log(player.next().value); // Song X（重新开始）
    </script>
  </body>
</html>