Skip to content

Commit 49e1af7

Browse files
WangXiaoyuggWangXiaoyugg
committed
组合模式
1 parent b33e6d7 commit 49e1af7

File tree

3 files changed

+311
-0
lines changed

3 files changed

+311
-0
lines changed

‎ten-chapter/group.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>group模式</title>
6+
</head>
7+
<body>
8+
<button id="btn">点我</button>
9+
<script>
10+
var MacroCommand = function () {
11+
return {
12+
commandList:[],
13+
add:function(command){
14+
this.commandList.push(command)
15+
},
16+
execute:function(){
17+
for(var i=0,command;command=this.commandList[i++];){
18+
command.execute()
19+
}
20+
}
21+
}
22+
}
23+
24+
var opneAcCommand = {
25+
execute:function(){
26+
console.log('打开空调')
27+
},
28+
add:function(){
29+
throw new new Error('叶子对象不能增加字节点')
30+
}
31+
}
32+
33+
/**电视和音响是连接在一起的，所以可以用一个宏命令来组合打开电视和打开音响的命令**/
34+
var openTvCommand = {
35+
execute:function(){
36+
console.log('打开电视')
37+
}
38+
}
39+
40+
var openSoundCommand = {
41+
execute:function(){
42+
console.log('打开音响')
43+
}
44+
}
45+
46+
var macroCommand1 = MacroCommand();
47+
48+
macroCommand1.add(openTvCommand);
49+
macroCommand1.add(openSoundCommand);
50+
51+
/**关门，打开电脑和打开登录QQ的命令**/
52+
var closeDoorCommand = {
53+
execute:function(){
54+
console.log('关门')
55+
}
56+
}
57+
58+
var openPcCommand = {
59+
execute:function(){
60+
console.log('开电脑')
61+
}
62+
}
63+
64+
var openQQCommand = {
65+
execute:function(){
66+
console.log('登录QQ')
67+
}
68+
}
69+
70+
var macroCommand2 = MacroCommand();
71+
72+
macroCommand2.add(closeDoorCommand);
73+
macroCommand2.add(openPcCommand);
74+
macroCommand2.add(openQQCommand);
75+
76+
/**现在把所有的命令组合成一个超级命令**/
77+
78+
var macroCommand = MacroCommand();
79+
macroCommand.add(opneAcCommand);
80+
macroCommand.add(macroCommand1);
81+
macroCommand.add(macroCommand2);
82+
83+
/**最后给遥控器绑定超级命令**/
84+
var setCommand = (function(command){
85+
document.getElementById('btn').onclick = function(){
86+
command.execute()
87+
}
88+
})(macroCommand);
89+
90+
91+
</script>
92+
</body>
93+
</html>

‎ten-chapter/group.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
//复习宏模式
2+
var ReadCommand = {
3+
execute:function () {
4+
console.log('读书')
5+
}
6+
}
7+
8+
var WriteCommand = {
9+
execute:function(){
10+
console.log('写文章')
11+
}
12+
}
13+
14+
var EatDinnerCommand = {
15+
execute:function(){
16+
console.log('吃饭了')
17+
}
18+
}
19+
20+
var MicroCommand = {
21+
commandList: [],
22+
add:function(command){
23+
this.commandList.push(command)
24+
},
25+
execute:function(){
26+
for(var i = 0,command;command=this.commandList[i++];){
27+
command.execute()
28+
}
29+
}
30+
};
31+
32+
// var macroCommand = MacroCommand();
33+
34+
MicroCommand.add(ReadCommand);
35+
MicroCommand.add(WriteCommand);
36+
MicroCommand.add(EatDinnerCommand);
37+
38+
MicroCommand.execute();
39+
40+
/**函数返回的宏模式**/
41+
var ReadCommand = {
42+
execute:function () {
43+
console.log('读书')
44+
}
45+
}
46+
47+
var WriteCommand = {
48+
execute:function(){
49+
console.log('写文章')
50+
}
51+
}
52+
53+
var EatDinnerCommand = {
54+
execute:function(){
55+
console.log('吃饭了')
56+
}
57+
}
58+
59+
var MacroCommand = function() {
60+
return {
61+
commandList: [],
62+
add:function(command){
63+
this.commandList.push(command)
64+
},
65+
execute:function(){
66+
for(var i = 0,command;command=this.commandList[i++];){
67+
command.execute()
68+
}
69+
}
70+
}
71+
72+
};
73+
74+
var macroCommand = MacroCommand();
75+
76+
macroCommand.add(ReadCommand);
77+
macroCommand.add(WriteCommand);
78+
macroCommand.add(EatDinnerCommand);
79+
80+
macroCommand.execute();
81+
82+
/** 组合模式的用途**/
83+
/*
84+
*更强大的宏命令
85+
*打开空调
86+
*打开电视和影响
87+
*关门 开电脑 登录QQ
88+
*/
89+
90+
91+
// 组合模式最大的优点在于可以一致地对待组合对象和基本对象
92+
93+
//组合模式的注意事项
94+
/**
95+
1. 组合模式不是父子关系 是聚合关系 HAS-A
96+
2. 对叶子对象操作的一致性
97+
3. 双向映射关系
98+
4. 用职责链模式提高组合模式的性能
99+
**/
100+
101+
//删除引用父亲节点
102+
103+
//组合模式的使用场景
104+
/*
105+
1. 对象的部分 - 整体层次结构
106+
2. 客户希望统一对待书中的所有对象
107+
*/
108+
109+
//组合模式的缺陷
110+
/*
111+
1. 每个对象差不多，差别只有在运行时才显现出来 ，可读性差
112+
2. 创建过多的对象，占用内存过大，耗性能
113+
*/

