JavaScript组合模式Composite Pattern

 更新时间:2022年04月26日 11:12:43   作者:掘金安东尼  
这篇文章主要介绍了学习理解JavaScript组合模式,组合模式及Composite Pattern又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象

组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象。

组合模式依据树形结构来组合对象,用来表示部分以及整体层次。这种类型的设计模式属于结构型模式,它创建了对象组的树形结构。

树对象和叶对象接口统一,树对象增加一个缓存数组,存储叶对象。执行树对象方法时,将请求传递给其下叶对象执行。

// 树对象 - 文件目录
class CFolder {
constructor(name) {
this.name = name;
this.files = [];
}
add(file) {
this.files.push(file);
}
scan() {
for (let file of this.files) {
file.scan();
}
}
}
// 叶对象 - 文件
class CFile {
constructor(name) {
this.name = name;
}
add(file) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`开始扫描文件:${this.name}`);
}
}
let mediaFolder = new CFolder('娱乐');
let movieFolder = new CFolder('电影');
let musicFolder = new CFolder('音乐');
let file1 = new CFile('钢铁侠.mp4');
let file2 = new CFile('再谈记忆.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

输出:

开始扫描文件:钢铁侠.mp4
开始扫描文件:再谈记忆.mp3

​CFolder​​与 ​​CFile​​ 接口保持一致。执行 ​​scan()​​ 时,若发现是树对象,则继续遍历其下的叶对象,执行 ​​scan()​​。

JavaScript 不同于其它静态编程语言,实现组合模式的难点是保持树对象与叶对象之间接口保持统一,可借助 TypeScript 定制接口规范,实现类型约束。

// 定义接口规范
interface Compose {
name: string,
add(file: CFile): void,
scan(): void
}
// 树对象 - 文件目录
class CFolder implements Compose {
fileList = [];
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
this.fileList.push(file);
}
scan() {
for (let file of this.fileList) {
file.scan();
}
}
}
// 叶对象 - 文件
class CFile implements Compose {
name: string;
constructor(name: string) {
this.name = name;
}
add(file: CFile) {
throw new Error('文件下面不能再添加文件');
}
scan() {
console.log(`开始扫描:${this.name}`)
}
}
let mediaFolder = new CFolder('娱乐');
let movieFolder = new CFolder('电影');
let musicFolder = new CFolder('音乐');
let file1 = new CFile('钢铁侠.mp4');
let file2 = new CFile('再谈记忆.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();

输出:

开始扫描文件:钢铁侠.mp4
开始扫描文件:再谈记忆.mp3

需要注意的是:

  • 组合不是继承,树叶对象并不是父子对象
  • 叶对象操作保持一致性
  • 叶对象实现冒泡传递
  • 不只是简单的子集遍历

它的应用场景:

  • 优化处理递归或分级数据结构(文件系统 - 目录文件管理);
  • 与其它设计模式联用,如与命令模式联用实现 “宏命令”。

它的优点:忽略组合对象和单个对象的差别,对外一致接口使用;解耦调用者与复杂元素之间的联系,处理方式变得简单。

它的缺点:树叶对象接口一致,无法区分,只有在运行时方可辨别;包裹对象创建太多,额外增加内存负担。

到此这篇关于学习理解JavaScript组合模式Composite Pattern的文章就介绍到这了,更多相关JS组合模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中将一个值转换为字符串的方法分析[译]

    JavaScript中将一个值转换为字符串的方法分析[译]

    在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点
    2012-09-09
  • JavaScript数组塌陷实例解析

    JavaScript数组塌陷实例解析

    这篇文章主要为大家介绍了JavaScript数组塌陷实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript脚本库编写的方法

    JavaScript脚本库编写的方法

    本文给大家分享javascript脚本库编写的方法,涉及到javascript脚本相关知识,对javascript脚本相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • document.write()及其输出内容的样式、位置控制

    document.write()及其输出内容的样式、位置控制

    document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容,既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式
    2013-08-08
  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

    正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域,感兴趣的朋友参考下吧
    2016-04-04
  • 微信小程序实现选项卡滑动切换

    微信小程序实现选项卡滑动切换

    这篇文章主要为大家详细介绍了微信小程序实现选项卡滑动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 使用js画图之圆、弧、扇形

    使用js画图之圆、弧、扇形

    这篇文章主要介绍了使用js绘制几何图形教程,本文主要是教大家绘制圆、弧、扇形,需要的朋友可以参考下
    2015-01-01
  • JS交换变量的方法

    JS交换变量的方法

    这篇文章主要介绍了JS交换变量的方法,实例分析了javascript通过自定义函数实现变量交换的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 返回上一个url并刷新界面的js代码

    返回上一个url并刷新界面的js代码

    要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页面
    2020-09-09
  • JavaScript中Number.isNaN 和 isNaN 的区别详解

    JavaScript中Number.isNaN 和 isNaN 的区别详解

    本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行NaN的判断,由于笔者的不严谨,使用了isNaN,从而引起Bug,也正是因为这个,笔者才知道了isNaN和Number.isNaN的区别,所以本文就和大家聊聊它们的区别
    2023-09-09

最新评论