js設(shè)計(jì)模式--迭代器模式

binta 發(fā)布于2019-08-23 14:28 / 1202人閱讀

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

前言

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

文章系列

js設(shè)計(jì)模式--單例模式

js設(shè)計(jì)模式--策略模式

js設(shè)計(jì)模式--代理模式

概念

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

UML類圖

場(chǎng)景

JavaScript已經(jīng)內(nèi)置迭代器，如forEach Iterator等，再如jquery的$.each

分類 內(nèi)部迭代器 定義

內(nèi)部已經(jīng)定義好了迭代規(guī)則，它完全接手整個(gè)迭代過程，外部只需要一次初始調(diào)用

實(shí)現(xiàn)

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)
})

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：內(nèi)部迭代器在調(diào)用的時(shí)候非常方便，外界不用關(guān)心迭代器內(nèi)部的實(shí)現(xiàn)，跟迭代器的交互也僅僅是一次初始調(diào)用

缺點(diǎn)：由于內(nèi)部迭代器的迭代規(guī)則已經(jīng)被提前規(guī) 定，上面的 each 函數(shù)就無法同時(shí)迭代2個(gè)數(shù)組，如下代碼

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 不相等" );

外部迭代器 定義

外部迭代器必須顯式地請(qǐng)求迭代下一個(gè)元素

實(shí)現(xiàn)

我們模擬一個(gè)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())
}

下面解決一下上面那個(gè)問題

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)

例子 文件上傳 實(shí)現(xiàn)文件上傳對(duì)象

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

缺點(diǎn)：第一是很難閱讀，第二是嚴(yán)重違反開閉原則

改進(jìn)

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

var getFlashUploadObj = function () {
  if (supportFlash()) { // supportFlash 函數(shù)未提供
    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 基于類實(shí)現(xiàn)

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)
    }
}

// 測(cè)試代碼
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、類對(duì)象（如arguments NodeList等）都有一個(gè)Symbol.iterator迭代方法，可以通過以下方式取得

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

另外generator也會(huì)返回迭代器

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

var a = gen()
a.next()

GPU云服務(wù)器云服務(wù)器迭代器模式裝飾器模式 Java裝飾器模式 JS設(shè)計(jì)模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100673.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

binta

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow如何使用

閱讀 2278·2023-04-25 23:15
效率倍增，PyCaret：一個(gè)開源、低代碼的 Python 機(jī)器學(xué)習(xí)工具

閱讀 1943·2021-11-22 09:34
python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

閱讀 1564·2021-11-15 11:39
傳感與檢測(cè)技術(shù)，Pt100熱電阻測(cè)溫實(shí)驗(yàn)報(bào)告，江南大學(xué)物聯(lián)網(wǎng)

閱讀 971·2021-11-15 11:37
C語言進(jìn)階：程序預(yù)處理

閱讀 2166·2021-10-14 09:43
CYUN：國慶鉅惠！美國CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

閱讀 3506·2021-09-27 13:59
重溫 Flex 布局

閱讀 1517·2019-08-30 15:43
一步步教你用 CSS 為 SVG 添加濾鏡

閱讀 3480·2019-08-30 15:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

js設(shè)計(jì)模式--迭代器模式

相關(guān)文章

JS迭代器模式《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》閱讀筆記

從觀察者模式到迭代器模式系統(tǒng)講解 RxJS Observable（一）

ES6 Features系列：GeneratorFunction介紹

**javascript中的設(shè)計(jì)模式（一）**

[譯] ES6 學(xué)習(xí)筆記：關(guān)于 ES2015 特性的詳細(xì)概述

發(fā)表評(píng)論

0條評(píng)論

binta

男|高級(jí)講師

TA的文章

tensorflow如何使用

效率倍增，PyCaret：一個(gè)開源、低代碼的 Python 機(jī)器學(xué)習(xí)工具

python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

傳感與檢測(cè)技術(shù)，Pt100熱電阻測(cè)溫實(shí)驗(yàn)報(bào)告，江南大學(xué)物聯(lián)網(wǎng)

C語言進(jìn)階：程序預(yù)處理

CYUN：國慶鉅惠！美國CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

重溫 Flex 布局

一步步教你用 CSS 為 SVG 添加濾鏡

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

js設(shè)計(jì)模式--迭代器模式

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！