1. 代理模式的定义
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。
class Goole{
constructor() { }
get() {
return 'google';
}
}
class Proxy {
constructor() {
this.google=new Goole();
}
get() {
return this.google.get();
}
}
2. 场景
2.1 虚拟代理实现图片预加载
const myImage = (function(){
const imgNode = document.createElement( 'img' );
document.body.appendChild( imgNode );
return {
setSrc: function( src ){
imgNode.src = src;
}
}
})();
const proxyImage = (function(){
const img = new Image;
img.onload = function(){
myImage.setSrc( this.src );
}
return {
setSrc: function( src ){
myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
img.src = src;
}
}
})();
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
2.2 事件委托
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let list = document.querySelector('#list');
list.addEventListener('click',event=>{
alert(event.target.innerHTML);
});
</script>
</body>
2.3 使用Proxy双向绑定
function bindHTMLContentWithObject(el, obj = {}) {
let str = el.innerHTML;
update();
function update() {
el.innerHTML = str.replace(/\{([^}]+)\}/g, function () {
return obj[arguments[1]]
});
}
let temp = {
get(target, key) {
if (typeof target[key] === 'object') return new Proxy(obj, temp)
return Reflect.get(target, key);
},
set(target, key, value) {
update();
return Reflect.set(target, key, value);
}
}
return new Proxy(obj, temp);
}
2.4 虚拟代理合并 HTTP 请求
const synchronousFile = function (id) {
console.log('开始同步文件，id为: ' + id);
};
const proxySynchronousFile = (function () {
let cache = [], // 保存一段时间内需要同步的 ID
timer; // 定时器
return function (id) {
cache.push(id);
if (timer) { // 保证不会覆盖已经启动的定时器
return;
}
timer = setTimeout(function () {
synchronousFile(cache.join(',')); // 2 秒后向本体发送需要同步的 ID集合
clearTimeout(timer); // 清空定时器
timer = null;
cache.length = 0; // 清空 ID集合
}, 2000);
}
})();
const checkbox = document.getElementsByTagName('input');
for (let i = 0, c; c = checkbox[i++];) {
c.onclick = function () {
if (this.checked === true) {
proxySynchronousFile(this.id);
}
}
}
