代理模式

1. 其中有一个应用就是这个，缓存代理，我理解到时候需要进行两张表的对比的时候，如果发现一致，那么就复用，
2. 用代理模式实现观察者模式
3. 可以利用代理模式包装防抖和节流。

事件原理

1. 哪里用到了代理，为什么不用原生的事件捕获那一套：兼容浏览器

1. 17 之前 React 事件都是绑定在 document 上。
2. 由于不是绑定在真实的 DOM 上，所以 React 需要模拟一套事件流：事件捕获-> 事件源 -> 事件冒泡，
3. 也就 是说，所有的event 以及阻止冒泡事件其实都是模拟出来的。
4. 流程：一开始是react将所有的事件都分类绑定到document (模拟捕获冒泡阶段)：
5. 为什么一定要分类绑定：由于react的事件和事件源，是自己合成的，所以需要对不同事件进行分类处理(事件合成)。

vue3Proxy响应式

1.  var target = {
               name: "scx",
               age: 18
           }
           // handler 是一个对象
           const handler = {
               set(target, prop, value) {
                   let result = Reflect.set(target, prop, value)
                   console.log("设置的操作" + result)
                   return true;
               },
               get(target, value) {
                   let result = Reflect.get(target, value)
                   console.log("获取的的操作" + result)
               }
           }
   
           let proxy = new Proxy(target, handler);
           proxy.coure = "java"
           console.log(proxy)
   

事件合成系统

//react
export default function Index(){
  const handleClick = () => {}
  const handleChange =() => {}
  return <div >
     <input onChange={ handleChange } />
     <button onClick={ handleClick } >点击</button>
  </div>
}
//react实际绑定的点在document;
{
  onClick: ['click'],
  onChange: ['blur', 'change', 'click', 'focus', 'input', 'keydown', 'keyup', 'selectionchange']
}

转get请求

源文件

proxy.js

async function fetch(url, object) {
  await fetchHelper(url, object)
}

const fetchHelper = (url, object) => {
  const {
    method,
    body
  } = object;
  //适配代理get请求
  if (method.toLowerCase() === "get") {
    fetch.post(url, {
      method: 'post',
      body: body ?? "",
    })
  }

}
fetch('https://example.com/', {
  method: 'get',
  body: 'no-cors',
}).then((value) => value)