Skip to content

通过完成监听器 Observer 、订阅器 Dep 、订阅者 Watcher 和解析器 Compile 的实现,来模拟初始化一个Vue 实例

Notifications You must be signed in to change notification settings

fengshi123/mvvm_example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mvvm_example

本实例通过实现以下 4 个步骤,来实现数据的双向绑定:

1、实现一个监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者;

2、实现一个订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理;

3、实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图;

4、实现一个解析器 Compile,可以解析每个节点的相关指令,对模板数据和订阅器进行初始化。‘

相关结构图表示如下:

3.png

构建步骤

1、需要 Node.js 6+ (作者使用的版本为:node.js 8.2.1 npm 5.3.0)

2、如果你需要更改 js 代码,比如说打些 console.log 查看运行的结果等,需要进行 js 编译压缩,步骤如下:

  • 安装插件:npm install

  • 运行示例:npm run build

  • 然后会生成 js 压缩文件,放在目录 /dist 下面

3、运行示例,可以用浏览器打开 /example/index.html 运行示例页面。

4、实例展示如下:

1.gif

About

通过完成监听器 Observer 、订阅器 Dep 、订阅者 Watcher 和解析器 Compile 的实现,来模拟初始化一个Vue 实例

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published