* 基本宏命令

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. idea中导包出现import org.apach.*，提交代码老出现冲突，不想使用.*的设置

    打开设置>Editor>Code Style>Java>Scheme Default>Imports ① 将Class count to use import with ...

  2. .NET Core 微服务学习与实践系列文章目录索引（2019版）

    参考网址: https://archy.blog.csdn.net/article/details/103659692 2018年,我开始学习和实践.NET Core,并开始了微服务的学习,以及通过各 ...

  3. C++ 矩形交集和并集的面积-离散化

    //离散化,x,y坐标分别按从小到大排序 //离散化 //1.首先分离出所有的横坐标和纵坐标分别按升序存入数组X[ ]和Y[ ]中. //2. 设数组XY[ ][ ].对于每个矩形(x1,y1)(x2 ...

  4. SSM：Mybatis中引入通用mapper

    如果你是SSM项目引入通用mapper记得要引入hibernate中的一个hibernate-jpa-2.1-api-1.0.0.Final.jar包(注意必须要Mybatis整合Spring噢,其实 ...

  5. Hutool中那些常用的工具类和方法

    Hutool中那些常用的工具类和方法 Hutool是一个Java工具包,它帮助我们简化每一行代码,避免重复造轮子.如果你有需要用到某些工具方法的时候,不妨在Hutool里面找找,可能就有.本文将对Hu ...

  6. OpenCV 生成矩形mask

    生成mask的一种操作 cv::Mat mask = cv::Mat::zeros(300, 300, CV_8UC1); mask(cv::Rect(100,150,100, 50)) = 255; ...

  7. Swift-Button 的 highlighted（高亮）

    摘要 在学习小程序时,看到小程序中的一个样式属性 hover-class,通过设置这个属性,就可以给点击的控件添加一个高亮效果.所以也就萌生了在 Swift 也实现一个类似的功能的想法,开干. 下面代 ...

  8. uniapp 封装 request 并 配置跨域，（ 本地 + 线上 + 封装 ）

    找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. &qu ...

  9. jvm学习笔记：栈帧

    栈帧内的数据结构 局部变量表(Local Variables):记录非静态方法的this指针.方法参数.局部变量 操作数栈(Operand Stack):用于计算的栈结构 动态链接(Dynamic L ...

  10. npm配置镜像及nrm使用

    ​ 淘宝npm镜像 搜索地址:http://npm.taobao.org/ registry地址:http://registry.npm.taobao.org/ cnpmjs镜像 搜索地址:http: ...