不到100代码手写响应式原理的练习

点击查看代码

//先是有俩函数
var info = {
    name: '巴拉拉小魔仙',
    age: 1000
};
var obj = {
    title: '震惊！拜登再次摔跤',
    description: '登机时被风吹倒'
};
let activeReactiveFn = null;
// 编写一个依赖类
class Depend {
    constructor(){
        this.reactiveFns = new Set();
    }
    depend(){
        if(activeReactiveFn){
            this.reactiveFns.add(activeReactiveFn)
        }
    }
    notify(){
        this.reactiveFns.forEach(fn => {
            fn();
            console.log(typeof fn);

        });
    }
}
// 编写一个创建数据结构的函数
var weakMap = new WeakMap();
function getDepend(target, key) {
    var map = weakMap.get(target);
    if (!map) {
        map = new Map();
        weakMap.set(target,map);
    }
    var depend = map.get(key);
    if(!depend){
        depend = new Depend();
        map.set(key,depend);
    }
    return depend
}
// 编写一个将普通转换成响应式对象的函数
function reactive(obj) {
    return new Proxy(obj, {
        get: function (target, key, receive) {
            const depend = getDepend(target,key);
            depend.depend();

            return Reflect.get(target, key, receive);
        },
        set: function (target, key, newValue, receive) {
            debugger
            Reflect.set(target,key,newValue);
            const depend = getDepend(target,key);
            depend.notify();
        }
    })
}
var objProxy = reactive(obj);
var infoProxy = reactive(info);

function watchFn (fn) {
    activeReactiveFn = fn;
    fn();
    activeReactiveFn = null;
}

watchFn(function(){
    console.log(objProxy.title,'1');
})