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();

何时使用组合模式

• 表示对象的部分-整体层次结构
• 客户希望同一对待树中的所有对象，可以把相同的操作应用在组合对象和单个对象上，忽略他们的差别，用一致的方式处理

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式