JS设计模式-观察者模式

Markxu 发布于2019-08-21 16:54 / 2134人阅读

摘要：观察者又称发布订阅模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

观察者（又称发布订阅）模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

原文链接

应用场景

当用户在网页执行一些操作（如点击）后就需要执行一些预定的事件（如表单提交、跳转页面）

优点：在发布者和订阅者间耦合性降低

缺点：弱化了对象间的关系，不利于代码的维护和理解

实现思路

确定发布者

定义发布者缓存列表，存储回调函数通知订阅者

发布消息依次执行缓存列表回调函数

简单实现

let event = {};
event.list = [];
//增加订阅者
event.listen = function(fn){
    event.list.push(fn);
}
//发布消息
event.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}

let click = function(){
    console.log("event：click");
}

let hover = function(){
    console.log("event：hover");
}

event.listen(click);
event.listen(hover);
event.trigger();
//打印：
‘event：click’
"event：hover"

完善观察者模式

let Event = (function(){
    var list = {},
        listen,
        trigger,
        remove;
    listen = function(key,fn){
        list[key] = list[key]||[];
        list[key].push(fn);
    };
    trigger = function(){
        var key = Array.prototype.shift.call(arguments),
            fns = list[key];
        if(!fns || fns.length === 0) {
            return false;
        }
        for(var i = 0, fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    };
    remove = function(key,fn){
        var fns = list[key];
        if(!fns) {
            return false;
        }
        if(!fn) {
            fns && (fns.length = 0);
        }else {
            for(var i = fns.length - 1; i >= 0; i--){
                var _fn = fns[i];
                if(_fn === fn) {
                    fns.splice(i,1);
                }
            }
        }
    };
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen("click", function(type) {
    console.log("event: " + type +" click"); 
});

Event.trigger("click" , "button");
//打印
"event: button click"

观察者模式可以用于模块间通讯，订阅用户的事件、状态，触发执行相应的逻辑处理。

GPU云服务器云服务器 js观察者模式视频设计模式观察者模式观察者模式 php观察者模式

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

转载请注明本文地址：https://www.ucloud.cn/yun/88894.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设计模式 --- 发布订阅模式(观察者模式)

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

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

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

baishancloud 2019-08-23 16:53 评论0 收藏0