js設(shè)計(jì)模式--組合模式

blankyao 發(fā)布于2019-08-23 14:31 / 925人閱讀

摘要：文章系列設(shè)計(jì)模式單例模式設(shè)計(jì)模式策略模式設(shè)計(jì)模式代理模式設(shè)計(jì)模式迭代器模式設(shè)計(jì)模式發(fā)布訂閱模式設(shè)計(jì)模式命令模式概念組合模式就是用小的子對(duì)象來(lái)構(gòu)建更大的對(duì)象，而這些小的子對(duì)象本身也許是由更小的孫對(duì)象構(gòu)成的。

前言

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

文章系列

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

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

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

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

js設(shè)計(jì)模式--發(fā)布訂閱模式

js設(shè)計(jì)模式--命令模式

概念

組合模式就是用小的子對(duì)象來(lái)構(gòu)建更大的對(duì)象，而這些小的子對(duì)象本身也許是由更小的“孫對(duì)象”構(gòu)成的。

場(chǎng)景

組合模式除了要求組合對(duì)象和葉對(duì)象擁有相同的接口之外，還有一個(gè)必要條件，就是對(duì)一組葉對(duì)象的操作必須具有一致性。

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

組合模式將對(duì)象組合成樹(shù)形結(jié)構(gòu)，以表示“部分-整體”的層次結(jié)構(gòu)。除了用來(lái)表示樹(shù)形結(jié) 構(gòu)之外，組合模式的另一個(gè)好處是通過(guò)對(duì)象的多態(tài)性表現(xiàn)，使得用戶(hù)對(duì)單個(gè)對(duì)象和組合對(duì)象的使用具有一致性

缺點(diǎn)

它可能會(huì)產(chǎn)生一個(gè)這樣的系統(tǒng):系統(tǒng)中的每個(gè)對(duì)象看起來(lái)都與其他對(duì)象差不多。它們的區(qū)別只有在運(yùn)行的時(shí)候會(huì)才會(huì)顯現(xiàn)出來(lái)，這會(huì)使代碼難以理解。此外，如果通過(guò)組合模式創(chuàng)建了太多的對(duì)象，那么這些對(duì)象可能會(huì)讓系統(tǒng)負(fù)擔(dān)不起。

例子 掃描文件夾

這里把文件和文件夾無(wú)區(qū)別對(duì)待，文件和文件夾都具有add和scan方法

var Folder = function (name) {
  this.name = name;
  this.files = [];
};
Folder.prototype.add = function (file) {
  this.files.push(file);
};
Folder.prototype.scan = function () {
  console.log("開(kāi)始掃描文件夾: " + this.name);
  for (var i = 0, file, files = this.files; file = files[i++];) {
    file.scan();
  }
};
/******************************* File ******************************/
var File = function (name) {
  this.name = name;
};
File.prototype.add = function () {
  throw new Error("文件下面不能再添加文件");
};
File.prototype.scan = function () {
  console.log("開(kāi)始掃描文件: " + this.name);
};

var folder = new Folder("學(xué)習(xí)資料");
var folder1 = new Folder("JavaScript");
var folder2 = new Folder("jQuery");
var file1 = new File("JavaScript 設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐");
var file2 = new File("精通jQuery");
var file3 = new File("重構(gòu)與模式")
folder1.add(file1);
folder2.add(file2);
folder.add(folder1);
folder.add(folder2);
folder.add(file3);

var folder3 = new Folder("Nodejs");
var file4 = new File("深入淺出Node.js");
folder3.add(file4);
var file5 = new File("JavaScript 語(yǔ)言精髓與編程實(shí)踐");

folder.add(folder3);
folder.add(file5);

folder.scan();

增加刪除方法

我們需要增加一個(gè)父對(duì)象的引用

var Folder = function (name) {
  this.name = name;
  this.parent = null; //增加this.parent 屬性
  this.files = [];
};

Folder.prototype.add = function (file) {
  file.parent = this; //設(shè)置父對(duì)象
  this.files.push(file);
};

Folder.prototype.scan = function () {
  console.log("開(kāi)始掃描文件夾: " + this.name);
  for (var i = 0, file, files = this.files; file = files[i++];) {
    file.scan();
  }
};

