代理模式

1. 虚拟代理：把一些开销很大的对象，延迟到真正需要它的时候去创建执行。例：图片加载、文件上传
2. 安全代理：控制真实对象的访问权限，例登录权限校验
3. 远程代理：一个对象将不同空间的对象进行局部代理，例监控多个对象的状态，例某地区总店监控分店
4. 智能代理：调用对象代理处理另外一些事情如垃圾回收机制和增加额外的服务，例代理售票处

图片代理

// 构造函数
const myImage = function (id) {
  const oImage = new Image()
  this.setSrc = (src) => {
    oImage.src = src
  }
  document.getElementById(id).appendChild(oImage)
}
const proxyImage = (function () {
  const oMyImage = new myImage('demo')
  // 用于加载图片
  const oNewImage = new Image()
  oNewImage.onload = () => {
  // 图片加载完成，覆盖myImage的
    setTimeout(() => {
      oMyImage.setSrc(oNewImage.src)
    }, 1000)
  }
  return (src) => {
    // 展示本地图片
    oMyImage.setSrc('./1.webp')
    // 加载网络图片
    oNewImage.src = src
  }
})()
proxyImage('https://img0.baidu.com/it/u=1684532727,1424929765&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675')

延迟发送代理

常用于文件上传，类似于防抖节流核心思想

<div id="demo">wew</div>
<button type="bg">改变背景</button>
<button type="fs">改变文字大小</button>
<button type="cl">改变文字颜色</button>

const demo = document.getElementById('demo')
const btnArr = document.getElementsByTagName('button')

const proxyChange = (func) => {
    let cache = []
    let timer = null
    return function () {
        cache.push(this.getAttribute('type'))
        clearTimeout(timer)
        timer = setTimeout(() => {
            func(demo, cache)
            cache = []
        }, 2000)
    }
}
const changeStyle = (dom, type) => {
    console.log('deom', dom, type)
    var typeObj = {
        bg: ['backgroundColor', 'blue'],
        fs: ['fontSize', '20px'],
        cl: ['color', 'green']
    }
    if (Array.isArray(type)) {
        type.forEach((el) => {
            dom.style[typeObj[el][0]] = typeObj[el][1]
        })
    } else {
        dom.style[typeObj[type][0]] = typeObj[type][1]
    }
}
const myProxy = proxyChange(changeStyle)
for (let i = 0; i < btnArr.length; i++) {
    btnArr[i].onclick = myProxy
}