代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。
简单点讲，就是我们被希望直接通过操作A对象的，但是直接操作太复杂了，我们希望对A对象的操作少一点，这个时候就可以使用代理模式，生成一个代理对象，把部分操作放在这个代理对象上实现。
书中举的例子是图片预加载，我们就拿这个预加载说话好了。
图片预加载
假设我们要往网页中插入一个图片节点，我们本打算这么写。
var setMyImageSrc = (function () {
var img = document.createElement('img');
document.body.appendChild(img);
return function (src) {
img.src = src;
}
})();
setMyImageSrc('....jpg');
现在我们希望图片在加载的过程中呢，先显示一张占位图；当图片加载结束后呢，我们再替换这张图片。
代理模式的思路是这样：如果我们想要对一个对象添加功能；但是这个对象自身的功能是非常完备的；我们可以通过代理模式，添加一个代理对象，在不改动原对象的情况下，添加我们想要的功能。
在这里就是，我们需要添加一个setProxyImageSrc方法，来对setMyImageSrc添加一个预加载的功能。
var setProxyImageSrc = (function () {
var loadingIcon = '...';
setMyImageSrc(loadingIcon);
var img = new Image();
img.onload = function () {
setMyImageSrc(img.src);
}
return function (src) {
img.src = src;
}
})();
setProxyImageSrc('jpg');
这样，在不修改setMyImageSrc源码的情况下，我们通过增加一个setProxyImageSrc的代理，就成功添加了预加载的功能。
这就是代理模式。如果谁谁谁说现在不需要这个预加载的功能了，那我们只需要去掉这一层代理就可以了；增添功能还是很方便的。
收集请求
假如有很多个checkbox，每个checkbox点击的时候都会发出一个请求，过多的点击产生的过多的请求必然会对服务器产生压力。
按照代理模式的方式，我们先给出一个基本的情景。
<div id="form">
<input type="checkbox" id="1">
<input type="checkbox" id="2">
<input type="checkbox" id="3">
<input type="checkbox" id="4">
<input type="checkbox" id="5">
<input type="checkbox" id="6">
<input type="checkbox" id="7">
<input type="checkbox" id="8">
</div>
var form = document.getElementById('form');
form.onclick = function (e) {
var o = e.target;
if (o.type === 'checkbox' && o.checked) {
haveSomeOp(o.id);
}
}
var haveSomeOp = function (id) {
console.log(id);
}
现在我们有个需求，就是希望收集这些请求，不要立即发出；而是到达了一个周期时间后我们再一起发出。
var proxySomeOp = (function () {
var cache = [];
var timer = null;
return function (id) {
cache.push(id);
if (!timer) {
timer = setTimeout(function () {
haveSomeOp(cache.join(','));
cache = [];
timer = null;
}, 1000);
}
}
})();
然后我们将#form的点击事件修改为proxySomeOp就好啦。
网友评论