代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。
简单点讲,就是我们被希望直接通过操作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
就好啦。