简版mvvm框架实现

简版mvvm框架实现

总结

  • defineProperty;

  • Proxy代理

  • 数据劫持

  • AMD /CMD模块化;

  • 1.利用defineProperty实现数据劫持;

  • 2.利用ES6中proxy实现数据劫持

  • 3.mvvm框架中编译数据到视图

  • 4.实现数据驱动视图更新;

  • 5.发布订阅模式;

  • 6.AMD模块化require.js介绍;

defineProperty


let dep = new Dep();
Object.defineProperty(obj,'name',{
        configurable: true,
        enumerable: true,
        writable: true,
        get(){
            dep.addSub(new Watcher( ()=> console.log("添加订阅了")))
            return value;
        },
        set(newValue){
            dep.notify(); //发布
            value = newValue;
        }
    })

proxy

  • 定义 :对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

  • 基本使用

    let obj = new Proxy({
                        name: "张三",
                        age: 20
                  },{
                        get(target, name) {
                            return target[name];
                        },
                        set(target,name,value){
                            target[name] = value;
                        }
                   })
    
  • 相关配置参数

    has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
    defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
    

通过数据劫持实现表达式

  • 通过defineProperty劫持数据:observer

发布订阅监听数据的更新

'''
class Dep{ //收集器
constructor(){
this.subs = [];
}
addSub(sub){
this.subs.push(sub);
}
notify(newValue)
){
this.subs.forEach(sub => sub.update(newValue)

上一篇:初始vue


下一篇:vue3学习日志—03.reactive函数