Javascript设计模式-14-组合模式

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 - 状态模式