# 代理模式

# 定义

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问

# 保护代理

控制不同权限的对象对目标对象的访问

# 虚拟代理

# 简单实现图片预加载

var loadImg = (function() {
  var imgNode = document.createElement('img')
  document.body.append(imgNode)
  var img = new Image()

  img.onload = function() {
    imgNode.src = img.src
  }

  return {
    setSrc(defaultSrc, src) {
      imgNode.src = defaultSrc
      img.src = src
    }
  }
})()

loadImg.setSrc("./loading.gif", "https://img0.baidu.com/it/u=3579831024,633721272&fm=26&fmt=auto&gp=0.jpg")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 通过代理实现

这种方式遵循了单一职责原则，如果一个对象承担的职责太多，会导致脆弱和低内聚的设计。当变化发生时，设计可能会遭到意外的破坏

var loadImg = (function() {
  var imgNode = document.createElement('img')
  document.body.append(imgNode)

  return function(src) {
    imgNode.src = src
  }
})()

var proxyLoadImg = function(defaultSrc, src) {
  var img = new Image()
  img.onload = function() {
    loadImg(this.src)
  }

  loadImg(defaultSrc)
  img.src = src
}

proxyLoadImg("./loading.gif", "https://img0.baidu.com/it/u=3579831024,633721272&fm=26&fmt=auto&gp=0.jpg")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 缓存代理

为一些开销大的运算结果提供暂时的缓存，下次运算时，如果传递的参数跟之前一致，则可以直接返回前面存储的运算结果

# 计算乘积

var mult = function() {
  console.log('开始计算')
  var result = 1
  for(var i = 0; i < arguments.length; i++) {
    result *= arguments[i]
  }

  return result
}

var proxyMult = (function() {
  var cache = {}
  return function() {
    var args = Array.prototype.join.call(arguments, ',')
    if (args in cache) {
      return cache[args]
    }

    return cache[args] = mult.apply(this, arguments)
  }
})()

console.log(proxyMult(1, 3, 5, 7))
console.log(proxyMult(1, 3, 5, 7))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 动态创建代理

var createProxyFactory = function(fn) {
  var cache = {}
  return function() {
    var args = Array.prototype.join.call(arguments, ',')
    if (args in cache) {
      return cache[args]
    }

    return cache[args] = fn.apply(this, arguments)
  }
}

var proxyMult = createProxyFactory(mult)

1
2
3
4
5
6
7
8
9
10
11
12
13

← 策略模式