Javascript 设计模式学习之四 Observer(观察者)模式

最新推荐文章于 2024-11-11 10:25:06 发布

weixin_33735077

最新推荐文章于 2024-11-11 10:25:06 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签：设计模式 python javascript ViewUI

原文链接：https://my.oschina.net/u/2510955/blog/721903

本文介绍了观察者模式的基本概念及其在JavaScript中的实现方式。通过具体的代码示例，展示了如何定义目标对象与观察者对象，以及如何实现订阅、取消订阅和状态更新通知等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

什么是Observer(观察者)模式？

观察者模式在javascript中应用的比较广泛，流行的jQuery库中的event,eventHandler就是一个典型的观察着模式：一对多的依赖关系，一个subject(目标)如果发生了改变，它的observers(观察者)会被通知，并且状态也会更新

都有哪些角色？

subject (目标) (下面例子中的Click)

主要的职责有：

1 维护观察者列表

2 实现subscribe(订阅)和unsubscribe(取消订阅)接口，就是成为subject的观察者，或从观察列表中退出

3 当自己的状态改变时，通知观察者

Objserver(观察着)(下面例子中的clickHandler)

有一个函数签名，当subject变化时调用

例子：

'use strict';

// Click对象相当于Subject目标

function Click() {
    this.handlers = []; //observers
}

// 观察者订阅
Click.prototype.subscribe = function (fn) {
    this.handlers.push(fn);
}

// 观察者取消订阅
Click.prototype.unsubscribe = function (fn) {
    this.handlers = this.handlers.filter((item)=>{
       if(item !== fn){
           return item;
       }
    });
}

// 发送通知,状态改变了
Click.prototype.fire = function (o,thisObj) {
    let scope = thisObj;
    this.handlers.forEach((item)=> {
        item.call(scope,o);
    })
}

var log = (function() {
    var log = "";

    return {
        add: function(msg) { log += msg + "\n"; },
        show: function() { console.log(log); log = ""; }
    }
})();


function run() {

    // clickHandler是订阅的观察者
    var clickHandler = function (item) {
        log.add(`fired:${item}`);
    }

    var click = new Click();
    click.subscribe(clickHandler);
    click.fire('event #1');
    click.unsubscribe(clickHandler);
    click.fire('event #2');
    click.subscribe(clickHandler);
    click.fire('event #3');

    log.show();

}

run();

参考资料：http://www.dofactory.com/javascript/observer-design-pattern

转载于:https://my.oschina.net/u/2510955/blog/721903