JS设计模式-观察者模式

作者: bestvist | 来源:发表于2017-10-06 19:35 被阅读124次

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

应用场景

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

  • 优点:在发布者和订阅者间耦合性降低
  • 缺点:弱化了对象间的关系,不利于代码的维护和理解

实现思路

  • 确定发布者
  • 定义发布者缓存列表,存储回调函数通知订阅者
  • 发布消息依次执行缓存列表回调函数

简单实现

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'

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

相关文章

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • 观察者设计模式

    每周学点Java设计模式__观察者设计模式 本次继续更新java23中设计模式之一——观察者模式。 观察者模式(有...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

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

    [toc] 设计模式02-观察者者设计模式 主要来源Head First设计模式(书)观察者设计模式是JDK中使用...

  • 11.9设计模式-观察者模式-详解

    设计模式-观察者模式 观察者模式详解 观察者模式在android中的实际运用 1.观察者模式详解 2.观察者模式在...

  • 2021-11-18 - 学习记录

    观察者模式 - js

  • RxJava设计模式与原理

    标准观察者设计模式 RxJava是一种特殊的观察者模式,首先我们先来看标准的观察者设计模式。在标准观察者模式中,存...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

网友评论

    本文标题:JS设计模式-观察者模式

    本文链接:https://www.haomeiwen.com/subject/djpryxtx.html