资讯专栏INFORMATION COLUMN

javascript 组合模式

Carson / 709人阅读

摘要:开始扫描文件夹文件下不能添加其他文件夹或文件开始扫描文件根文件加技术栈权威小王子

组合模式

**// 组合模式在对象间形成树形结构
// 组合模式中基本对象和组合对象被一致对待
// 无须关心对象有多少层 调用时只需要在根部进行调用**
结合了命令模式和组合模式的具体实现:

    const MacroCommand = function () {
      return {
        lists: [],
        add: function (task) {
          this.lists.push(task)
        },
        excute: function () { //组合对象调用这里的excute
          for (let i = 0; i < this.lists.length; i++) {
            this.lists[i].excute()
          }
        }
      }
    }
    const command1 = MacroCommand() //基本对象
    command1.add({
      excute: () => console.log("煮咖啡") //基本对象调用这里的excute
    })
    const command2 = MacroCommand()
    command2.add({
      excute: () => console.log("打开电视")
    })
    command2.add({
      excute: () => console.log("打开音响")
    })
    const command3 = MacroCommand()
    command3.add({
      excute: () => console.log("打开空调")
    })
    command3.add({
      excute: () => console.log("打开电脑")
    })
    console.log(command1.lists) //所对应的内存地址不一样
    console.log(command2.lists) //所以lists 保存的不一样
    console.log(command3.lists)

    const macroCommand = MacroCommand()
    macroCommand.add(command2) //分次放入不同的参数
    macroCommand.add(command3) // 函数的引用不变,对应的就是同 
                                 //一个堆
     macroCommand.add(command1)
     //最后把command1、2、3都放入数组中 调用excute,触发每一个数 
      //组中的excute方法
    macroCommand.excute()

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

   const Folder = function(folder){
    this.folder = folder
    this.lists = []
   }
   Folder.prototype.add = function(resource){
     this.lists.push(resource)
   }
   Folder.prototype.scan = function(){
     console.log("开始扫描文件夹",this.folder)
     for(let i =0,folder; folder = this.lists[i++];){
       folder.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("life")
   const file1 = new File("js技术栈")
   const file2 = new File("权威")
   const file3 = new File("小王子")
   folder1.add(file1)
   folder1.add(file2)
   folder2.add(file3)
   folder.add(folder1)
   folder.add(folder2)
   folder.scan()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106641.html

相关文章

  • 听飞狐聊JavaScript设计模式系列12

    摘要:,对组合对象执行的操作可以向下传递到叶子节点进行操作。组合模式之图片库图片库可以有选择地隐藏或显示图片库的全部或某一部分单独的或是部分的。 本回内容介绍 上一回,聊了桥接模式,做了一道计算题;介一回,聊组合模式(Composite),官方描述组合模式将对象组合成树形结构以表示部分-整体的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。 组合模式特性 这里我理了一下,就组...

    HitenDev 评论0 收藏0
  • JavaScript设计模式-第一部分:单例模式组合模式和外观模式

    摘要:但是,这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数,并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分:单例模式、组合模式和外观模式 设计模式是一些可靠的编程方式,有助于保证代码更加易于维护、扩展及分离,所有设计模式在创建大型JavaScript应用程序时均不可或缺 单...

    betacat 评论0 收藏0
  • JavaScript设计模式(八):组合模式

    摘要:不同于其它静态编程语言,实现组合模式的难点是保持树对象与叶对象之间接口保持统一,可借助定制接口规范,实现类型约束。误区规避组合不是继承,树叶对象并不是父子对象组合模式的树型结构是一种聚合的关系,而不是。 showImg(https://segmentfault.com/img/bVbu79V?w=800&h=600); 组合模式:又叫 部分整体 模式,将对象组合成树形结构,以表示 部分...

    leon 评论0 收藏0
  • js设计模式--组合模式

    摘要:文章系列设计模式单例模式设计模式策略模式设计模式代理模式设计模式迭代器模式设计模式发布订阅模式设计模式命令模式概念组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的孙对象构成的。 前言 本系列文章主要根据《JavaScript设计模式与开发实践》整理而来,其中会加入了一些自己的思考。希望对大家有所帮助。 文章系列 js设计模式--单例模式 js设计模式--策略...

    blankyao 评论0 收藏0
  • JavaScript继承模式

    摘要:组合继承组合继承有时也叫伪经典继承,该继承模式将原型链和借用构造函数的技术结合在一起实现。寄生组合式继承通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。 原文地址:JavaScript实现继承 众所周知,JavaScript 这门语言在 ES6 出来之前是没有类(class)这一概念的,所以 JavaScript 中的类都是通过原型链来实现的。同样,使用 JavaScrip...

    DrizzleX 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<