javascript代理模式

代理模式:为一个对象提供一个替代品或占位符，以便控制对它的访问

var Flower = function () { this.name = "玫瑰"; }; var xiaoming = { senfFlower: function (target) { var flower = new Flower(); target.receiveFlower(flower); } }; var B = { receiveFlower:function (flower) { A.receiveFlower(flower); } }; var A = { receiveFlower: function (flower) { console.log('收到花'+flower.name); } }; xiaoming.senfFlower(B);

保护代理和虚拟代理

保护代理 B帮助A过滤掉不合适的操作

虚拟代理 某些资源创建将耗费大量的资源，等到真正需要时再创建 假设花的创建很耗费资源

var Flower = function () { this.name = "玫瑰"; }; var xiaoming = { senfFlower: function (target) { target.receiveFlower(); } }; var B = { receiveFlower: function () { A.listenGoodMood(function () { var flower = new Flower(); A.receiveFlower(flower); }) } }; var A = { receiveFlower: function (flower) { console.log('收到'+flower.name) }, listenGoodMood: function (fn) { //假设10秒后心情变好 setTimeout(function () { fn(); }, 10000) } }; xiaoming.senfFlower(B);

使用小图对大图加载前做填充占位

var myImage = (function () { var imgNode = document.createElement('img'); document.body.appendChild(imgNode); return { setSrc: function (src) { imgNode.src = src; } } })(); //使用代理小图加载完成后再替代 var proxyImage = (function () { var img = new Image; img.onload = function () { myImage.setSrc(this.src); }; return { setSrc: function (src) { myImage.setSrc('./3.jpg'); //先使用小图进行填充 img.src = src; } } })(); proxyImage.setSrc('./2.jpg');

使用代理模式合并请求

并不是每一次用户的请求都需要被同步到服务器端，可以根据数据请求量或者时间间隔合并数据后一次性发送

var button = document.getElementById('button'); button.onclick = function () { var number = Math.random(); proxySync(number); }; //同步的代理,用来拦截同步请求，只有同步请求超过20次才发送同步请求 var proxySync = (function () { var cache = []; var synarr = function () { for(var i in cache){ sysData(cache[i]); } }; return function (number) { if (cache.length < 20){ cache[cache.length] = number; }else{ /*console.log('开始上传');*/ synarr(); cache = []; } }; })(); //实际上用来服务端同步的操作 var sysData = function (number) { console.log(number+'被同步'); }

当然还可以用代理对象做中间的请求缓存，避免提升代码性能