脚本宝典收集整理的这篇文章主要介绍了实现一个简单得数据响应系统，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
其实，这就是一个依赖收集的容器， dePEnd 收集依赖， notify 触发依赖
class Dep{
constructor() {
this._subs = [];
}
depend () {
this._subs.push(Dep.target)
}
notify() {
this._subs.foreach(ITem => {
item.fn();
})
}
}
// 其实就是 dep 和 watcher 基情满满的开始，watcher 中用到
// 通过一个全局属性来存 watcher
Dep.target = null;
function pushTarget(watch) {
Dep.target = watch;
}
function popTarget() {
Dep.target = null;
}
递归，将 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); }
此时就可以把任意一个对象的全部属性转为访问器
const 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')
})
data.a = 3; // change data.b = 3; // change
watcher 时，会触发改属性的 get，get 函数中会把该 watcher 存到该属性的 dep 依赖容器中set 的方法，set 函数中会把 dep 存的依赖都执行到此这篇关于实现一个简单得数据响应系统的文章就介绍到这了,更多相关数据响应系统内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的实现一个简单得数据响应系统全部内容，希望文章能够帮你解决实现一个简单得数据响应系统所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。