首页 > web前端 > js教程 > JavaScript 设计模式 - 行为 - 观察者

JavaScript 设计模式 - 行为 - 观察者

王林
发布: 2024-08-12 18:41:06
原创
949 人浏览过

JavaScript Design Patterns - Behavioral - Observer

观察者模式允许定义对象之间的一对多依赖关系,以便当一个对象更改状态时,所有其依赖项都会得到通知并自动更新。

在此示例中,我们正在创建一个简单的类产品,其他类可以观察到注册 register() 方法中的更改。当某些内容更新时,notifyAll()方法将与所有观察者就这些更改进行通信。

class ObservedProduct {
  constructor() {
    this.price = 0;
    this.actions = [];
  }

  setBasePrice(val) {
    this.price = val;
    this.notifyAll();
  }

  register(observer) {
    this.actions.push(observer);
  }

  unregister(observer) {
    this.actions.remove.filter(function (el) {
      return el !== observer;
    });
  }

  notifyAll() {
    return this.actions.forEach(
      function (el) {
        el.update(this);
      }.bind(this)
    );
  }
}

class Fees {
  update(product) {
    product.price = product.price * 1.2;
  }
}

class Profit {
  update(product) {
    product.price = product.price * 2;
  }
}

export { ObservedProduct, Fees, Profit };
登录后复制

完整的例子在这里? https://stackblitz.com/edit/vitejs-vite-kyucyd?file=main.js

结论

当更改一个对象的状态可能需要更改其他对象,并且实际的一组对象事先未知或动态更改时,请使用此模式。


希望您觉得它有帮助。感谢您的阅读。 ?

让我们联系吧!你可以在以下位置找到我:

  • 中: https://medium.com/@nhannguyendevjs/
  • 开发:https://dev.to/nhannguyendevjs/
  • 哈希节点:https://nhannguyen.hashnode.dev/
  • Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
  • X(以前的 Twitter):https://twitter.com/nhannguyendevjs/
  • 请我喝杯咖啡: https://www.buymeacoffee.com/nhannguyendevjs

以上是JavaScript 设计模式 - 行为 - 观察者的详细内容。更多信息请关注PHP中文网其他相关文章!

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