核心
在业务代码中，由于不方便直接去访问一个对象的时候，写一个高阶函数简介的去调用这个本体方法。
场景说明
场景一
小明喜欢白富美A，有一天决定送一束花给A，但是这货怂，于是他找到了他们的共同好友B。让B帮忙把花送给A。
// 这是不用代理的情况，小明直接送花给A
var Flower = function(){}
var xiaoming = {
sendFlower(target){
var flower = new Flower();
target.receiveFlower(flower);
}
}
var A = {
receiveFlower(flower){
console.log("收到花",flower);
}
}
xiaoming.sendFlower(A);
这种函数式编程真的挺。。。
解析成三部分：花，小明和白富美A
小明有一个动作就是送花sendFlower，送花的动作需要触发白富美A的收花的动作receiveFlower。两者的参数都是flower。
使用代理的操作
var Flower = function(){}
var xiaoming = {
sendFlower(target){
var flower = new Flower();
target.receiveFlower(flower);
}
}
var B = {
receiveFlower(flower){
A.receiveFlower(flower);
}
}
var A = {
receiveFlower(flower){
console.log("收到花",flower);
}
}
xiaoming.sendFlower(B);
场景二
使用图片延迟加载代理模式
不使用代理
var myImage = (function(){
var imgNode = document.createElement('div');
document.body.appendChild(imgNode);
return {
setSrc(src){
imgNode.src = src;
}
}
})();
myImage.setSrc('https://www.baidu.com/images/1.jpg');
上述代码中直接load图片，在图片加载完毕之前。图片位置是一片空白部分。
使用代理模式
var myImage = (function(){
var imgNode = document.createElement('div');
document.body.appendChild(imgNode);
return {
setSrc(src){
imgNode.src = src;
}
}
})();
var proxyImage = (function(){
var img = new Image();
img.onload = function(){
myImage.setSrc(this.src);
}
return {
setSrc(src){
myImage.setSrc('../images/loading.gif');
img.src = src;
}
}
})();
proxyImage.setSrc('https://www.baidu.com/images/1.jpg');
上述代码中在图片加载之前图片不在是空白部分，而是一张loading.gif的占位图，优化了用户体验。
使用proxyImage去执行真实的图片加载过程。在加载图片之前先使用一个加载图片占位。
感觉上面的代理模式好弱逼。
下面用非代理模式来讲解下：
var myImage = (function(){
var imgNode = document.createElement('div');
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function(){
imgNode.src = img.src;
}
return {
setSrc(src){
myImage.setSrc('../images/loading.gif');
img.src = src;
}
}
})();
myImage.setSrc('https://www.baidu.com/images/1.jpg');
上述代码中myImage对象除了负责给img节点设置src外，还负责预加载图片。这就违反了面向对象设计的 单一职责原则。如果以后我不需要预加载的话，就需要重新改写myImage函数了。
而上面的proxyImage代理方式就不用了。直接将方法换成myImage使用就可以了。
代理和本体接口的一致性
通过上面两个图片预加载的代码中可以看出来，代理和本体都有一致的接口。使用代理还是使用本地都可以达到最终目的。
- 在任何使用本体的地方都可以替换成代理使用。
- 用户可以放心的请求代理，他只关心是否能得到想要的结果。
这个是代理模式的核心特点。
如果代理对象和本体对象都为一个函数，函数必然都能被执行，则认为它们具有一致的“接口”。
var myImage = (function(){
var imgNode = document.createElement('div');
document.body.appendChild(imgNode);
return function(src){
imgNode.src = src;
}
})();
var proxyImage = (function(){
var img = new Image();
img.onload = function(){
myImage.setSrc(this.src);
}
return function(src){
myImage.setSrc('../images/loading.gif');
img.src = src;
}
})();
myImage('https://www.baidu.com/images/1.jpg');
proxyImage('https://www.baidu.com/images/1.jpg');
// 两个方法都可以被执行
虚拟代理合并HTTP请求
场景中需要频繁获取http请求的时候，一般会做函数节流。另外一种可以使用这种代理模式实现HTTP的请求合并。将一段时间内的请求合并之后一次性的发送给服务器。
<html>
<body>
<label><input type="checkbox" id="1">1</label>
<label><input type="checkbox" id="2">2</label>
<label><input type="checkbox" id="3">3</label>
<label><input type="checkbox" id="4">4</label>
<label><input type="checkbox" id="5">5</label>
</body>
<script>
var synchronousFile = function(id){
console.log('开始同步文件,id为：',id);
}
var proxySynchronousFile = (function(){
var cache = []; // 保存一段时间内需要同步的ID
var timer = null; // 计时器
return function(id){
cache.push(id);
if(timer) return; // 计时器保证不会覆盖已经启动的定时器
timer = setTimeout(function(){
synchronousFile( cache.join(',') );
clearTimeout(timer);
timer = null;
cache = [];
},2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i=0,c;c=checkeboxs[i++]){
c.onclick = function(){
if(this.checked === true){
proxySynchronousFile(this.id);
}
}
}
</script>
</html>
缓存代理
高阶函数动态创建代理
/************计算阶乘积*************/
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 = 1;
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);
var proxyPlus = createProxyFactory(plus);
console.log(proxyMult(1,2,3,4));
console.log(proxyMult(1,2,3,4));
console.log(proxyPlus(1,2,3,4));
console.log(proxyPlus(1,2,3,4));
createProxyFactory这个函数接收一个函数作为参数，并在其内部定义了一个对象cache。并将接收的新函数的参数作为key挂载到cache对象上。从而实现缓存。
但是这样做有什么牛逼的地方呢？高阶函数？
小结
一般在写代码的时候，都不会直接考虑使用代理模式，都是在发现不方便直接操作和访问某个对象的时候，再去编写代理模式去操作。
感觉这个模式有点弱鸡，而且使用场景不多。
网友评论