JavaScript 设计模式之发布-订阅模式

我是小卡车呀

于 2020-10-23 23:19:41 发布

阅读量222

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_43262022/article/details/109251482

版权

发布-订阅模式 JavaScript 事件监听事件触发事件移除

关键词由优快云通过智能技术生成

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

这篇博客详细介绍了JavaScript中实现发布-订阅模式的方法，通过`Event`对象的`listen`、`trigger`和`remove`方法，实现了事件监听、触发和移除功能。示例展示了如何监听并响应`msg`事件，动态创建并添加带有数据的`<p>`元素到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发布-订阅模式

let Event = (function () {
  let clientList = {},
    listen,
    trigger,
    remove;
  listen = function (key, fn) {
    if (!clientList[key]) {
      clientList[key] = [];
    }
    clientList[key].push(fn);
  };
  trigger = function () {
    let key = Array.prototype.shift.call(arguments);
    let fns = clientList[key];
    if (!fns || fns.length === 0) {
      return false;
    }
    for (let i = 0, l = fns.length; i < l; i++) {
      fns[i].apply(this, arguments);
    }
  };
  remove = function (key, fn) {
    let fns = clientList[key];
    if (!fns) {
      return false;
    }
    if (!fn) {
      fns && (fns.length = 0);
    } else {
      for (let l = fns.length - 1; l >= 0; l--) {
        let _fn = fns[l];
        if (_fn === fn) {
          fns.splice(l, 1);
        }
      }
    }
  };
  return {
    listen,
    trigger,
    remove,
  };
})();
Event.listen("msg", function (data) {
  let p = document.createElement("p");
  p.innerHTML = `name: ${data.name}, age：${data.age}`;
  document.body.appendChild(p);
});
Event.trigger("msg", { name: "小卡车", age: 20 });