* 基本宏命令

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 命令模式 组合模式的更多相关文章

  1. JS设计模式——9.组合模式

    组合模式概述 组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为. 它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所 ...

  2. js中的组合模式

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Head First 设计模式 --9 迭代器模式 组合模式

    迭代器模式:提供一种方法书序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 用到的设计原则:1.封装变化2.多用组合,少用继承|3.针对接口编程,不针对实现编程4.松耦合5.对扩展开放,对修改 ...

  4. java设计模式--结构型模式--组合模式

    什么是组合模式,这个有待研究,个人觉得是各类组合而形成的一种结构吧. 组合模式: 组合模式 概述 将对象组合成树形结构以表示"部分-整体"的层次结构."Composite ...

  5. 《Head First 设计模式》学习笔记——迭代模式 + 组合模式

    迭代模式设置共生死亡,一般来说.我们只是想实现一个集,我们需要的同时提供这个集合的迭代器,喜欢java中间Collection.List.Set.Map等,这些集合都有自己的迭代器.假如我们要实现一个 ...

  6. Composite模式 组合模式

    Android的ViewGroup 和 View 的关系,即是采用组合模式 1. 概述 在数据结构里面,树结构是很重要,我们可以把树的结构应用到设计模式里面. 例子1:就是多级树形菜单. 例子2:文件 ...

  7. 轻松掌握：JavaScript组合模式

    组合模式 组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基 ...

  8. js---26组合模式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

随机推荐

  1. STM32—TIMx输出PWM信号驱动MG996R舵机

    文章目录 一.前言 二.MG996R舵机简介 三.TIM定时器简介 四.通用定时器TIMx 1.TIMx主要功能 2.TIMx框图 3.计数单元 4.时钟选择 5.输出比较PWM 五.TIM3输出双路 ...

  2. 模拟7 T3 寿司题解

    题目要求可以转化成一个01串,让通过最少次数把序列变成中间是0,两端是1: 首先我们可以考虑一些性质: 最优解一定是每次操作都把0和1交换 这个很好理解,如果你交换同一种东西,跟没换一样 这个题卡就卡 ...

  3. SpringBoot获取请求的参数

    说明 SpringBoot 为我们封装了许多,简便的获取请求参数的方法! 1.获取无注解获取请求参数 请求地址:http://192.168.0.115:8080/myproject/test/noA ...

  4. javascript,html,正则表达式，邮箱密码验证

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  5. UWP AppConnection.

    https://www.cnblogs.com/manupstairs/p/14582794.html

  6. Contos 7.x 中Docker安装以及使用

    Docker是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中, 然 ...

  7. jQuery中的基本选择器（四、一）：* 、 . 、element(直接标签名)、 或者用逗号隔开跟多个

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 微信小程序学习笔记三 路由的基本使用

    小程序中路由的使用 1.1 页面路由 在小程序中, 所有页面的路由全部由框架进行管理 1.2 页面栈 框架以栈的形式维护了当前的所有页面, 当发生路由切换的时候, 页面栈的表现如下: 1.3 获取当前 ...

  9. Linux命令集锦之·字符截取命令

    时间:2018-11-15 记录:byzqy 字符截取命令: cut.printf.awk.sed cut $ cut [选项] 文件名 选项: -f 列号:提取第几列: -d 分隔符:按照指定分隔符 ...

  10. MutationObserver API

    1.概述 MutationObserver接口提供了监视对DOM树所做更改的能力.它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分. 但是,它与Mu ...