Javascript设计模式之代理模式

前言：菜鸡也有梦想，而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理，从今天开始要保持每周写博客的习惯，希望自己可以有所成长。为了培养编程思维，决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式，并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法，感谢作者曾探大大写出这么好的一本书。如有冒犯，请联系本人：markcoder@outlook.com处理，请大家购买正版书籍。

1.代理模式介绍

代理模式的定义：为一个对象提供一种代理以方便对它的访问。
代理模式可以解决避免对一些对象的直接访问，以此为基础，常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问；虚拟代理可以延迟访问到真正需要的时候，以节省程序开销。

2.代码示例

图片懒加载

let myImage = (function () {
    let imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        SetSrc: function (src) {
            imgNode.src = src;
        }
    }
})();

let proxyImage = (function () {
    let img = new Image;
    img.onload = function () {
        myImage.SetSrc(this.src);
    }
    return {
        SetSrc: function (src) {
             myImage.SetSrc('xxx/loading.png');
             this.src = src;
        }
    }
})();

proxyImage.SetSrc('xxx/img.png'); // 真正要加载的图片
复制代码

3.缓存代理模式

let mult = function () {
    let a = 1;
    for (let i = 0; i < arguments.length; i++) {
        a = a * arguments[i];
    }
    return a;
}

let proxyMult = (function () {
    let cache = [];
    return function () {
        let args = Array.prototype.join.call(arguments, ',');
        if (cache[args]) {
            return cache[args]
        }
        return cache[args] = mult.apply(this, arguments);
    }
})()

 proxyMult( 1, 2, 3, 4 ); // 输出：24 
 proxyMult( 1, 2, 3, 4 ); // 输出：24
复制代码

4.用高阶函数动态创建代理

通过传入高阶函数这种更加灵活的方式，可以为各种计算方法创建缓存代理。现在这些计算方法被当作参数传入一个专门用于创建缓存代理的工厂中，这样一来，我们就可以为乘法、加法、减法等创建缓存代理，代码如下：

/**************** 计算乘积 *****************/ 
let mult = function(){ 
    let a = 1; 
    for ( let i = 0, l = arguments.length; i < l; i++ ){ 
        a = a * arguments[i]; 
    } 
    return a; 
}; 
/**************** 计算加和 *****************/ 
let plus = function(){ 
    let a = 0; 
    for ( let i = 0, l = arguments.length; i < l; i++ ){ 
        a = a + arguments[i]; 
    } 
    return a; 
}; 
/**************** 创建缓存代理的工厂 *****************/ 
let createProxyFactory = function( fn ){ 
    let cache = {}; 
    return function(){ 
        let args = Array.prototype.join.call( arguments, ',' ); 
        if (cache[ args ]){ 
            return cache[ args ]; 
        } 
        return cache[ args ] = fn.apply( this, arguments ); 
    } 
}; 
let proxyMult = createProxyFactory( mult ), 
proxyPlus = createProxyFactory( plus ); 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出：10 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出：10 
复制代码

参考

《JavaScript设计模式与开发实践》—— 曾探

转载于:https://juejin.im/post/5ca5b05c51882544114cdc60