JavaScript观察者模式定义和dom事件实例详解-js教程-PHP中文网

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

伊谢尔伦

发布： 2017-07-24 14:33:03

原创

1908人浏览过

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

在JavaScript中，一般使用事件模型来替代传统的观察者模式。
好处：

（1）可广泛应用于异步编程中，是一种替代传递回调函数的方案。

（2）可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。

DOM事件–观察者模式典例

立即学习“Java免费学习笔记（深入）”；

灵感PPT

AI灵感PPT - 免费一键PPT生成工具

226

查看详情

需要监控用户点击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中文网其它相关文章！