ES6 Proxy实现

Proxy作为库的设计者和框架设计者专用的功能用于修改某些操作的默认行为，等同于在语言层面做出修改。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

Proxy有两个参数一个是原始的对象一个是用来定制拦截的行为

A Proxy is created with two parameters:

target: the original object which you want to proxy

handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.

我们看Proxy现在支持已经很成熟了

image.png

<script>
const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p); 
</script>

image.png

当然我们也可以使用set和get来validate我们可以在set里面做一些判断

<script>
    let object = {
        a: 1,
        b: 2
    }
    let handlers = []
    function reactive(obj) {
        return new Proxy(obj, {
            get(obj, prop) {
                console.log(obj, prop)
                return obj[prop]
            },
            set(obj, prop, val) {
                console.log(obj, prop, val)
                obj[prop] = val
                for (let handler of handlers)
                    handler()
                return obj[prop]
            }
        })
    }

    function effect(handler) {
        handler()
        handlers.push(handler)
    }
    let dummy;
    let proxy = reactive(object)

    effect(() => dummy = proxy.a)
    console.log(dummy)
    proxy.a = 111
    console.log(dummy)
</script>

最终我们来实现双向数据绑定

<input id="test">
<script>
let object = {
    a: {x:1},
    b: 2
}
let handlers = new Map()
let usedReactivities = []
let reactivites = new Map()
function reactive(obj) {
  if(reactivites.has(obj)){
    return reactivites.get(obj)
  }
    return new Proxy(obj, {
        get(obj, prop) {
            console.log(obj, prop)
            usedReactivities.push([obj,prop])
            if(typeof obj[prop] === 'object'){
              return reactive(obj[prop])
            }
            return obj[prop]
        },
        set(obj, prop, val) {
            obj[prop] = val
           console.log(handlers)
            console.log(obj, prop, val)
            if( handlers.get(obj)){
              if( handlers.get(obj).get(prop)){
                for(let handler of handlers.get(obj).get(prop)){
                  handler()
                }
              }
            }
            return obj[prop]
        }
    })
    reactivites.set(obj, proxy)
    reactivites.set(proxy, proxy)
    return proxy
}
let proxy = reactive(object)

function effective(handler) {
  usedReactivities=[]
    handler()
    console.log(usedReactivities)
    for (let usedReactivity of usedReactivities){
      let [obj, prop] = usedReactivity
      console.log([obj, prop])
      if(!handlers.has(obj)){
        handlers.set(obj, new Map())
      }
      if(!handlers.get(obj).has(prop)){
        handlers.get(obj).set(prop, [])
      }
      handlers.get(obj).get(prop).push(handler)
    }
}

let p = reactive({r:100})
effective(()=>{
  document.getElementById("test").value= p.r
})

document.getElementById("test").addEventListener("input", e=>{
  p.r = e.target.value
})

</script>