代理模式
与直接操作对象相比,代理模式为对象增加一个中间控制器,外部访问控制器来操作对象,而控制器则可以进行条件筛选、执行控制等。
图片预加载
// 图片预加载
(function(win){
// 直接加载
var loadImg = function(dom, src){
dom.src = src;
};
// 代理为预加载
var proxyLoadImg = (function(){
var img = new Image;
return function(dom, src){
loadImg(dom, "loading.gif");
img.src = src;
img.onload = function(){
loadImg(dom, this.src);
};
};
})();
win.loadImg = loadImg;
win.proxyLoadImg = proxyLoadImg;
})(window);
// 示例img 元素
var cnt = document.getElementById("testimg");
proxyLoadImg(cnt, "http://111.231.220.231/commonres/jpg/banner1.jpg");
合并非必要的频繁操作
效果同 高阶函数的 函数节流和分时函数。
可应用于合并HTTP请求,减少频繁的同类请求的请求次数。
/*示例: 跟踪记录鼠标位置.
控制: 每200ms才记录一个位置
每获取到超过10个就将数据传出(这里是打印出来)
*/
(function(win){
// 获取当前位置
var getPositionFixed = function(e){
e = e || win.event;
//firefox、chrome等浏览器
if(e.pageX || e.pageY){
return { left:e.pageX, top:e.pageY };
}
// IE浏览器
return {
left: e.clientX + document.body.scrollLeft - document.body.clientLeft,
top: e.clientY + document.body.scrollTop - document.body.clientTop
};
};
// 记录鼠标位置
var recordPositionFixed = (function(){
var cachePoints = []
, timer = null;
// 记录位置
var record = function(e){
var point = getPositionFixed(e);
cachePoints.push(point);
}
// 打印位置
var print = function(){
console.log("=======" + new Date);
for(var i in cachePoints){
console.log(cachePoints[i]);
}
}
// 清空位置
var clear = function(){
cachePoints = [];
}
// 返回函数
return function(e){
// 未满记录间隔,返回true,不做记录
if (timer) { return true; };
// 记录超过50打印并清空
if (cachePoints.length > 10){
print();
clear();
}
var args = arguments,
_this = this;
// 间隔200ms记录一次
timer = setTimeout(
function(){
clearTimeout(timer);
timer = null;
record.apply(_this,args);
},
200
);
};
})();
win.recordPositionFixed = recordPositionFixed;
})(window);
window.onmousemove = function(e){
recordPositionFixed(e);
};