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

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

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

前言

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

文章系列

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

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

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

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

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

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

概念

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

場景

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

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

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

缺點(diǎn)

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

例子 掃描文件夾

這里把文件和文件夾無區(qū)別對待，文件和文件夾都具有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("開始掃描文件夾: " + 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("開始掃描文件: " + 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ì)模式與開發(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 語言精髓與編程實(shí)踐");

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

folder.scan();

增加刪除方法

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

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

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

Folder.prototype.scan = function () {
  console.log("開始掃描文件夾: " + 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)或者樹外的游離節(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("開始掃描文件: " + this.name);
};

File.prototype.remove = function () {
  if (!this.parent) { //根節(jié)點(diǎn)或者樹外的游離節(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ì)模式與開發(fā)實(shí)踐"));
folder.add(folder1);
folder.add(file1);
folder1.remove(); //移除文件夾
folder.scan();