js设计模式--组合模式

blankyao 发布于2019-08-23 14:31 / 916人阅读

摘要：文章系列设计模式单例模式设计模式策略模式设计模式代理模式设计模式迭代器模式设计模式发布订阅模式设计模式命令模式概念组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的孙对象构成的。

前言

本系列文章主要根据《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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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