博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript设计模式 观察者模式
阅读量:6325 次
发布时间:2019-06-22

本文共 2282 字,大约阅读时间需要 7 分钟。

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

举个例子,我来公司面试的时候,完事之后每个面试官都会对我说:“请留下你的联系方式, 有消息我们会通知你”。 在这里“我”是订阅者, 面试官是发布者。所以我不用每天或者每小时都去询问面试结果, 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

在Js中,DOM事件实际上就是一个观察者模式。

document.body.addEventListener('click',function(){       ...   },false);

 

我们并不知道用户什么时候会点击body,所以注册了一个这样的事件,当body被点击时,body节点就会向订阅者发布这个消息。

除此之外,还可以随意的增加订阅者和删除订阅者:

document.body.addEventListener('click',function(){       console.log(1)   },false);   document.body.addEventListener('click',function(){       console.log(2)   },false);    document.body.addEventListener('click',function(){       console.log(3)   },false);

基于上面的面试例子,可以由以下的代码来表现:

面试者把简历扔到一个盒子里, 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.

Events = function() {            var listen, log, obj, one, remove, trigger, __this;            obj = {};            __this = this;            listen = function( key, eventfn ) {  //把简历扔盒子, key就是联系方式.              var stack, _ref;  //stack是盒子              stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];              return stack.push( eventfn );            };            one = function( key, eventfn ) {              remove( key );              return listen( key, eventfn );            };            remove = function( key ) {              var _ref;              return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;            };            trigger = function() {  //面试官打电话通知面试者              var fn, stack, _i, _len, _ref, key;              key = Array.prototype.shift.call( arguments );               stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];              for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {                fn = stack[ _i ];                if ( fn.apply( __this,  arguments ) === false) {                  return false;                }              }              return {                 listen: listen,                 one: one,                 remove: remove,                 trigger: trigger              }            }

 观察者的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。

   在Backbone框架中,事件的change机制就是一个观察者模式,当用户改变了某个属性时,会调用trigger事件来依次通知订阅者触发事件。

 

 设计模式系列基本是参考JavaScript设计模式与开发实践一书的内容,提取里面的纲要方便学习。

转载于:https://www.cnblogs.com/Darlietoothpaste/p/6685577.html

你可能感兴趣的文章
Ubuntu安装RPM格式软件包
查看>>
[游戏学习22] MFC 井字棋 双人对战
查看>>
Qt中的qreal
查看>>
Codeforces Beta Round #95 (Div. 2) D.Subway
查看>>
企业搜索引擎开发之连接器connector(二十)
查看>>
HeadFirst Jsp 09 (JSTL)
查看>>
jquery版小型婚礼(可动态添加祝福语)
查看>>
Centos5.8 安装 PHP5.5 和 memcached
查看>>
第25周六
查看>>
[转]CENTOS LINUX安装并使用NFS共享文件
查看>>
Android AES加密算法及其实现
查看>>
Entity Framework公共的增删改方法
查看>>
hdu1698 Just a Hook 线段树:成段替换,总区间求和
查看>>
dorado spring知识补充
查看>>
Android -- ViewPager、Fragment、状态保存、通信
查看>>
如果想消除随机性的感觉
查看>>
.NET网站自动浏览器分享,解决IIS6应用池回收后第一次访问慢问题
查看>>
关于验证码识别3
查看>>
【JavaScript】javascript常用的东西
查看>>
Cucumber 入门一
查看>>