专栏首页JS菌组合模式

组合模式

⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅

  • 组合模式在对象间形成树形结构;
  • 组合模式中基本对象和组合对象被一致对待;
  • 无须关心对象有多少层, 调用时只需在根部进行调用;

实现原理

  • 创建宏任务并维护一个任务列表 list
  • 创建宏任务方法 add 将 task push 到 list 中
  • 创建 execute 方法循环遍历 list 中的 task 对象
  • task 对象必须拥有一个名为 execute 的方法(用来在宏任务中遍历 list)

代码实现

const MacroCommand = function() {
    this.lists = [] // 宏任务维护一个任务列表
}
MacroCommand.prototype.add = function(task) {
    this.lists.push(task) // add 方法增加任务
}
MacroCommand.prototype.execute = function() {
    for (let index = 0; index < this.lists.length; index++) {
        this.lists[index].execute() // execute 方法执行任务
    }
}

const command1 = new MacroCommand() // 通过 new 操作符创建任务

command1.add({
    execute: () => { console.log('command1-1') }
})

command1.add({
    execute: () => { console.log('command1-2') }
})

const command2 = new MacroCommand()

command2.add({
    execute: () => { console.log('command2-1') }
})

command2.add({
    execute: () => { console.log('command2-2') }
})

command2.add({
    execute: () => { console.log('command2-3') }
})

const macroCommand = new MacroCommand() // 假定 macroCommand 为宏任务

macroCommand.add(command1) // 将其他子任务推如任务列表
macroCommand.add(command2)

macroCommand.execute() // 宏命令执行操作后,command 将依次递归执行
// command1-1
// command1-2
// command2-1
// command2-2
// command2-3

应用

扫描文件夹

文件夹下面可以为另一个文件夹也可以为文件, 我们希望统一对待这些文件夹和文件, 这种情形适合使用组合模式。

const Folder = function(folder) {
    this.folder = folder
    this.lists = []
}
Folder.prototype.add = function(res) {
    this.lists.push(res)
}
Folder.prototype.scan = function() {
    console.log(`开始扫描文件夹: ${this.folder}`)
    for (let index = 0; index < this.lists.length; index++) {
        this.lists[index].scan()
    }
}

const File = function(file) {
    this.file = file 
}
File.prototype.add = function() {
    throw Error('文件中不可添加文件')
}
File.prototype.scan = function() {
    console.log(`开始扫描文件: ${this.file}`)
}

const folder = new Folder('根文件夹')
const folder1 = new Folder('JS')
const folder2 = new Folder('其他')

const file = new File('JS prototype')
const file1 = new File('CSS 编程艺术')
const file2 = new File('HTML 标记语言')
const file3 = new File('HTTP-TCP-IP')

folder.add(folder1)
folder.add(folder2)

folder1.add(file)
folder2.add(file1)
folder2.add(file2)
folder2.add(file3)

folder.scan()

// 开始扫描文件夹: 根文件夹
// 开始扫描文件夹: JS
// 开始扫描文件: JS prototype
// 开始扫描文件夹: 其他
// 开始扫描文件: CSS 编程艺术
// 开始扫描文件: HTML 标记语言
// 开始扫描文件: HTTP-TCP-IP

本文分享自微信公众号 - JS菌(awesomefe),作者:Oliveryoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]

    有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 J...

    JS菌
  • 彻底弄清 this call apply bind 以及原生实现

    有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 J...

    JS菌
  • 30秒了解尾递归和尾递归优化

    之前提到过尾调用,尾调用就是函数的最后一步调用另外一个函数。那么递归就是调用自身,尾递归就是再函数的最后一步调用自身。?

    JS菌
  • 2. 源码分析---SOFARPC客户端服务引用

    这里返回的consumerBootstrap和用的启动器和协议有关,如果用的是bolt那么返回的就是BoltConsumerBootstrap实例。

    luozhiyun
  • 【设计模式】责任链模式-号称倒数第二难的设计模式终于搞明白了

    针对上面的代码,如果哪天哪个部件获得免检了,不需要检查了,还得去掉某一个if分支,这时候你就恨不得把所有代码都重构了。。。

    行百里er
  • 如何在ModelSim中添加Xilinx仿真库

    今天给大侠带来在FPGA设计应用中如何在ModelSim中添加Xilinx仿真库,话不多说,上货。

    FPGA技术江湖
  • 【php设计模式】装饰器模式

    装饰器模式,顾名思义,就是对已经存在的某些类进行装饰,以此来扩展一些功能。其结构图如下:

    码缘
  • 【JDK并发包基础】工具类详解

           在写并发代码来提升性能时,会遵循某些最佳写法,而不是只用基础的wait和notify来控制复杂的流程。Java.util.concurrent 包...

    我叫刘半仙
  • 源码阅读--OkHttp3

    用法在这里 http://blog.csdn.net/itachi85/article/details/51190687

    提莫队长
  • Android使用SQLITE3 WAL

    sqlite是支持write ahead logging(WAL)模式的,开启WAL模式可以提高写入数据库的速度,读和写之间不会阻塞,但是写与写之间依然是阻塞的...

    py3study

扫码关注云+社区

领取腾讯云代金券