【前端】代理模式

针对一个对象，设置代理控制这个对象的访问，用户需要通过代理访问对象

代码演示

场景

DOM事件代理（委托）

• 事件绑定在父元素上，而非目标节点

  • 适合目标较多或数量不确定（如无限加载的瀑布流图片列表）

    • 原生js丐版懒加载图片

    • 动态增加节点的代码演示

webpack devserver proxy 正向（客户端）代理

nginx 反向（服务端）代理

Proxy代理

• 代码2

捕获器不变式

// 捕获器不变式

const obj = {
  x: 100,
  y: 0,
}

Object.defineProperty(obj, 'y', {
  value: 200,
  writable: false,
  configurable: false,
})

const proxy = new Proxy(obj, {
  get() {
    return 'abc'
  },
})

console.log(proxy.x) // abc
console.log(proxy.y)
// 报错TpeError: 'get' on proxy: property 'y' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '200' but got 'abc')