Rumah  >  Artikel  >  hujung hadapan web  >  Javascript的观察者模式

Javascript的观察者模式

php中世界最好的语言
php中世界最好的语言asal
2018-03-13 17:51:531428semak imbas

这次给大家带来Javascript观察者模式,Javascript观察者模式的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

实现思路

确定发布者

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

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

简单实现

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'

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Javascript的代理模式

Javascript的策略模式

Atas ialah kandungan terperinci Javascript的观察者模式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Javascript的代理模式Artikel seterusnya:js如何获取select标签选中的值