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

这篇具有很好参考价值的文章主要介绍了javascript设计模式-观察者和命令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

观察者

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

  • 订阅者可以订阅和退订,他们还要接收,并且可以在由人投送和自己收取之间进行选择;
  • 发布者负责投关,他们可以在送出和由人取之间进行选择;
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 data
    console.log(data);
    // unsubscribe from this publisher
    arguments.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 animation
    this.onStart.deliver();
    for ( ... ) { // loop through frames
      // deliver frame number
      this.onTween.deliver(i); 
    }
    // end animation
    this.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 AdCommand
    this.ad = adObject;
};
StopAd.prototype.execute = function() {
    this.ad.stop();
};

/* StartAd command class. */
var StartAd = function(adObject) { // implements AdCommand
    this.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 Command
  this.receiver = receiver;
};
SimpleCommand.prototype.execute = function() {
  this.receiver.action();
};

/* ComplexCommand, a tightly coupled, complex command class. */
var ComplexCommand = function() { // implements Command
  this.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 Command
  this.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相反的操作结合使用。文章来源地址https://www.toymoban.com/news/detail-817675.html

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

到了这里,关于javascript设计模式-观察者和命令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 设计模式---观察者模式

    1,概念         属于行为模式的一种,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一对象主题对象,这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 在观察者模式中有如下角色: Subject:抽象主题(抽象被观察者),

    2024年02月15日
    浏览(65)
  • 设计模式:观察者模式

    定义 观察者模式(Observer Pattern)是一种行为设计模式,允许一个对象(称为“主题”或“可观察对象”)维护一组依赖于它的对象(称为“观察者”),当主题的状态发生变化时,会自动通知所有观察者对象。 应用场景 观察者模式适用于以下场景: 联动反应 :当一个对象

    2024年04月08日
    浏览(59)
  • 重温设计模式 --- 观察者模式

    观察者模式 是一种行为型设计模式,它允许对象之间建立一种一对多的关系,使得当一个对象状态改变时,所有依赖它的对象都能够自动得到通知并更新自己的状态。该模式可以帮助我们实现松耦合的系统,以便更好地应对变化和扩展。 在观察者模式中,有两个角色: 观察

    2024年02月13日
    浏览(59)
  • 设计模式(11)观察者模式

    一、概述: 1、定义:观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己。 2、结构图: 实现  调用

    2024年02月11日
    浏览(53)
  • 设计模式——14. 观察者模式

    观察者模式(Observer Pattern)是一种行为型设计模式,用于定义对象之间的一对多依赖关系,使得当一个对象的状态发生改变时,所有依赖于它的对象都能够自动收到通知并更新自己的状态,以保持与被观察对象的同步。观察者模式也被称为发布-订阅模式。 观察者模式包含以

    2024年02月07日
    浏览(45)
  • 设计模式之观察者模式

    可以帮你的对象知悉现况,不会错过该对象感兴趣的事。对象甚至在运行时可决定是否要继续被通知。 从报纸和杂志的订阅说起: 报社的业务就是出版报纸 向某家报社订阅报纸,只要他们有新报纸出版,就会给你送来。只要你是他们的订户,你就会一直收到新报纸。 当你不

    2024年01月24日
    浏览(54)
  • 观察者设计模式

    行为型模式(Behavioral Patterns):这类模式主要关注对象之间的通信。它们 分别是: 职责链模式(Chain of Responsibility) 命令模式(Command) 解释器模式(Interpreter) 迭代器模式(Iterator) 中介者模式(Mediator) 备忘录模式(Memento) 观察者模式(Observer) 状态模式(State) 策略

    2024年01月24日
    浏览(51)
  • 设计模式-观察者

    观察者模式是一种广泛应用于软件开发中的行为设计模式,尤其是在面向对象编程(OOP)中。该模式定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新 在观察者模式中,存在两个主要角色: 主题(Subject) 或 被

    2024年01月22日
    浏览(48)
  • 设计模式:行为型模式 - 观察者模式

    定义: 又被称为发布-订阅(Publish/Subscribe)模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 在观察者模式中有如下角色: Subject:抽象主题(抽象被观察

    2023年04月22日
    浏览(97)
  • 设计模式之二:观察者模式

    假定我们需要为Weather-O-Rama公司建立一个气象站系统,除已有的WeatherData有数据源类,还需要更新三个布告板的显示:目前状况(温度、湿度、气压)、气象统计和天气预报。  1 以下是一个可能的实现 上述实现有以下问题存在: 针对具体实现编程,而非针对接口(currentCon

    2024年02月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包