Fork me on GitHub

js设计模式-组合模式

组合模式的基础

定义:组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。
作用:组合模式让你可以优化处理递归或分级数据结构。
使用场景:系统目录结构、网站导航结构、文件扫描、DOM的机制,一个DOM节点可以包含子节点,不管是父节点还是子节点都有添加、删除、遍历子节点的通用功能。
该模式由两部分构成:
1.子对象(Leaf):组成组合对象的最基本对象。
2.组合对象(Composite):由子对象组合起来的复杂对象。

组合模式的例子

文件扫描

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 定义组合对象(文件夹)
let Folder = function( name ){
this.name = name;
this.files = [];
};
Folder.prototype.add = function( file ){
this.files.push( file );
};
Folder.prototype.scan = function(){
console.log('开始文件扫描:' + this.name);
for( let i = 0, file, files = this.files; file = files[i++]; ){
file.scan();
}
};

//定义叶子对象(文件)
let File = function( name ){
this.name = name;
};
File.prototype.add = function(){
throw new Error('文件下面不能再添加文件');
};
File.prototype.scan = function(){
console.log('开始扫瞄:' + this.name);
};

let folder = new Folder('前端学习');
let folder1 = new Folder('JS学习');
let folder2 = new Folder('JQ学习');

let file1 = new File('JS设计模式');
let file2 = new File('JQ实战');
let file3 = new File('前端性能');

folder1.add(file1);
folder2.add(file2);
folder.add(folder1);
folder.add(folder2);
folder.add(file3);
folder.scan();

// 输出
开始文件扫描:前端学习
开始文件扫描:JS学习
开始扫瞄:JS设计模式
开始文件扫描:JQ学习
开始扫瞄:JQ实战
开始扫瞄:前端性能

PS:父类和子类必须具有相同的接口(方法),只不过它们相同的方法具有的功能不相同,例如父类的实例具有 add 方法作用是,可以添加文件夹 或者 文件。子类的实例具有 add 方法则不能添加文件夹 或者 文件,却抛出一个错误(子类重写父类的方法)。

参考文档:
0521组合模式
深入理解JavaScript系列(40):设计模式之组合模式

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here