摘要:更多前端技术和知识点,搜索订阅号菌订阅组合模式在对象间形成树形结构组合模式中基本对象和组合对象被一致对待无须关心对象有多少层调用时只需在根部进行调用实现原理创建宏任务并维护一个任务列表创建宏任务方法将到中创建方法循环遍历中的对象对象必须拥有
⭐️ 更多前端技术和知识点,搜索订阅号 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 的技术文章,只谈技术不谈八卦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106107.html
摘要:组合模式继承结合了构造函数继承时可以为每个属性重新初始化,构造一个副本的优点,以及原型链继承时一次定义处处共享的优点。但令我百思不得其解的是,从上面给出的例子来看,组合继承并没有调用两次超类型构造函数。 最近在阅读《js权威指南》的继承这一章,对于组合模式和寄生组合模式的区别有点混淆,在多次重读以及尝试之后,得到一些心得。 组合模式继承 结合了构造函数继承时可以为每个属性重新初始化,构...
摘要:,对组合对象执行的操作可以向下传递到叶子节点进行操作。组合模式之图片库图片库可以有选择地隐藏或显示图片库的全部或某一部分单独的或是部分的。 本回内容介绍 上一回,聊了桥接模式,做了一道计算题;介一回,聊组合模式(Composite),官方描述组合模式将对象组合成树形结构以表示部分-整体的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。 组合模式特性 这里我理了一下,就组...
摘要:组合模式的图组成部分组合对象为组合中的对象声明接口,在适当的情况下,实现所有类共有接口的默认行为,声明用于访问和管理其子组件的接口。组合模式对单个对象叶子对象和组合对象容器对象的使用具有一致性。 组合模式(Composite Pattern)属于结构型模式的一种,组合多个对象形成树形结构来表示部分 - 整体的结构层次,对单个对象(叶子对象)和组合对象(容器对象)的使用具有一致性 概述...
摘要:我们可以做一些小改进将的抛出异常代码挪入父类属于最小单位。完整代码当我们需要在某个子类,实现个性化的业务逻辑时,组合模式的缺陷之一正在显现出来简化的前提是所有的类都继承同一个基类,简化优点有时是以降低对象安全为代价。 开篇 如果你注意了目录,会知道:组合是一个新的开始。在系统代码设计的过程中,我们通过继承来组织代码,父类与子类,实质上对应了业务的整体规范与具体需求。所以,我们需要将类按...
阅读 3448·2021-09-02 09:53
阅读 1767·2021-08-26 14:13
阅读 2705·2019-08-30 15:44
阅读 1288·2019-08-30 14:03
阅读 1934·2019-08-26 13:42
阅读 2992·2019-08-26 12:21
阅读 1288·2019-08-26 11:54
阅读 1888·2019-08-26 10:46