javascript设计模式与开发实践阅读笔记(10)—— 组合模式

组合模式:一些子对象组成一个父对象,子对象本身也可能是由一些孙对象组成。

有点类似树形结构的意思,这里举一个包含命令模式的例子

 1 var list=function(){   //创建接口对象的函数
 2     return {
 3         arr:[],     //执行列表  用来存储需要执行的对象
 4         add:function(obj){       //往执行列表里添加对象
 5             this.arr.push(obj);
 6         },
 7         execute:function(){    //遍历执行列表,每个对象执行规定好的接口方法
 8             for(var i=0,l=this.arr.length;i<l;i++){
 9                 this.arr[i].execute();
10             }
11         }
12     }
13 };
14
15 var menubar={                          //一系列对象,每个对象都有一个相同的接口,便于同时调用
16     execute:function(){
17         console.log("刷新menubar")
18     }
19 }
20
21 var headbar={
22     execute:function(){
23         console.log("刷新headbar")
24     }
25 }
26
27 var footbar={
28     execute:function(){
29         console.log("刷新footbar")
30     }
31 }
32
33 var move={
34     execute:function(){
35         console.log("加入动画")
36     }
37 }
38
39 var picA={
40     execute:function(){
41         console.log("移除picA")
42     }
43 }
44
45 var picB={
46     execute:function(){
47         console.log("移除picB")
48     }
49 }
50
51
52 var refresh=list();   //负责刷新的接口对象
53 refresh.add( menubar );  //添加需要刷新的对象
54 refresh.add( headbar );
55 refresh.add( footbar );
56
57
58 var remove=list();   //负责移除的接口对象
59 remove.add( picA );  //需要移除的对象
60 remove.add( picB );
61
62 var start=list();  //负责所有事情的接口对象
63 start.add( refresh );   //添加负责刷新的组合对象
64 start.add( move );     //添加负责动画的对象
65 start.add( remove );     //添加负责移除的组合对象
66
67 start.execute();  //执行这个组合对象
68
69 /****执行结果****
70
71   刷新menubar
72   刷新headbar
73   刷新footbar
74   加入动画
75   移除picA
76   移除picB
77 */

感觉上有点像俄罗斯套娃,首先定义了一个接口对象,大家都是这个接口对象,只不过一层套一层,不断调用。

执行过程其实就是深度优先搜索

一些值得注意的地方

组合模式不是父子关系,而是更类似于一种委托关系。
适用场景:只有用一致的方式对待列表中的每个叶对象的时候,才适合使用组合模式。

总结

组合模式可以让我们使用树形方式创建对象的结构,我们可以把相同的操作应用在组合对象和单个对象上。

时间: 2024-12-22 15:18:05

javascript设计模式与开发实践阅读笔记(10)—— 组合模式的相关文章

JavaScript设计模式与开发实践---读书笔记(10) 组合模式

组合模式就是用小的子对象来构建更大的对象,而这些小的子对象也许是由更小的"孙对象"构成的. 组合模式将对象组合成树形结构,以表示"部分-整体"的层次结构. 抽象类在组合模式中的作用: 组合模式最大的优点在于可以一致地对待组合对象和基本对象.这种透明性带来的便利,在静态类型语言中体现的尤为明显. JavaScript中实现组合模式的难点在于要保证组合对象和叶对象拥有同样的方法,这通常需要用鸭子类型的思想对它们进行接口检查. 透明性带来的安全问题: 组合模式的例子-扫描

JavaScript设计模式与开发实践---读书笔记(9) 命令模式

命令模式的用途: 命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令. 命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 命令模式的例子-菜单程序: <!DOCTYPE html> <html lang="en"> <head> <met

javascript设计模式与开发实践阅读笔记(4)——单例模式

定义 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录悬浮窗,我希望无论我点击多少次这个浮窗都只会被创建一次,这里就可以用单例模式. 1.实现单例模式 思路:用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象:如果否就创建出那个对象. 1 var Singleton = function( nam

javascript设计模式与开发实践阅读笔记(3)——高阶函数的其他应用

高阶函数的其他应用 1.currying 函数柯里化,又称部分求值,一个currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来.待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值. var cost = (function(){ var args = []; return function(){ if ( arguments.length === 0 ){ var money =

javascript设计模式与开发实践阅读笔记(7)——迭代器模式

迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素. 流行语言如Java.Ruby 等都已经有了内置的迭代器实现,许多浏览器也支持JavaScript的Array.prototype.forEach. jQuery中的迭代器 1 $.each( [1, 2, 3], function( i, n ){ 2 console.log

javascript设计模式与开发实践阅读笔记(6)——代理模式

代理模式:是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象.替身对象对请求做出一些处理之后,再把请求转交给本体对象.基本可以理解为粉丝(客户),经纪人(代理),偶像(对象).经纪人就相当于偶像的代理,需求直接提给经纪人,经纪人这边可以进行很多逻辑上的处理,比如可以帮助偶像过滤掉很多请求等等. 1.保护代理和虚拟代理 像上面那种,请求被代理拒绝掉就是保护代

javascript设计模式与开发实践阅读笔记(2)—— this,闭包与高阶函数

this this总是指向一个对象,有四种情况1. 作为对象的方法调用.2. 作为普通函数调用.3. 构造器调用.4. Function.prototype.call 或Function.prototype.apply 调用. 1. 作为对象的方法调用 当函数作为对象的方法被调用时,this 指向该对象: var obj = { a: 1, getA: function(){ alert ( this === obj ); // 输出:true alert ( this.a ); // 输出:

javascript设计模式与开发实践阅读笔记(5)——策略模式

策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 我的理解就是把各种方法封装成函数,同时存在一个可以调用这些方法的公共函数.这样做的好处是可以消化掉内部的分支判断,使代码效率更高. 使用策略模式计算奖金 现在要实现这样一个东西,年终奖是根据员工的工资基数和年底绩效情况来发放的.例如,绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,而绩效为B的人年终奖是2倍工资.假设财务部要求我们提供一段代码,来方便他们计算员工的年终奖. 思路一:创建一个函数,接收两个参数,

javascript设计模式与开发实践 阅读笔记(1)

动态类型语言和静态类型语言的区别 根据数据类型的区别划分,静态语言在编译时已经确定变量的类型,动态语言在程序运行时,变量被赋予某个值之后,才具有某种类型. 静态语言在实际开发中为什么比动态语言繁琐 静态语言在编译时要进行类型检测,也就是说函数之类只能定好接收什么类型的变量.为了实现多态,可能的取值须放在一个类里面,函数接受这个类,而具体的变量则继承这个类的类型. 动态语言则不需要这么繁琐,因为他没有严格的类型检测,不过这样也会带来一些莫名其妙的问题.各有优缺点. 何为多态 接收不同参数,执行结果