首页 > web前端 > js教程 > JavaScript观察者模式定义和dom事件实例详解

JavaScript观察者模式定义和dom事件实例详解

伊谢尔伦
发布: 2017-07-24 14:33:03
原创
1571 人浏览过

观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 

在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、nav
      header.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信息");
    }
  }
})();
登录后复制

以上是JavaScript观察者模式定义和dom事件实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板