Javascript的观察者模式

来源：动视网责编：小采时间：2020-11-27 20:01:03

Javascript的观察者模式

Javascript的观察者模式:这次给大家带来Javascript的观察者模式，Javascript观察者模式的注意事项有哪些，下面就是实战案例，一起来看一下。观察者（又称发布订阅）模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

推荐度：

点击下载本文 文档为doc格式

导读Javascript的观察者模式:这次给大家带来Javascript的观察者模式，Javascript观察者模式的注意事项有哪些，下面就是实战案例，一起来看一下。观察者（又称发布订阅）模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

这次给大家带来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'

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Javascript的观察者模式

推荐度：

点击下载本文 文档为doc格式

标签：模式 js javascript

热门焦点

Javascript的观察者模式

Javascript的观察者模式

Javascript的观察者模式

最新推荐

猜你喜欢

热门推荐