JS设计模式初识(三)-代理模式

1、定义

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

3.1 基本概念

代理模式是一种很是有意义的模式，在生活中能够找到不少代理模式的场景。好比，明星都 有经纪人做为代理。若是想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演 出的细节和报酬都谈好以后，再把合同交给明星签。代理模式的关键是，当客户不方便直接访问一个对象或者不知足须要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求作出一些处理以后，再把请求转交给本体对象。

图： 3-1 不使用代理模式

图 3-2 使用代理模式

3.2 简单代理模式

3.2.1 基本代理实现

小明同窗喜欢大A, 他们之间有一个共同大朋友B，因而小明同窗经过代理B给大A女神送🌹，以提升本身追求女神的成功率。B会在大A心情愉悦的时候给A送花。

function Flower() {}
    const xiaoMing = {
        sendFlower: function(target) {
            target.recivedFlower(flower);
        }
    }
    // 大A女神
    const A = {
        recivedFlower: (flower) => {
            console.log('A recived => ',flower);
        },
        listenGoodMoon: (fn) => { //十秒后心情变好
            setTimeout(() => {
                fn && fn();
            }, 5000);
        }
    }
    // 代理B 监听A心情变好的时候送出花
    const B = {
        recivedFlower: (flower) => {
            A.listenGoodMoon(() => {
                const flower = new Flower(); // 延迟建立对象
                A.recivedFlower(flower);
            })
        }
    }

    xiaoMing.sendFlower(B);
复制代码

3.2.2 保护代理和虚拟代理

• 保护代理： 代理 B 能够帮助A过滤掉一些请求，好比送花的人中年龄太大的或者没有宝马的，这种请求就能够直接在代理 B 处被拒绝掉。这种代理叫做保护代理。A 和 B 一个充当白脸，一个充当黑脸。白脸 A 继续保持良好的女神形象，不但愿直接拒绝任何人，因而找了黑脸 B 来控制对 A 的访问。

• 虚拟代理： new Flower 也是一个代价昂贵的操做， 那么咱们能够把 new Flower 的操做交给代理 B 去执行，代理 B 会选择在 A 心情好时再执行 new Flower，这是代理模式的另外一种形式，叫做虚拟代理。虚拟代理把一些开销很大的对象，延迟到 真正须要它的时候才去建立。

3.3 虚拟代理实现惰性加载图片

// 虚拟代理实现惰性加载图片 ， 先展现展位图
    const myImage = (function(){
        const imgNode = document.getElementById('img');
        document.body.appendChild(imgNode);
        return {
            setSrc: (src) => {
                imgNode.src = src;
            }
        }
    })();

    const proxyImage = (function(){
        const img = new Image();
        img.onload = function() {
            myImage.setSrc(this.src);
        }
        return {
            setSrc: function(src) {
                myImage.setSrc('file://xxx.png'); // 占位图
                img.src = src;
            }
        }
    })();

    proxyImage.setSrc('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560084344566&di=1715e9c36a3ea72ebadea7f3dece0d50&imgtype=0&src=http%3A%2F%2F02.imgmini.eastday.com%2Fmobile%2F20170909%2F20170909181904_24a9ff37f7c98886769a9e85f15b7d60_1.jpeg');
复制代码

如今咱们经过 proxyImage 间接地访问 MyImage。proxyImage 控制了客户对 MyImage 的访问，并 且在此过程当中加入一些额外的操做，好比在真正的图片加载好以前，先把 img 节点的 src 设置为 一张本地的 loading 图片。

3.4 单一职责原则

单一职责原则指的是，就一个类(一般也包括对象和函数等)而言，应该仅有一个引发它变 化的缘由。若是一个对象承担了多项职责，就意味着这个对象将变得巨大，引发它变化的缘由可 能会有多个。面向对象设计鼓励将行为分布到细粒度的对象之中，若是一个对象承担的职责过多，等于把这些职责耦合到了一块儿，这种耦合会致使脆弱和低内聚的设计。当变化发生时，设计可能会遭到意外的破坏。

3.5 缓存代理

3.5.1 基本实现

// 缓存代理
    const mult = function() {
        let result = 1;
        for (let i=0; i<arguments.length; i++) {
            result *= arguments[i];
        }
        return result;
    }
    const proxyMult = (function() {
        const cache = {};
        return function() {
            const argsStr = Array.prototype.join.call(arguments, ',');
            if (argsStr in cache) {
                return cache[argsStr];
            }
            return cache[argsStr] = mult.call(this, arguments);
        }
    })();
    proxyMult(1,2,3,4);
复制代码

3.5.2 优化代码

// 优化代码
    const mult = (...args) => {
        return args.reduce((rs, item) => rs * item);
    }

    const proxyMult = (function() {
        const cache = {};
        return (...args) => {
            const argsStr = args.join(',');
            let result = cache[argsStr];
            return caches[argsStr] = result ? result : mult(...args);
        };
    })();
复制代码

3.5.3 衍生： 使用高阶函数来建立缓存代理工厂

// 使用高阶函数来建立缓存代理工厂
    const mult = (...args) => args.reduce((rs, item) => rs * item);
    const sum = (...args) => args.reduce((rs, item) => rs + item);
    // 高阶函数
    const createProxyFactory = (fn = ()=>{}) => {
        const cache = {};
        return (...args) => {
            const argsStr = args.join(',');
            const result = !isEmpty(cache) && cache[argsStr];
            return cache[argsStr] = result ? result : fn(...args);
        }
    }
    const proxyMult = createProxyFactory(mult);
    proxyMult(1,2,3,5);
复制代码

2、总结

代理模式包括许多小分类，在 JavaScript 开发中最经常使用的是虚拟代理和缓存代理。虽然代理 模式很是有用，但咱们在编写业务代码的时候，每每不须要去预先猜想是否须要使用代理模式。 当真正发现不方便直接访问某个对象的时候，再编写代理也不迟。