js設計模式--組合模式

blankyao 發布于2019-08-23 14:31 / 918人閱讀

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

前言

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

文章系列

js設計模式--單例模式

js設計模式--策略模式

js設計模式--代理模式

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

js設計模式--發布訂閱模式

js設計模式--命令模式

概念

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

場景

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

優缺點 優點

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

缺點

它可能會產生一個這樣的系統:系統中的每個對象看起來都與其他對象差不多。它們的區別只有在運行的時候會才會顯現出來，這會使代碼難以理解。此外，如果通過組合模式創建了太多的對象，那么這些對象可能會讓系統負擔不起。

例子 掃描文件夾

這里把文件和文件夾無區別對待，文件和文件夾都具有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("學習資料");
var folder1 = new Folder("JavaScript");
var folder2 = new Folder("jQuery");
var file1 = new File("JavaScript 設計模式與開發實踐");
var file2 = new File("精通jQuery");
var file3 = new File("重構與模式")
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 語言精髓與編程實踐");

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

folder.scan();

增加刪除方法

我們需要增加一個父對象的引用

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

Folder.prototype.add = function (file) {
  file.parent = this; //設置父對象
  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) { //根節點或者樹外的游離節點
    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) { //根節點或者樹外的游離節點
    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("學習資料");
var folder1 = new Folder("JavaScript");
var file1 = new Folder("深入淺出Node.js");

folder1.add(new File("JavaScript 設計模式與開發實踐"));
folder.add(folder1);
folder.add(file1);
folder1.remove(); //移除文件夾
folder.scan();

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

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

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

js組合模式和寄生組合模式的區別研究

摘要：組合模式繼承結合了構造函數繼承時可以為每個屬性重新初始化，構造一個副本的優點，以及原型鏈繼承時一次定義處處共享的優點。但令我百思不得其解的是，從上面給出的例子來看，組合繼承并沒有調用兩次超類型構造函數。最近在閱讀《js權威指南》的繼承這一章，對于組合模式和寄生組合模式的區別有點混淆，在多次重讀以及嘗試之后，得到一些心得。組合模式繼承結合了構造函數繼承時可以為每個屬性重新初始化，構...

tolerious 2019-08-23 15:24 評論0 收藏0
js設計模式 --- 組合設計模式

摘要：組合設計模式組合模式，將對象組合成樹形結構以表示部分整體的層次結構，組合模式使得用戶對單個對象和組合對象的使用具有一致性。組合設計模式組合模式，將對象組合成樹形結構以表示部分-整體的層次結構，組合模式使得用戶對單個對象和組合對象的使用具有一致性。它使我們樹型結構的問題中，模糊了簡單元素和復雜元素的概念，客戶程序可以像處理簡單元素一樣來處理復雜元素,從而使得客戶程序與復雜元素的內部結...

ninefive 2019-08-26 11:45 評論0 收藏0
JS對象(3)經典對象創建與繼承模式

摘要：對象經典對象創建與繼承模式組合模式創建對象中創建一個對象的方式多種多樣，每種方式都有自己缺點或者優點，具體的可以參考而組合使用構造函數模式和原型模式來創建自定義類型算是最常見的方式了。 title: JS對象(3)經典對象創建與繼承模式 date: 2016-09-28 tags: JavaScript 0x01 組合模式創建對象 JS 中創建一個對象的方式多種多樣，...

hellowoody 2019-08-21 11:17 評論0 收藏0
組合模式

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱組合模式在對象間形成樹形結構組合模式中基本對象和組合對象被一致對待無須關心對象有多少層調用時只需在根部進行調用實現原理創建宏任務并維護一個任務列表創建宏任務方法將到中創建方法循環遍歷中的對象對象必須擁有 showImg(https://segmentfault.com/img/remote/1460000019894881?w=640&h=404)...

FreeZinG 2019-08-26 10:24 評論0 收藏0
JS創建對象模式及其對象原型鏈探究（五）：組合使用構造函數模式和原型模式

摘要：組合使用構造函數模式和原型模式構造函數模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創建對象組合使用構造函數模式和原型模式指向構造函數，這里要將其恢復為指向構造函數。另外，這種混合模式，還支持向構造函數傳遞參數。組合使用構造函數模式和原型模式構造函數模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創建自定義類型的最常見方式，就是組合使用構造函數模式和原型模式。 ...

Shimmer 2019-08-19 17:57 評論0 收藏0