当前位置: 首页 > 网络应用技术

使用object.defineproperty简单地实现MVVM订阅和数据劫持

时间:2023-03-09 12:51:00 网络应用技术

  MVVM是一种设计模式,或者也可以称为架构模式。整个战斗是模型视图-ViewModel。

  其中,我们可以将模型视为后端接口返回的数据

  视图是浏览器中显示的页面,该页面允许用户在浏览器中查看

  JSON数据是如何在页面中显示的?这是ViewModel的责任。

  因此,它们之间的关系可以在图片中表示

  前端最常见的MVVM框架应该是

  MVVM的最初意图是使用数据绑定函数来删除与视图级别的接口数据渲染逻辑相关的所有代码。

  那么如何使用或如何编写数据绑定函数以实现此效果?

  让我们看一下Vue的表现:

  当然,此示例与object.defineproperty无关。我只是反映了“从接口数据渲染逻辑的视图中删除数据之后”一词。

  显然,我们没有写自己

  或者

  类似于此渲染代码。

  您可能会认为这只是一条代码,如此简单。

  实际上,如果我们需要增加

  您知道MVVM有多少帮助我们拯救了我们。

  好吧,MVVM的性能已在此处显示,因此,当您返回主题时,如何使用object.defineproperty简单地实现MVVM?

  实际上,VUE2的响应原理是数据劫持,也就是说,当数据更改时,相关页面会自动重新呈现。

  实际上,这种需求非常容易,但是首先,有必要理解一种方法,称为大多数人可以在理解后模拟简单的实现。

  尽管它比VUE差得多,但面试检查并不是您写Vue。

  object.defineproperty方法将向对象添加一个新属性,或修改对象的现有属性,最后返回到此对象。

  object.defineproperty方法可以接收三个参数

  对于描述符,它是一种对象类型,用于配置配置属性名称的属性描述符。因此,设计的属性可以选择以下两个:

  不和时间,默认情况下它是数据描述符。

  以下示例显示了访问描述的作用:

  当我们在浏览器上方运行代码时,控制台将输出:

  这是一个新价值:杰克

  这是访问描述符的角色,他可以用于数据劫持。

  我们主题的订阅和数据劫持将由可访问的描述符实施。

  订户可以简单地将其理解为队列,而队列是即将在某个时刻执行的函数。

  当然,为了促进搜索,我们可以将其定义为对象类型,并且每个属性都是数组类型。

  让我们实施一个订户:

  这是要实现的。数据劫持后,执行订户中的相应代码。

  这样,您可以实现像Vue一样,更改某个消息,并且页面可以同步呈现最新结果。

  代码的这一部分的逻辑非常简单:

  作者:阳光同学