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设计模式-观察者模式

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