Javascript设计模式（五）代理模式

使用者无权访问目标对象，经过代理作受权和控制

代理模式是一种很是有意义的模式。在生活中也能找到代理模式的情景，好比，明星都有经纪人做为代理，若是想请明星来办一场商业演出，只能联系他的经纪人，经纪人会把商业演出的细节和报酬都谈好以后，再将合同交给明星签。

代理实现图片懒加载

在前端开发中，图片懒加载是一项很是实用的技术。为了性能优化，咱们经常在图片加载以前用一张图片占位，等图片加载完成以后再将图片填充到src上，这种场景就很容易实用代理模式。

var myImage = (function() {
    var imgNode = document.createElement('img')
    document.body.appendChild(imgNode)
    return {
        setSrc: function(src) {
            imgNode.src = src
        }
    }
})()

var proxyImage = (function(){
    var img = new Image()
    img.onload = function() {
        myImage.setSrc(img.src)
    }
    return {
        setSrc: function(src) {
            myImage.setSrc('./loading.gif')
            img.src = src
        }
    }
})()

proxyImage.setSrc('https://user-gold-cdn.xitu.io/2016/11/29/805fd2776ae656464329c04f63181266?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1')

经过proxyImage间接访问MyImage。proxyImage控制来客户对MyImage的访问，而且在此过程当中加入一些额外的操做，好比在图片加载前，先将src设置为本地的loading图。

缓存代理

缓存代理能够为一些开销较大的运算结果暂时的存储，在下次运算时，若是传递的值一致，则能够直接返回前面存储的结果。

// 建立一个乘积函数
var mult = function() {
    console.log('开始计算乘积')
    var a = 1
    for(var i = 0, l = arguments.length; i<l ; i++) {
        a = a*arguments[i]
    }
    return a
}
// 加入缓存代理函数
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)
    }
})()

proxyMult(1,2,3,4) //24
proxyMult(1,2,3,4) //24

当第二次调用proxyMult的时候，本体mult并无直接计算，proxyMult直接返回以前的结果

引入代理的意义

为了说明代理的意义，下面引入一个面向对象的设计原则：单一职责原则

1. 一个类（对象或者函数）而言，应该只能有一个引发它变化的缘由。若是一个对象承担了多项职责，那么引发变化的缘由可能就有多个。
2. 实际上增长懒加载图片只是一个景上添花的行为。纵观整个程序，咱们并无改变myImage的接口，可是经过代理，给接口添加了新的行为，若是某天不须要了，也不用修改本体。