ts:简单实现 mobx 的观察者模式 observable

这篇具有很好参考价值的文章主要介绍了ts:简单实现 mobx 的观察者模式 observable。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

mobx 状态管理器文章来源地址https://www.toymoban.com/news/detail-517861.html

  • 订阅者:管理 变化后 回调的函数列表
  • 观察者:将传入的数据监听起来,并且在有变化时执行订阅者管理的函数列表
// 订阅者的函数列表,set结构,内部是 function
const list: Set<Function> = new Set()
// 订阅者,管理函数列表
const autoRun = (fn: Function) => {
  if (!list.has(fn)) {
    list.add(fn)
  }
}

// 观察者
const observable = <T extends object> (params: T) => {
  return new Proxy(params, {
    set (target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
  
      // 可以自定义一些内容
      // 这里需要执行订阅者的回调函数,即 list 中所有函数
      list.forEach(fn => fn())
  
      return result
    }
  })
}

// 通过观察者创建数据
const proxyObservable = observable({
  name: '笑笑',
  attr: '真好看哈哈哈'
})
console.log('-----', proxyObservable.attr)

// 订阅者中新增一个函数
autoRun(() => {
  console.log('有变化了哈哈哈')
})

// 更新数据
proxyObservable.attr = '今天又好看了一点' // 有变化了哈哈哈
proxyObservable.name = 'blue' // 有变化了哈哈哈

到了这里,关于ts:简单实现 mobx 的观察者模式 observable的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何用C++11实现观察者模式

    观察者模式是一种设计模式,定义了对象之间的一对多关系。当一个对象状态发生改变时,它的依赖者都会收到通知并自动更新。在C++11中,可以通过以下方式实现观察者模式: 首先,我们需要创建一个观察者接口,其中包含一个更新方法。这个接口可以被多个观察者类实现

    2024年02月15日
    浏览(32)
  • Go和Java实现观察者模式

    在监控系统中,我们需要采集监控指标的信息,假设当采集的指标信息超过阈值时我们需要对该监控指标持久化到 数据库中并且进行告警。 本文通过指标采集持久化和告警来说明观察者模式的使用,使用Go语言和Java语言实现。 观察者模式是一种行为型设计模式,它定义了一

    2024年02月16日
    浏览(36)
  • 「观察者(Observer)」设计模式 Swift实现

    观察者设计模式(Observer Pattern)是一种行为型设计模式,它定义了对象之间的一种一对多的依赖关系,使得当一个对象的状态发生变化时,所有依赖于它的对象都会受到通知并自动更新。 在这种模式中,被观察者对象(Subject)存储其观察者对象(Observer)列表,并提供了用

    2024年02月16日
    浏览(39)
  • 【设计模式】Head First 设计模式——观察者模式 C++实现

    设计模式最大的作用就是在变化和稳定中间寻找隔离点,然后分离它们,从而管理变化。将变化像小兔子一样关到笼子里,让它在笼子里随便跳,而不至于跳出来把你整个房间给污染掉。 主题对象(出版者)管理某些数据,当主题内的数据改变,就会通知观察者(订阅者)。

    2024年02月10日
    浏览(41)
  • 观察者模式(下):如何实现一个异步非阻塞的EventBus框架?

    上一节课中,我们学习了观察者模式的原理、实现、应用场景,重点介绍了不同应用场景下,几种不同的实现方式,包括:同步阻塞、异步非阻塞、进程内、进程间的实现方式。 同步阻塞是最经典的实现方式,主要是为了代码解耦;异步非阻塞除了能实现代码解耦之外,还能

    2024年02月16日
    浏览(37)
  • 性能优化之懒加载 - 基于观察者模式和单例模式的实现

            在前端性能优化中,关于图片/视频等内容的懒加载一直都是优化利器。当用户看到对应的视图模块时,才去请求加载对应的图像。 原理也很简单,通过浏览器提供的 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org),观察“哪个元素和视口交叉”,从而进行懒加载。

    2024年02月05日
    浏览(37)
  • 用C++11打造智能观察者模式:详解实现步骤完整示例代码

      观察者模式是一种行为设计模式,其中一个对象(主题)维护其依赖对象(观察者)的列表,当主题的状态发生变化时,它通知所有观察者。以下是一个使用C++11实现观察者模式的简单例子: 定义观察者接口(Observer):  创建一个观察者接口,该接口包含观察者需要实现

    2024年01月25日
    浏览(48)
  • 【C++ 观察者模式 思想理解】C++中的观察者模式:松耦合设计与动态交互的艺术,合理使用智能指针观察者

    在进入技术细节之前,理解观察者模式(Observer Pattern)的基本概念和它在现代编程中的重要性是至关重要的。 观察者模式是一种设计模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新。在C++中,这个

    2024年01月24日
    浏览(56)
  • 行为型模式 | 观察者模式

    观察者模式又叫做发布-订阅(Publish/Subscribe)模式,定义了一种一对多的依赖关系 。让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,使它们能够自动更新自己。 软件系统常常要求在某一个对象的状态发生变化的时候

    2024年01月22日
    浏览(79)
  • 【设计模式】观察者模式

    观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 Subject:抽象主题(被观察者

    2024年02月13日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包