javascript设计模式-观察者和命令

news/2024/12/24 9:42:54/

观察者

是一种管理人与任务之间的关系的得力工具,实质就是你可以对程序中某个对象的状态进行观察,并且在其发生改变时能够得到通知。一般有两种实现方式推或拉,在这个过程中各方的职责如下:

  • 订阅者可以订阅和退订,他们还要接收,并且可以在由人投送和自己收取之间进行选择;
  • 发布者负责投关,他们可以在送出和由人取之间进行选择;
function Publisher() {this.subscribers = [];
}
//投送方法
Publisher.prototype.deliver = function(data) {this.subscribers.forEach(function(fn) {fn(data);});return this;
};
//订阅方法
Function.prototype.subscribe = function(publisher) {var that = this;var alreadyExists = publisher.subscribers.some(function(el) {if ( el === that ) {return;}});if ( !alreadyExists ) {publisher.subscribers.push(this);}return this;
};
//退订方法
Function.prototype.unsubscribe = function(publisher) {var that = this;publisher.subscribers = publisher.subscribers.filter(function(el) {if ( el !== that ) {return el;}});return this;
};
var publisherObject = new Publisher;
var observerObject = function(data) {// process dataconsole.log(data);// unsubscribe from this publisherarguments.callee.unsubscribe(publisherObject);
};
observerObject.subscribe(publisherObject);
动画
// Publisher API
var Animation = function(o) {this.onStart = new Publisher,//三个可监视时刻this.onComplete = new Publisher,this.onTween = new Publisher;
};
Animation.method('fly', function() {// begin animationthis.onStart.deliver();for ( ... ) { // loop through frames// deliver frame numberthis.onTween.deliver(i); }// end animationthis.onComplete.deliver();});// setup an account with the animation manager
var Superman = new Animation({...config properties...});// Begin implementing subscribers
var putOnCape = function(i) { };
var takeOffCape = function(i) { };putOnCape.subscribe(Superman.onStart);
takeOffCape.subscribe(Superman.onComplete);// fly can be called anywhere
Superman.fly();
// for instance:
addEvent(element, 'click', function() {Superman.fly();
});
事件监听器
var element = document.getElementById(‘a’);
var fn1 = function(e) {// handle click
};
var fn2 = function(e) {// do other stuff with click
};addEvent(element, ‘click’, fn1);
addEvent(element, ‘click’, fn2);

命令

是一种封装方法调用的方式,命令模式与普通函数不同。它可以用来对方法调用进行参数化处理和传送,经这样处理过的方法调用可以在任何需要的时候执行。它也可以用来消除调用操作的对象和实现操作的对象之间的耦合。

它在创建用户界面时非常有用,特别是在需要不受限制的取消操作的时候。它还可以用来替代回调函数 ,因为它能够提高在对象间传递的操作的模块化程度。

这种模式适合JSP中的ACTION的实现,在一个ACITON中封装多个命令,如果只封装一个就没有多大意思了。

/* AdCommand interface. */
var AdCommand = new Interface('AdCommand', ['execute']);/* StopAd command class. */
var StopAd = function(adObject) { // implements AdCommandthis.ad = adObject;
};
StopAd.prototype.execute = function() {this.ad.stop();
};/* StartAd command class. */
var StartAd = function(adObject) { // implements AdCommandthis.ad = adObject;
};
StartAd.prototype.execute = function() {this.ad.start();
};/* Useage. 这种方式后,就把按钮和他需要调用的操作之间解耦了*/
var startCommand = new StartAd(action);
var stopCommand = new StopAd(action);
new UiButton('Start ', startCommand);
new UiButton('Stop ', stopCommand);
/*匿名函数的写法,省略了很多代码*/
function makeStart(adObject) {return function() { adObject.start();};
}
function makeStop(adObject) {return function() {adObject.stop();};
}/* Implementation code. */
var startCommand = makeStart(ads[i]);
var stopCommand = makeStop(ads[i]);
startCommand(); 
stopCommand();

多数命令模式都由以下几种角色组成,客户创建命令,调用者执行命令,接收者在命令执行时执行相应的操作。

接口格式

var Command = new Interface('Command', ['execute']);
Interface.ensureImplements(someCommand, Command);
someCommand.execute();
if(typeof someCommand != 'function') {throw new Error('Command isn't a function');
}

命令对象格式

/* SimpleCommand, a loosely coupled, simple command class. */
var SimpleCommand = function(receiver) { // implements Commandthis.receiver = receiver;
};
SimpleCommand.prototype.execute = function() {this.receiver.action();
};/* ComplexCommand, a tightly coupled, complex command class. */
var ComplexCommand = function() { // implements Commandthis.logger = new Logger();this.xhrHandler = XhrManager.createXhrHandler();this.parameters = {};
};
ComplexCommand.prototype = {setParameter: function(key, value) {this.parameters[key] = value;},execute: function() {this.logger.log('Executing command');var postArray = [];for(var key in this.parameters) {postArray.push(key + '=' + this.parameters[key]);}var postString = postArray.join('&');this.xhrHandler.request('POST', 'script.php', function() {}, postString);}
};/* GreyAreaCommand, somewhere between simple and complex. */
var GreyAreaCommand = function(recevier) { // implements Commandthis.logger = new Logger();this.receiver = receiver;
};
GreyAreaCommand.prototype.execute = function() {this.logger.log('Executing command');this.receiver.prepareAction();this.receiver.action();
};var openCommand = new MenuCommand(fileActions.open);
var openMenuItem = new MenuItem('Open', openCommand);
fileMenu.add(openMenuItem);

取消操作

这种操作其实就是把堆栈和excute相反的操作结合使用。

var MoveUp = function(cursor) { // implements ReversibleCommandthis.cursor = cursor;
};
MoveUp.prototype = {execute: function() {cursor.move(0, -10);},undo: function() {cursor.move(0, 10);    }
};


http://www.ppmy.cn/news/1330864.html

相关文章

白盒测试和黑盒测试的区别

黑盒测试 等价类划分 白盒测试 灰盒测试

GBASE南大通用数据库GBase 8s常见问题讲堂 --查看表中数据量与表占用空间

本文摘自GBASE南大通用社区,by:wty,原文请点击:GBase 8s常见问题 -- 查看表中数据量与表占用空间|GBASE社区|天津南大通用数据技术股份有限公司|GBASE-致力于成为用户最信赖的数据库产品供应商 问题现象 systables系统表中的nro…

【GitHub项目推荐--开源2D 游戏引擎】【转载】

microStudio 是一个可在浏览器中运行的游戏引擎,它拥有一套精美、设计精良、全面的工具,可以非常轻松地帮助你创建 2D 游戏。 你可以在浏览器中访问 microStudio.dev 开始搭建你的游戏,当然你可以克隆现有项目或创建新游戏并开始编码&#x…

3、非数值型的分类变量

非数值型的分类变量 有很多非数字的数据,这里介绍如何使用它来进行机器学习。 在本教程中,您将了解什么是分类变量,以及处理此类数据的三种方法。 本课程所需数据集夸克网盘下载链接:https://pan.quark.cn/s/9b4e9a1246b2 提取码:uDzP 文章目录 1、简介2、三种方法的使用1…

架构篇23:作为架构师,我们必须掌握的CAP细节

文章目录 CAP 关键细节点ACIDBASE小结 理论的优点在于清晰简洁、易于理解,但缺点就是高度抽象化,省略了很多细节,导致在将理论应用到实践时,由于各种复杂情况,可能出现误解和偏差,CAP 理论也不例外。如果我…

Mermaid使用教程(绘制各种图)

Mermaid使用教程(绘制各种图) 文章目录 Mermaid使用教程(绘制各种图)简介饼状图简单的例子应用案例 序列图简单案例应用案例另一个应用案例 甘特图简单案例应用案例一个更为复杂的应用案例 Git图简单案例 总结 简介 本文将主要介…

uniapp 在static/index.html中添加全局样式

前言 略 在static/index.html中添加全局样式 <style>div {background-color: #ccc;} </style>static/index.html源码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-…

计算机网络-AAA原理概述

对于任何网络&#xff0c;用户管理都是最基本的安全管理要求之一&#xff0c;在华为设备管理中通过AAA框架进行认证、授权、计费实现安全验证。 一、AAA概述 AAA&#xff08;Authentication(认证), Authorization(授权), and Accounting(计费)&#xff09;是一种管理框架&#…