西安建设网站公司哪家好,合肥建设银行官网招聘网站,公司宣传策划方案,营销公关观察者模式(发布-订阅模式)#xff1a;其定义对象间一种一对多的依赖关系#xff0c;当一个对象的状态发生改变时#xff0c;所有依赖于它的对象都将得到通知。在JavaScript中#xff0c;一般使用事件模型来替代传统的观察者模式。好处#xff1a;(1)可广泛应用于异步编程…观察者模式(发布-订阅模式)其定义对象间一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都将得到通知。在JavaScript中一般使用事件模型来替代传统的观察者模式。好处(1)可广泛应用于异步编程中是一种替代传递回调函数的方案。(2)可取代对象之间硬编码的通知机制一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。DOM事件–观察者模式典例需要监控用户点击document.body的动作但是我们没有办法预知用户将在什么时间点击。所以我们订阅document.body上的click事件当body节点被点击时body节点便向订阅者发布这个消息document.body.addEventListener(click, function() {console.log(1);}, false);// 可以多个订阅者document.body.addEventListener(click, function() {console.log(2);}, false);doucment.body.click();某网站有header头部、nav导航、消息列表等模块。这几个模块的渲染都需要获取用户登陆信息。(1)一般写法$.ajax({url: ./login,type: post,contentType: application/json,dataType:json,success: function(data) {if(data.status success) {// 登录成功渲染header、navheader.setInfo(data.headerInfo);nav.setInfo(data.navInfo);}}});(2)使用观察者模式很轻松解耦$.ajax({...,success: function(data) {if(data.status success) {// 登录成功发布登陆成功消息login.trigger(loginsuccess, data);}}});var header (function() {// 监听消息login.listen(loginsuccess, function(data){header.setInfo(data.headerInfo);});return {setInfo: function(data) {console.log(设置header信息);}};})();var nav (function() {login.listen(loginsuccess, function(data){nav.setInfo(data.navInfo);});return {setInfo: function(data) {console.log(设置nav信息);}}})();