‎ten-chapter/scanFolder.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>扫描文件夹</title>
6+
</head>
7+
<body>
8+
<script>
9+
10+
var Floder = function (name) {
11+
this.name = name;
12+
this.files = [];//存储文件
13+
this.parent = null ; //引用父节点
14+
}
15+
16+
Floder.prototype.add = function(file){
17+
file.parent = this; //设置父对象
18+
this.files.push(file)
19+
}
20+
21+
Floder.prototype.scan = function(){
22+
console.log('考试扫描文件夹 '+ this.name);
23+
for(var i=0,file,files=this.files;file = files[i++];){
24+
file.scan();
25+
}
26+
}
27+
28+
Floder.prototype.remove = function(){
29+
if(!this.parent){ //根节点或者树外的游离节点
30+
return;
31+
}
32+
for(var files = this.parent.files,l = files.length-1;l>=0;l--){
33+
var file = files[l]
34+
if(file === this){
35+
files.splice(l,1)
36+
}
37+
}
38+
}
39+
40+
41+
42+
var File = function(name){
43+
this.name = name;
44+
this.parent = null;
45+
}
46+
47+
File.prototype.add = function(){
48+
throw new Error('文件下面不能在添加文件')
49+
}
50+
51+
File.prototype.scan = function(){
52+
console.log('开始扫描文件：' + this.name);
53+
}
54+
55+
File.prototype.remove = function(){
56+
if(!this.parent){
57+
return;
58+
}
59+
for(var files=this.parent.files,l=files.length - 1; l>=0;l--){
60+
var file = files[l]
61+
if(file === this){
62+
files.splice(l,1)
63+
}
64+
}
65+
66+
}
67+
//demo2
68+
var folder = new Floder('学习资料')
69+
var folder1 = new Floder('javacript')
70+
var file1 = new File('精通jQuery')
71+
folder1.add(new File('javasript 高级程序设计'))
72+
folder.add(folder1)
73+
folder.add(file1);
74+
folder1.remove();
75+
folder.scan();
76+
77+
// demo1
78+
// var folder = new Floder('学习资料')
79+
// var folder1 = new Floder('javacript')
80+
// var folder2 = new Floder('jQuery')
81+
82+
// var file3 = new File('javacript 设计模式')
83+
// var file1 = new File('精通jQuery')
84+
// var file2 = new File('重构和模式')
85+
86+
// folder1.add(file1);
87+
// folder2.add(file2);
88+
89+
// folder.add(folder1)
90+
// folder.add(folder2)
91+
// folder.add(file3);
92+
93+
// //需求是把移动硬盘里的文件和文件夹都复制到这棵树中
94+
// var folder3 = new Floder('Nodejs')
95+
// var file4 = new File('nodejs权威指南')
96+
// folder3.add(file4);
97+
// var file5 = new File('javascript 语言精髓和编程实践')
98+
// folder.add(folder3)
99+
// folder.add(file5);
100+
101+
// folder.scan();
102+
103+
</script>
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)