Skip to content

Linya-IronMan/MVVM

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

_MVVM

发布订阅模式 实现MVVM,主要是一个双向绑定的内容。

实现比较好的、且诸事比较完整的双向绑定是 _NewMVVM

整体流程如下:

  1. Vue 实例初始化,触发Compile方法与Observe方法

    没错,虽然是构造函数的样子,但是确实是作为普通函数存在的。

  2. Compile 对DOM进行解析。遍历所有文本节点,通过正则匹配出 {{ name }} 模板语法绑定的数据;通过对标签属性遍历,识别出v-model="more.like"双向绑定需要的节点与数据的对应关系
  3. Observe 对数据进行监听,通过Proxy 或者 definneProperty 设置 getter,setter。

    Compile 递归访问DOM;Observe递归劫持数据 —— 登对!

  4. Compile中拿到节点与绑定的数据的访问链路(一个字符串:比如more.like)的时候,会创建一个Watcher,这个Watcher实例中存储了【node节点、数据访问链路、节点更新函数】,并且还会通过 Dependency.temp 缓存当前的Watcher实例。
  5. Watcher实例创建的过程中,除了正常的初始化之外,还通过数据访问链路对数据进行了访问,以此来触发getter
  6. getter被触发的时候,就会向Dependency实例 —— dependency 添加订阅者。订阅者正是通过Dependency.temp拿到的。
  7. 数据发生改变的时候,会触发setter,setter中通过dependency实例来通知所有的订阅者Watcher,并执行其节点更新函数。

详细的逻辑图如下:

alt text

alt text

About

发布订阅模式 实现MVVM

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published