js 命令模式 组合模式
* 基本宏命令
var closeDoorCommand = {
execute: function() {
console.log("Closing the door...");
}
};
var openPcCommand = {
execute: function() {
console.log("Opening the PC...");
}
};
var launchQQCommand = {
execute: function() {
console.log("launching QQ...");
}
};
var MacroCommand = function() {
return {
commandsList: [],
add: function(command) {
this.commandsList.push(command);
},
execute: function() {
for (var i = 0, command; command = this.commandsList[i]; i++) {
command.execute();
}
}
}
};
var macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(launchQQCommand);
macroCommand.execute();
// Closing the door...
// Opening the PC...
// launching QQ...
* 树形宏命令
<html> <head>
<meta charset="UTF-8">
<title>macro command</title>
</head> <body>
<button id="button">Press me</button>
<script>
var MacroCommand = function() {
return {
commandsList: [],
add: function(command) {
this.commandsList.push(command);
},
execute: function() {
for (var i = 0, command; command = this.commandsList[i]; i++) {
command.execute();
}
}
}
};
// 打开空调
var openAcCommand = {
execute: function() {
console.log("Opening the Air conditioner...");
}
};
// 打开电视和音响
var openTvCommand = {
execute: function() {
console.log("Opening the TV...");
},
add: function() {
throw new Error('Cannot add child node to leaf object');
}
};
var openStereoCommand = {
execute: function() {
console.log("Opening the stereo...");
}
};
var macroCommand1 = MacroCommand(); macroCommand1.add(openTvCommand);
macroCommand1.add(openStereoCommand); // 关门、开电脑、登陆qq
var closeDoorCommand = {
execute: function() {
console.log("Closing the door...");
}
};
var openPcCommand = {
execute: function() {
console.log("Opening the PC...");
}
};
var launchQQCommand = {
execute: function() {
console.log("launching QQ...");
}
};
var macroCommand2 = MacroCommand(); macroCommand2.add(closeDoorCommand);
macroCommand2.add(openPcCommand);
macroCommand2.add(launchQQCommand); // 现在把所有的命令组合成一个超级命令
var macroCommand = MacroCommand();
macroCommand.add(openAcCommand);
macroCommand.add(macroCommand1);
macroCommand.add(macroCommand2); // 绑定到遥控器
var setCommand = (function(command) {
document.getElementById("button").onclick = function() {
command.execute();
}
})(macroCommand); // openTvCommand.add(macroCommand); // Uncaught Error:
</script>
</body> </html>
运行结果:
* 扫描文件夹
/********** Folder **************/
function Folder(name) {
this.name = name;
this.files = [];
} Folder.prototype.add = function(file) {
this.files.push(file);
} Folder.prototype.scan = function() {
console.log("开始扫描文件夹: " +this.name);
for (var i = 0, file, files = this.files; file = files[i]; i++) {
file.scan();
}
} /********** File **************/
function File(name) {
this.name = name;
} File.prototype.add = function() {
throw new Error("文件下面不能再添加文件");
} File.prototype.scan = function() {
console.log("开始扫描文件: " +this.name);
} var folder = new Folder('学习资料');
var folder1 = new Folder('javascript');
var folder2 = new Folder('jQuery'); var file1 = new File('javascript设计模式与开发实践');
var file2 = new File('精通jQuery');
var file3 = new File('重构与模式'); folder1.add(file1);
folder2.add(file2); folder.add(folder1);
folder.add(folder2);
folder.add(file3); var folder3 = new Folder('Nodejs');
var file4 = new File('深入浅出Node.js');
folder3.add(file4); var file5 = new File('javascript语言精髓与编程实践');
folder.add(folder3);
folder.add(file5); folder.scan();
/*
开始扫描文件夹: 学习资料
开始扫描文件夹: javascript
开始扫描文件: javascript设计模式与开发实践
开始扫描文件夹: jQuery
开始扫描文件: 精通jQuery
开始扫描文件: 重构与模式
开始扫描文件夹: Nodejs
开始扫描文件: 深入浅出Node.js
开始扫描文件: javascript语言精髓与编程实践
*/
* 引用父对象
/********** Folder **************/
function Folder(name) {
this.name = name;
this.parent = null; // add attribute this.parent
this.files = [];
} Folder.prototype.add = function(file) {
file.parent = this; // set parent object
this.files.push(file);
} Folder.prototype.scan = function() {
console.log("开始扫描文件夹: " +this.name);
for (var i = 0, file, files = this.files; file = files[i]; i++) {
file.scan();
}
} Folder.prototype.remove = function() {
if (!this.parent) { // root node or free node
return;
}
for (var files = this.parent.files, i = files.length -1; 0 <= i; i--) {
var file = files[i];
if (file === this) {
files.splice(i, 1);
}
}
} /********** File **************/
function File(name) {
this.name = name;
} File.prototype.add = function() {
throw new Error("文件下面不能再添加文件");
} File.prototype.scan = function() {
console.log("开始扫描文件: " +this.name);
} File.prototype.remove = function() {
if (!this.parent) { // root node or free node
return;
}
for (var files = this.parent.files, i = files.length -1; 0 <= i; i--) {
var file = files[i];
if (file === this) {
files.splice(i, 1);
}
}
} var folder = new Folder('学习资料');
var folder1 = new Folder('javascript'); var file1 = new File('深入浅出Node.js'); folder1.add(new File('javascript语言精髓与编程实践'));
folder.add(folder1);
folder.add(file1); folder1.remove();
folder.scan();
js 命令模式 组合模式的更多相关文章
- JS设计模式——9.组合模式
组合模式概述 组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为. 它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所 ...
- js中的组合模式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Head First 设计模式 --9 迭代器模式 组合模式
迭代器模式:提供一种方法书序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 用到的设计原则:1.封装变化2.多用组合,少用继承|3.针对接口编程,不针对实现编程4.松耦合5.对扩展开放,对修改 ...
- java设计模式--结构型模式--组合模式
什么是组合模式,这个有待研究,个人觉得是各类组合而形成的一种结构吧. 组合模式: 组合模式 概述 将对象组合成树形结构以表示"部分-整体"的层次结构."Composite ...
- 《Head First 设计模式》学习笔记——迭代模式 + 组合模式
迭代模式设置共生死亡,一般来说.我们只是想实现一个集,我们需要的同时提供这个集合的迭代器,喜欢java中间Collection.List.Set.Map等,这些集合都有自己的迭代器.假如我们要实现一个 ...
- Composite模式 组合模式
Android的ViewGroup 和 View 的关系,即是采用组合模式 1. 概述 在数据结构里面,树结构是很重要,我们可以把树的结构应用到设计模式里面. 例子1:就是多级树形菜单. 例子2:文件 ...
- 轻松掌握：JavaScript组合模式
组合模式 组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基 ...
- js---26组合模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- c#设计模式-组合模式
在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...
随机推荐
- NOIP 模拟 $21\; \rm Game$
题解 考试的时候遇到了这个题,没多想,直接打了优先队列,但没想到分差竟然不是绝对值,自闭了. 正解: 值域很小,所以我们开个桶,维护当前最大值. 如果新加入的值大于最大值,那么它肯定直接被下一个人选走 ...
- uniapp封装小程序雷达图组件实现
效果图: view <canvas id="radar-canvas" class="radar-canvas" type="2d"& ...
- [转]C# 互操作性入门系列(四)：在C# 中调用COM组件
传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...
- jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- Go并发控制--WaitGroup篇
目录 1. 前言 2. 使用WaitGroup控制 2.1 使用场景 2.2 信号量 1.3 WaitGroup 数据结构 2.3.1 Add () 方法 2.3.2 Wait() 2.3.3 Don ...
- 收下这7款插件，让你在使用 Vite 的时候如虎添翼
相信已经有不少小伙伴已经开始用 Vue3 做开发了,也一定使用上 Vite 了,而我今天要介绍的这几款插件,能让你在使用 Vite 做开发时如虎添翼. vite-plugin-restart 通过监听 ...
- leetcode 位运算异或
1. 只出现一次的数字(136) 异或的性质总结: 相异为1,相同为0: a ^ a = 0; 0 ^ a = a; 如果 a ^ b = c 成立,那么a ^ c = b 与 b ^ c = a 均 ...
- noip模拟17
\(\color{white}{\mathbb{霞光划破暗淡天际,月影彷徨,鸡鸣仿佛,冀之以继往开来,名之以:黎明}}\) 今天似乎取得了有史以来最好的成绩~ 前两名都 A 掉了 \(t3\),然鹅 ...
- Codeforces 1365D Solve The Maze
### 题目大意: 在一个 $n * m$ 的矩阵中,有空地.坏人.好人和墙.你可以将空地变成墙来堵住坏人.$(n, m)$为出口,是否存在一个方案使得矩阵中所有好人能够走到出口,而所有坏人不能通过出 ...
- （三、四）Superset 1.3图表篇——透视表-Pivot Table
本系列文章基于Superset 1.3.0版本.1.3.0版本目前支持分布,趋势,地理等等类型共59张图表.本次1.3版本的更新图表有了一些新的变化,而之前也一直没有做过非常细致的图表教程. 而且目前 ...