JS设计模式初识(七)-组合模式

最新推荐文章于 2025-08-05 20:58:06 发布

weixin_33770878

最新推荐文章于 2025-08-05 20:58:06 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签：设计模式

原文链接：https://juejin.im/post/5d03a4c0518825092c716ecd

本文深入探讨了组合模式的概念，通过实例展示了如何使用该模式构建复杂的对象结构，特别关注其在处理树形结构数据时的优势。文章通过具体的代码示例，讲解了组合模式在文件系统中的应用，并讨论了其在提高代码复用性和简化复杂对象操作方面的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义

组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。

7.1 组合实例 -扫描文件夹

//文件夹类
function Folder(name) {
    this.name = name;
    this.files = [];
    this.parent = null;
}
Folder.prototype.add = function(file) {
    file.parent = this;
    this.files.push(file);
    
}
Folder.prototype.scan = function() {
    console.log('开始扫描文件夹 => ',this.name);
    for (let i=0; i<this.files.length; i++) {
        const file = this.files[i];
        file.scan();
    }
}
Folder.prototype.remove = function(file) {
    if (!this.parent) {
        return false;
    }
    const files = this.files;
    const len = files.length;
    for (let i=files[len]; i >= 0; i--) {
        if (files[i] === file) {
            files.splice(i,1);
        }
    }
}
// 文件类
function File(name) {
    this.name = name;
    this.parent = null;
}
File.prototype.add = function() {
    throw new Error('file下面不能添加文件');
}
File.prototype.scan = function() {
    console.log('开始扫描文件 => ',this.name);
}
File.prototype.remove = function() {
    if (!this.parent) {
        return false;
    }
    const files = this.files;
    const len = files.length;
    for (let i=files[len-1]; i >= 0; i--) {
        if (files[i] === file) {
            files.splice(i,1);
        }
    }
}

const Ftimo = new Folder('Ftimo');
const Ffe = new Folder('Ffe');
const Fjs = new Folder('Fjs');
const Fes6 = new Folder('Fes6');
const Freact = new Folder('Freact');
const Fredux = new Folder('Fredux');
const findex = new File('findex');
const fcss = new File('fcss');
const fless = new File('fless');
const fjavascript = new File('fjavascript');
const fjava = new File('fjava');
Ftimo.add(Ffe);
Ffe.add(Fjs);
Ffe.add(Fes6);
Fjs.add(findex);
Fjs.add(fcss);
Fjs.add(fless);
Ffe.add(fjavascript);
Ffe.add(fjava);
Fjs.add(Freact);
Fjs.add(Fredux);
Ftimo.scan();
复制代码

7.2 优化代码


复制代码

7.3 注意点

组合模式不是父子关系，只是父子节点关系
对叶对象操作的一致性
双向映射关系
用职责链模式提高组合模式性能

7.4 何时候使用组合模式

表示对象的部分整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后，只需要通过请求树的最顶层对象，便能对整棵树做统一的操作。
客户希望统一对待树中的所有对象。组合模式使客户可以忽略组合对象和叶对象的区别，客户在面对这棵树的时候，不用关心当前正在处理的对象是组合对象还是叶对象，也就不用写一堆 if、else语句来分别处理它们。组合对象和叶对象会各自做自己正确的事情，这是组合模式最重要的能力。