js設計模式--迭代器模式

binta 發布于2019-08-23 14:28 / 1195人閱讀

摘要：文章系列設計模式單例模式設計模式策略模式設計模式代理模式概念迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。

前言

本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。

文章系列

js設計模式--單例模式

js設計模式--策略模式

js設計模式--代理模式

概念

迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。迭代器模式可以把迭代的過程從業務邏輯中分離出來，在使用迭代器模式之后，即使不關心對象的內部構造，也可以按順序訪問其中的每個元素。

UML類圖

場景

JavaScript已經內置迭代器，如forEach Iterator等，再如jquery的$.each

分類 內部迭代器 定義

內部已經定義好了迭代規則，它完全接手整個迭代過程，外部只需要一次初始調用

實現

var each = function (ary, callback) {
  for (var i = 0; i < ary.length; i++) {
    callback(i, ary[i])
  }
}
each([1, 2, 3, 4, 5], function (i, item) {
  console.log(i, item)
})

優缺點

優點：內部迭代器在調用的時候非常方便，外界不用關心迭代器內部的實現，跟迭代器的交互也僅僅是一次初始調用

缺點：由于內部迭代器的迭代規則已經被提前規定，上面的 each 函數就無法同時迭代2個數組，如下代碼

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 不相等" );
    }
  });
  alert ( "ary1 和ary2 相等" );
};
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( "ary1 和ary2 不相等" );

外部迭代器 定義

外部迭代器必須顯式地請求迭代下一個元素

實現

我們模擬一個es6迭代器

var Iterator = function (ary) {
  this.ary = ary
  this.index = 0
}

Iterator.prototype.isDone = function () {
  return this.index >= this.ary.length
}

Iterator.prototype.next = function () {
  if (!this.isDone()) {
    var res = this.ary[this.index]
    this.index++
    return {
      value: res,
      done: this.isDone()
    }
  }
}

var a = new Iterator([1, 2, 3])

while (!a.isDone()) {
  console.log(a.next())
}

下面解決一下上面那個問題

var a = new Iterator([1, 2, 3, 3])
var b = new Iterator([1, 2, 3])

function compare(iterator1, iterator2) {
  while (!iterator1.isDone() || !iterator2.isDone()) {
    if (iterator1.next().value !== iterator2.next().value) {
      return false
    }
  }
  return true
}


compare(a, b)

例子 文件上傳 實現文件上傳對象

var getUploadObj = function () {
  try {
    return new ActiveXObject("TXFTNActiveX.FTNUpload");
  } catch (e) {
    // IE 上傳控件
    if (supportFlash()) { // supportFlash 函數未提供
      var str = "";
      return $(str).appendTo($("body"));
    } else {
      var str = ""; // 表單上傳
      return $(str).appendTo($("body"));
    }
  }
};

缺點：第一是很難閱讀，第二是嚴重違反開閉原則

改進

var getActiveUploadObj = function () {
  try {
    return new ActiveXObject("TXFTNActiveX.FTNUpload");
  } catch (e) {
    return false;
  }
};

var getFlashUploadObj = function () {
  if (supportFlash()) { // supportFlash 函數未提供
    var str = "";
    return $(str).appendTo($("body"));
  };
  return false;
}

var getFormUpladObj = function () {
  var str = " "; // 表單上傳
  return $(str).appendTo($("body"));
}

var iteratorUploadObj = function () {
  for (var i = 0, fn; fn = arguments[i++];) {
    var uploadObj = fn();
    if (uploadObj !== false) {
      return uploadObj;
    }
  };
}
var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUpladObj);

es6 基于類實現

class Iterator {
    constructor(conatiner) {
        this.list = conatiner.list
        this.index = 0
    }
    next() {
        if (this.hasNext()) {
            return this.list[this.index++]
        }
        return null
    }
    hasNext() {
        if (this.index >= this.list.length) {
            return false
        }
        return true
    }
}

class Container {
    constructor(list) {
        this.list = list
    }
    getIterator() {
        return new Iterator(this)
    }
}

// 測試代碼
let container = new Container([1, 2, 3, 4, 5])
let iterator = container.getIterator()
while(iterator.hasNext()) {
    console.log(iterator.next())
}

es6中的Iterator

我們都知道Array、Map、Set、類對象（如arguments NodeList等）都有一個Symbol.iterator迭代方法，可以通過以下方式取得

var a = [1,2,3]
console.log(a[Symbol.iterator])

另外generator也會返回迭代器

function* gen() {
  yield 1
  yield "1"
}

var a = gen()
a.next()

云服務器 GPU云服務器迭代器模式裝飾器模式 Java裝飾器模式 JS設計模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100673.html

JS迭代器模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：但實際中，內部迭代器和外部迭代器兩者并無優劣。迭代器并不只迭代數組迭代器模式不僅能迭代數組，還可以迭代一些類數組對象。晚安了，參考設計模式與開發實踐曾探本文作者本文鏈接迭代器模式設計模式與開發實踐閱讀筆記迭代器模式：一個相對簡單的模式，目前絕大多數語言都內置了迭代器，以至于大家都不覺得這是一種設計模式迭代器模式迭代器模式指提供一種方法訪問一個聚合對象中的各個元素，而又不需要暴露該...

djfml 2019-08-23 10:43 評論0 收藏0
從觀察者模式到迭代器模式系統講解 RxJS Observable（一）

摘要：是的縮寫，起源于，是一個基于可觀測數據流結合觀察者模式和迭代器模式的一種異步編程的應用庫。是基于觀察者模式和迭代器模式以函數式編程思維來實現的。學習之前我們需要先了解觀察者模式和迭代器模式，還要對流的概念有所認識。 RxJS 是 Reactive Extensions for JavaScript 的縮寫，起源于 Reactive Extensions，是一個基于可觀測數據流 Stre...

notebin 2019-08-23 18:02 評論0 收藏0
ES6 Features系列：GeneratorFunction介紹

摘要：沒有顯示顯示顯示關鍵字迭代器生成器用于馬上退出代碼塊并保留現場，當執行迭代器的函數時，則能從退出點恢復現場并繼續執行下去。迭代器迭代器是一個擁有方法和方法的對象，通過函數不斷執行以關鍵字分割的代碼段，通過函數令分割的代碼段拋出異常。一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　第一次看koajs的示例時，發現該語句 function *(next){..........

golden_hamster 2019-08-21 10:36 評論0 收藏0
javascript中的設計模式（一）

摘要：模式迭代器模式顧名思義，迭代器可以將對于一個聚合對象內部元素的訪問與業務邏輯分離開。模式組合模式組合模式將對象組合成樹形結構，以表示層級結構。重點是，葉結點與中間結點有統一借口。本文總結自設計模式與開發實踐，曾探著模式1 - 單例模式單例模式的核心是確保只有一個實例，并且提供全局訪問。特點：滿足單一職責原則：使用代理模式，不在構造函數中判斷是否已經創建過該單例; 滿足惰...

chaosx110 2019-08-22 10:47 評論0 收藏0
[譯] ES6 學習筆記：關于 ES2015 特性的詳細概述

摘要：將轉換成常見的使用實現的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類，包含了附加的與。原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，請把star獻給他，你可以在此嘗試這些特性REPL。概述 ECMAScr...

leoperfect 2019-08-20 10:24 評論0 收藏0