• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript组合模式(Composite)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

请仔细阅读下面代码,理解其中的设计理念。

 
composite.jpg

组合模式

组合模式: 将对象组合成树形结构以表示“部分整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。

实际场景

为了方便我们对多个文件的管理,我们引入了“文件夹-文件”的模式。将具有统一性质的文件放入一个文件夹中,将具有统一性质的文件夹再放入另一个文件夹中。可以对整个文件夹系统进行文件的搜索,也可以对某一个文件夹进行搜索。让文件管理变得简单。
而“文件夹-文件”这种结构就是典型 的组合模式。

组合模式的结构

  • Component 是组合中的对象声明接口,在适当的情况下,实现所有类共有接口的默认行为。声明一个接口用于访问和管理Component子部件。
  • Leaf 在组合中表示叶子结点对象,叶子结点没有子结点。
  • Composite 定义有枝节点行为,用来存储子部件,在Component接口中实现与子部件有关操作,如增加(add)和删除(remove)等。

组合模式的例子

现在要实现一个文件夹文件树

Node枚举

/* node-type-enum.ts */
enum NodeTypeEnum {
    ImageFile = 'image',
    TextFile = 'text',
    Folder = 'folder',
}

export {
    NodeTypeEnum
}

Node抽象类

/* abstract-node.ts */
import { NodeTypeEnum } from './node-type-enum';

export abstract class AbstractNode {
    protected name: string;
    protected type: NodeTypeEnum;
    protected children: AbstractNode[];

    public abstract add(node: AbstractNode): AbstractNode;
    public abstract getFileDeep(name: string): AbstractNode;
}

文件和文件夹基础类

/* basic-file-folder.ts */
import { AbstractNode } from './abstract-node';
import { NodeTypeEnum } from './node-type-enum';

export abstract class BasicFile extends AbstractNode {
    public add (file: BasicFile): BasicFile {
        console.error('文件类型不支持添加');
        return this;
    }

    public getFileDeep (name: string): BasicFile {
        if (name === this.name) {
            return this;
        }
        return null;
    }
}

export abstract class BasicFolder extends AbstractNode {
    protected constructor () {
        super();
        this.type = NodeTypeEnum.Folder;
        this.children = [];
    }

    public add (file: AbstractNode): BasicFolder {
        this.children.push(file);
        return this;
    }

    public getFileDeep (name: string): AbstractNode {
        if (this.name === name) {
            return this;
        }
        for (let index = 0; index < this.children.length; index++) {
            const node = this.children[index].getFileDeep(name);
            if (node) {
                return node;
            }
        }
        return null;
    }
}

文件类

/* files.ts */
import { BasicFile } from './basic-file-folder';
import { NodeTypeEnum } from './node-type-enum';

export class ImageFile extends BasicFile {
    constructor (name: string) {
        super();
        this.name = name;
        this.type = NodeTypeEnum.ImageFile;
    }
}

export class TextFile extends BasicFile {
    constructor (name: string) {
        super();
        this.name = name;
        this.type = NodeTypeEnum.TextFile;
    }
}

文件夹类

/* folder.ts */
import { BasicFolder } from './basic-file-folder';

export default class SystemFolder extends BasicFolder{
    constructor(name){
        super();
        this.name = name;
    }
}

客户端

/* client.ts */
import { ImageFile, TextFile } from './files';
import SystemFolder from './folder';

export default class Client {
    public static initTree (): SystemFolder {
        const folder1: SystemFolder = new SystemFolder('根文件夹');
        const folder2: SystemFolder = new SystemFolder('图像文件夹');
        const folder3: SystemFolder = new SystemFolder('文本文件夹');

        const image1: ImageFile = new ImageFile('a.jpg');
        const image2: ImageFile = new ImageFile('b.jpg');

        const text1: TextFile = new TextFile('a.txt');
        const text2: TextFile = new TextFile('b.txt');

        folder2.add(image1).add(image2);
        folder3.add(text1).add(text2);
        folder1.add(folder2).add(folder3);

        return folder1;
    }
}
const tree = Client.initTree();
const aJpg = tree.getFileDeep('a.jpg');
console.log(aJpg);

组合模式的利弊

利:

  • 减少大量手工遍历数组或其他数据的粘合性代码
  • 组合模式中各个对象耦合非常松散,更容易改变他们或互换位置,有利于代码重构
  • 让代码有一个出色的层次体系,客户端调用更方便

弊:
组合模式掩盖了他所支持的每一种操作的代价。如果层次体系很大的话,系统的性能将会收到影响。



作者:我不叫奇奇
链接:https://www.jianshu.com/p/1f8c6ebaf6b6
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript--安装依赖,vscode配置ts自动转换成js文件发布时间:2022-07-18
下一篇:
typescript导入图片报找不到模块的错误发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap