* 基本宏命令

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. AlexNet论文总结

    论文链接:https://papers.nips.cc/paper/2012/file/c399862d3b9d6b76c8436e924a68c45b-Paper.pdf Q1:解决了什么? 目前主 ...

  2. BZOJ 4826 影魔

    本题可以采用主席树的在线做法,只不过常数会 \(super\) 大. 和其他题解差不多,我们先要求出第 \(i\) 个数的 \(l_i\) 和 \(r_i\) ,其中 \(l_i\) 表示左边第一个比 ...

  3. Seata–分布式事务

    10.1 分布式事务基础 10.1.1 事务 事务指的就是一个操作单元,在这个操作单元中的所有操作最终要保持一致的行为,要么所有操作都成功,要么所有的操作都被撤销.简单地说,事务提供一种"要 ...

  4. springmvc学习日志二

    一.当接受的参数为日期类型时 1.建立jsp页面,向Controller类传入参数 1.1当传入的参数为单个时 <body> <form action="user/toDa ...

  5. 这样设计 Java 异常更优雅

    转自:lrwinx.github.io/2016/04/28/如何优雅的设计java异常/ 导语 异常处理是程序开发中必不可少操作之一,但如何正确优雅的对异常进行处理确是一门学问,笔者根据自己的开发经 ...

  6. ant的javac任务的相关属性配置

    任务和javac命令是相似,它编译两种类型的Java文件1)没有被编译的java文件2)曾经编译过,但是class文件版本和当前对应的java文件版本不匹配的java文件. 1)javac命令支持的参 ...

  7. MVVM框架三巨头之Vue的前世今生。

    前端有三宝,Angular,Vue,React.目前这三大主流JS框架已经成三分之势.其中的React框架是由脸书开发的,今天我们就来聊一聊VueJS的前世今生. 前世 在2013年的js开发者大会上 ...

  8. 10个最酷的Linux单行命令

    下面是来自  Commandlinefu 网站由用户投票决出的 10 个最酷的 Linux 单行命令,希望对你有用. sudo !! 以 root 帐户执行上一条命令. python -m Simpl ...

  9. 剑指offer 计划1（栈与队列）---java

    1.1.题目1 剑指 Offer 09. 用两个栈实现队列 1.2.解法 解法如题目所说.定义两个栈.这里假设第一个栈为a,第二个栈为b. 实现两个函数增加尾和删除头. 增加即直接push入第一个栈. ...

  10. vue 根据身份证计算出出生日期和判断性别

    //获取生日和性别     getBirth(idCard) {              var birthday = "";       if(idCard != null & ...