javaScript设计模式与实践 - 代理模式

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

直接上例子:

1. 小明喜欢一个美女，又不好意思亲自送花，于是请来一个中间人(zhongjie)，但是美女心情不好的时候表白几率成功很小。

var flower = {}
    var xiaoming = {
        sendFlower(duixiang) {
            duixiang.getFlower(flower)
        }
    }

    var zhongjie = {               //中间人
        getFlower(flow) {
            meinv.listenMood(meinv.getFlower.bind(meinv, flow))  //监听小美心情  好起来送花
            //也叫保护代理
        }
    }

    var meinv = {
        count: 500,
        getFlower(flow) {
            console.log('getflower')
        },
        listenMood(fn) {
            setTimeout(() => {       // 假设美女发送信号，5秒之后心情才好起来。
                fn()
            }, 5000)
        }
    }

    xiaoming.sendFlower(zhongjie)

2. 虚拟代理实现图片预加载

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

    var proxyImage = (function () {
        var img = new Image;
        img.onload = function () {
            setTimeout(() => {
                myImage.setSrc(img.src)
            }, 3000)
        }
        return {
            setSrc: function (src) {
                myImage.setSrc('./icon.png')      //初始图片
                img.src = src
            }
        }
    })()

    proxyImage.setSrc('./diff算法和生命周期.jpg')

一.要素:

• 代理和真实对象需要调用一致，以假乱真。
• 这里proxyImage做了一件事，帮忙加载 真正需要加载的src.等到onload完成 才加载出来。

3. 缓存代理工厂

 //缓存代理工厂
    function chengfa() {
        var a = 1;
        for (var i = 0; i < arguments.length; i++) {
            a = a * arguments[i]
        }
        return a;
    }
    function jiafa() {
        var a = 0;
        for (var i = 0; i < arguments.length; i++) {
            a = a + arguments[i]
        }
        return a;
    }

    var proxy = function (fun) {
        var cache = {}
        return function () {
            var keys = Array.prototype.join.call(arguments, ',')
            if (cache[keys]) {
                return cache[keys]
            }
            return cache[keys] = fun(...arguments)
        }
    }

    var res = proxy(jiafa)
    var res2 = res(1, 2, 3, 4)
    console.log(res2)
    

参考资料

1. javaScript 设计模式开发与实践 --曾探 著

2. javaScript 设计模式核心原理与应用实践 --修言