简版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)

标签：console,mvvm,框架,简版,js,log,defineProperty,require,name
来源： https://www.cnblogs.com/lixialian/p/15528352.html