Folder.prototype.remove = function () {
  if (!this.parent) { //根節(jié)點(diǎn)或者樹(shù)外的游離節(jié)點(diǎn)
    return;
  }
  for (var files = this.parent.files, l = files.length - 1; l >= 0; l--) {
    var file = files[l];
    if (file === this) {
      files.splice(l, 1);
    }
  }
};

var File = function (name) {
  this.name = name;
  this.parent = null;
};

File.prototype.add = function () {
  throw new Error("不能添加在文件下面");
};

File.prototype.scan = function () {
  console.log("開(kāi)始掃描文件: " + this.name);
};

File.prototype.remove = function () {
  if (!this.parent) { //根節(jié)點(diǎn)或者樹(shù)外的游離節(jié)點(diǎn)
    return;
  }

  for (var files = this.parent.files, l = files.length - 1; l >= 0; l--) {
    var file = files[l];
    if (file === this) {
      files.splice(l, 1);
    }
  }
};

var folder = new Folder("學(xué)習(xí)資料");
var folder1 = new Folder("JavaScript");
var file1 = new Folder("深入淺出Node.js");

folder1.add(new File("JavaScript 設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐"));
folder.add(folder1);
folder.add(file1);
folder1.remove(); //移除文件夾
folder.scan();

GPU云服務(wù)器云服務(wù)器組合模式 js繼承模式 js模式化窗口兼容模式不兼容js

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

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

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

登陸后可評(píng)論

0條評(píng)論

blankyao

男|高級(jí)講師

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

TA的文章

10gbiz：美國(guó)站群首月半價(jià)，香港E5獨(dú)服180元起，香港/美國(guó)GIA線(xiàn)路VPS低至$2.36/月

閱讀 3552·2021-09-06 15:13
騰訊云：數(shù)據(jù)庫(kù)最新優(yōu)惠活動(dòng),mysql數(shù)據(jù)庫(kù)低至1.1折首年僅需186元

閱讀 1535·2021-09-02 10:19
函數(shù)防抖與函數(shù)節(jié)流

閱讀 2482·2019-08-30 15:52
深入css布局(1) — 盒模型 & 元素分類(lèi)

閱讀 929·2019-08-29 15:25
Vuex從入門(mén)到放棄（webpack自動(dòng)導(dǎo)入模塊命名空間輔助函數(shù)）

閱讀 1577·2019-08-26 18:36
消息未讀之點(diǎn)不完的小紅點(diǎn)（Node+Websocket）

閱讀 505·2019-08-26 13:23
Koa2 入門(mén)教程

閱讀 1345·2019-08-26 10:46
前端面試每日3+1——第116天

閱讀 3511·2019-08-26 10:41

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

資訊專(zhuān)欄INFORMATION COLUMN

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

js設(shè)計(jì)模式--組合模式

相關(guān)文章

js組合模式和寄生組合模式的區(qū)別研究

**js設(shè)計(jì)模式 --- 組合設(shè)計(jì)模式**

JS對(duì)象(3)經(jīng)典對(duì)象創(chuàng)建與繼承模式

組合模式

JS創(chuàng)建對(duì)象模式及其對(duì)象原型鏈探究（五）：組合使用構(gòu)造函數(shù)模式和原型模式

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

0條評(píng)論

blankyao

男|高級(jí)講師

TA的文章

10gbiz：美國(guó)站群首月半價(jià)，香港E5獨(dú)服180元起，香港/美國(guó)GIA線(xiàn)路VPS低至$2.36/月

騰訊云：數(shù)據(jù)庫(kù)最新優(yōu)惠活動(dòng),mysql數(shù)據(jù)庫(kù)低至1.1折首年僅需186元

函數(shù)防抖與函數(shù)節(jié)流

深入css布局(1) — 盒模型 & 元素分類(lèi)

Vuex從入門(mén)到放棄（webpack自動(dòng)導(dǎo)入模塊命名空間輔助函數(shù)）

消息未讀之點(diǎn)不完的小紅點(diǎn)（Node+Websocket）

Koa2 入門(mén)教程

前端面試每日3+1——第116天

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

js設(shè)計(jì)模式--組合模式

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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