JS观察者模式

zacklee 发布于2019-08-26 11:36 / 1462人阅读

摘要：观察者模式观察者模式在的学习过程中很重要，尤其是最近几年框架的发展。观察者模式很好的体现了松耦合原则和单一职责原则。观察者模式由主体和观察者组成，主体负责发布事件，观察者通过订阅事件来观察主体。

观察者模式

观察者模式在JS的学习过程中很重要，尤其是最近几年MV*框架的发展。
观察者模式很好的体现了松耦合(Loose coupling)原则和单一职责原则。
观察者模式
它定义了对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。
观察者模式由主体和观察者组成，主体负责发布事件，观察者通过订阅事件来观察主体。
主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。

代码1：

function Emitter(){
    this._listerner={};//自定义事件名
}
Emitter.prototype.bind=function(eventName,handler){
//    var listenersArr=this._listerner[eventName]||[];
//    listenersArr.push(handler);
//    this._listerner[eventName]=listenersArr;        
    if(!this._listerner.hasOwnProperty(eventName)){
        this._listerner[eventName]=[];
    }
    this._listerner[eventName].push(handler);
}
Emitter.prototype.trigger=function(eventName){
    if (!this._listerner.hasOwnProperty(eventName)) {
        console.log("你没绑定这个事件");
        return;
    }
    var args = Array.prototype.slice.call(arguments, 1); ////args为获得除了eventName后面的参数(最后被用作注册事件的参数)
    //arguments并不是真正的数组对象，只是与数组类似而已，所以它并没有slice这个方法
    //Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象，让arguments具有slice()方法。
    //要是直接写arguments.slice(1)会报错
    this._listerner[eventName].forEach(function(callback){
        callback.call(this,args);//通过这种方法可以传参
    });
}
function handler1(){
    console.log("第一次绑定");
    //console.log(arguments);
    Array.prototype.forEach.call(arguments,function(item){//arguments.forEach(function(item))，arguments为上面trigger中调用它时传进来的参数
        console.log(item);
    })
}
function handler2(){
    console.log("第二次绑定");
}
function handler3(){
    console.log("第三次绑定");
}
var emitter=new Emitter();
emitter.bind("selfEvent",handler1);
emitter.bind("selfEvent",handler2);
emitter.bind("selfEvent2",handler3);
emitter.trigger("selfEvent",233333333);

代码2(下面这段来自stackoverflow)：

//model
function Book(name,isbn){
    this.name=name;
    this.isbn=isbn;
}
function BookCollection(books){
    this.books=books;
}
BookCollection.prototype.addBook=function(book){
    this.books.push(book);
    $.publish("book-added",book);
    return book;
}
BookCollection.prototype.removeBook=function(book){
    var removed;
    if(typeof book==="number"){
        removed=this.books.splice(book,1);
    }
    for(var i=0;i"+book.name+"

"); } return { init:function(){ $.subscribe("book-removed",removeBook); $.subscribe("book-added",addBook); } } }());

应用：
1) angularjs的双向数据绑定中，就涉及到了这个设计模式。
angularjs的双向数据绑定主要是利用脏检查来完成的。但是如何把一个model绑定到多个view就是利用观察者模式来做的。

2)es6中的Promise的实现过程也使用了观察者模式。

海外云主机云服务器 js观察者模式视频设计模式观察者模式观察者模式 php观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107217.html

JS设计模式之Obeserver（观察者）模式、Publish/Subscribe（发布/订阅）模式

摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式定义《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。《设计模...

荆兆峰 2019-08-26 13:37 评论0 收藏0
JS 观察者模式

摘要：使用观察者模式的好处支持简单的广播通信，自动通知所有已经订阅过的对象。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。 1. 介绍观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。使用...

mist14 2019-08-21 18:19 评论0 收藏0
JS 设计模式十三（观察者模式）

摘要：观察者模式对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。具体主题角色在具体主题内部状态改变时，给所有登记过的观察者发出通知。观察者模式对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。观察者要素 1.抽象主题(Subject)角色：把所有对观察者对象的引用保存在一个集合中，每个...

shleyZ 2019-08-19 18:24 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0
JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
js设计模式 --- 发布订阅模式(观察者模式)

摘要：由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。发布订阅模式发布订阅模式又叫观察者模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题...

EasonTyler 2019-08-22 14:52 评论0 收藏0