js代理模式,处理缓存
实战经常用的
先创建一个用于求乘积的函数: var mult = function(){ console.log( '开始计算乘积' ); var a = 1; for ( var i = 0, l = arguments.length; i < l; i++ ){ a = a * arguments[i]; } return a; }; mult( 2, 3 ); // 输出:6 mult( 2, 3, 4 ); // 输出:24 现在加入缓存代理函数: 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( 1, 2, 3, 4 ) 的时候,本体 mult 函数并没有被计算, proxyMult
直接返回了之前缓存好的计算结果。
通过增加缓存代理的方式, mult 函数可以继续专注于自身的职责——计算乘积,缓存的功能
是由代理对象实现的。
用高阶函数动态创建代理
通过传入高阶函数这种更加灵活的方式,可以为各种计算方法创建缓存代理。现在这些计算,
方法被当作参数传入一个专门用于创建缓存代理的工厂中, 这样一来,我们就可以为乘法、加
法、减法等创建缓存代理,代码如下:
/**************** 计算乘积 *****************/ var mult = function(){ var a = 1; for ( var i = 0, l = arguments.length; i < l; i++ ){ a = a * arguments[i]; } return a; }; /**************** 计算加和 *****************/ var plus = function(){ var a = 0; for ( var i = 0, l = arguments.length; i < l; i++ ){ a = a + arguments[i]; } return a; }; /**************** 创建缓存代理的工厂 *****************/ 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 ), 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