|
1、Dep其实，这就是一个依赖收集的容器， depend 收集依赖， notify 触发依赖 class Dep{ constructor() { this._subs = []; } depend () { this._subs.push(Dep.target) } notify() { this._subs.forEach(item => { item.fn(); }) }}// 其实就是 dep 和 watcher 基情满满的开始，watcher 中用到// 通过一个全局属性来存 watcherDep.target = null;function pushTarget(watch) { Dep.target = watch;}function popTarget() { Dep.target = null;}
2、了解 obverser递归，将 data 对象所有属性转化为访问器属性
// 转为访问器属性function defineReactive (obj, key, val, shallow) { // 创建一个依赖收集容器 let dep = new Dep(); let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { if(Dep.target) { // 收集依赖 dep.depend(); } return val; // ... }, set: function reactiveSetter (newVal) { if(newVal === val) return; // 继续递归遍历 observe(newVal); // 触发依赖 dep.notify(); // ... } })}class Observer{ constructor(data) { this.walk(data); } walk(data) { const keys = Object.keys(data) for (let i = 0; i < keys.length; i++) { defineReactive(data, keys[i], data[keys[i]]) } }}// 递归，将 data 对象所有属性转化为访问器属性function observe (data) { if(Object.prototype.toString.call(data) !== '[object Object]') return; new Observer(data);}此时就可以把任意一个对象的全部属性转为访问器
3、了解 watch 和 observerconst data = { a: 1, b: 2}// 首先监控一个对象observe(data);watcher 的主要功能是检测某个属性，当属性变化时触发一个回调
class Watcher{ /** * @params {Function} exp 一个属性表达式 * @params {Function} fn 回调 */ constructor(exp, fn) { this.exp = exp; this.fn = fn; // 存 watcher // Dep.target = this; pushTarget(this); // 先执行一次表达式函数，会在调用过程中， // 触发到 data.a 的访问器， data.a 的 get 被执行， // 触发 dep.depend() 开始收集依赖 this.exp(); // 释放 Dep.target popTarget(); }}// new Watcher 这样一个依赖就被收集了new Watcher(() => { return data.a + data.b;}, () => { console.log('change')})
4、触发依赖data.a = 3; // changedata.b = 3; // change
5、总结一下流程 - 把一个对象的全部属性转化为访问器
- 当为某一个属性增加
watcher 时，会触发改属性的 get，get 函数中会把该 watcher 存到该属性的 dep 依赖容器中 - 当这个属性发生变化时，会出发改属性的
set 的方法，set 函数中会把 dep 存的依赖都执行 到此这篇关于实现一个简单得数据响应系统的文章就介绍到这了,更多相关数据响应系统内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
如何实现无感刷新token
使用javascript解析二维码的三种方式 |
