Javascript设计模式-14-组合模式
简介
在程序设计中华,有一些和 ‘事物是由相似的子事物构成’类似的思想,组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成
用途
组合模式将对象组合成树形结构,以表示部分整体的层次,通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性
请求在树中传递的过程
请求会沿着树形结构从请求其实节点向下传递,直到树的尽头
// 目录类
var Folder = function (name) {
this.name = name;
this.parent = null;
this.files = [];
}
// 目录下添加文件或者文件夹
Folder.prototype.add = function (file) {
file.parent = this; // 指定父节点
this.files.push(file);
}
// 扫描
Folder.prototype.scan = function () {
var parentName = (this.parent && this.parent.name) || '';
console.log('扫描文件夹:', parentName + '-' + this.name);
// 将扫描命令向下传递
var files = this.files;
for (var i = 0; i <= files.length - 1; i++) {
files[i].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 () {
var parentName = (this.parent && this.parent.name) || '';
console.log('扫描文件:', parentName + '-' + 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 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);
// 扫描
folder.scan();
console.log('==== ====== ======= ======');
// 新加文件
var folder3 = new Folder('Node');
var file4 = new File('深入浅出 Node.js');
folder3.add(file4);
folder1.add(folder3);
folder.scan();
console.log('==== ====== ======= ======');
// 删除文件
file1.remove();
folder.scan();
何时使用组合模式
- 表示对象的部分-整体层次结构
- 客户希望同一对待树中的所有对象,可以把相同的操作应用在组合对象和单个对象上,忽略他们的差别,用一致的方式处理
文章列表
- javascript设计模式 – 设计原则
- JavaScript设计模式–高阶函数
- Javascript 设计模式 - 01 - 原型模式
- Javascript 设计模式 - 02 - 单例模式
- Javascript 设计模式 - 03 - 建造者模式
- Javascript 设计模式 - 04 - 工厂模式
- Javascript 设计模式 - 05 - 外观模式
- Javascript 设计模式 - 06 - 代理模式
- Javascript 设计模式 - 07 - 观察者模式(发布订阅模式)
- Javascript 设计模式 - 08 - 策略模式
- Javascript 设计模式 - 09 - 命令模式
- Javascript 设计模式 - 10 - 迭代器模式
- Javascript 设计模式 - 11 - 职责链模式
- Javascript 设计模式 - 12 - 适配器模式
- Javascript 设计模式 - 13 - 模板方法
- Javascript 设计模式 - 14 - 组合模式
- Javascript 设计模式 - 15 - 享元模式
- Javascript 设计模式 - 16 - 中介者模式
- Javascript 设计模式 - 17 - 装饰者模式
- Javascript 设计模式 - 18 - 状态模式