1.png
2.png
image.png
想快递?
像中介?
image.png
邓哥的例子
dddd
图片懒加载案例
dddd
昨天单例模式的学习时,
感觉一些闭包,可以改成类似"函数工厂",
比如节流,防抖,缓存,等等.
现在觉得可以都改成构造函数.返回对象.
这是不是也符合面向对象的思想? 对象为程序的单位?
比如防抖
闭包版本
var aaaaa = (function () {
var lastTime = 0;
return function () {
if (new Date().getTime() - lastTime > 1000) {
console.log('aaa');
lastTime = new Date().getTime();
}
}
})()
btn.onclick = aaaaa;
函数工厂版本
function debounce (fun) {
var lastTime = 0;
return function () {
if (new Date().getTime() - lastTime > 1000) {
lastTime = new Date().getTime();
return fun.apply(this,arguments);
}
};
}
function aaa () {
console.log('aaa');
}
var aaaa = debounce(aaa);
btn.onclick = aaaa;
返回对象版本
function Debounce (fun) {
var lastTime = 0;
this.debounce = function () {
if (new Date().getTime() - lastTime > 1000) {
lastTime = new Date().getTime();
return fun.apply(this,arguments);
}
};
}
function aaa () {
console.log('aaa');
}
var a = new Debounce(aaa);
btn.onclick = a.debounce;
不过这样似乎没什么意思?
比起直接定义在一个对象上,lastTime 成了私有变量?
作业1.0图片懒加载多个图片加载?
var div = [].slice.call(document.getElementsByTagName('div'));
var MyImage = function (dom) {
var oImg = new Image();
this.setSrc = function (src) {
oImg.src = src;
}
dom.appendChild(oImg);
}
function ProxyImage (dom) {
var oMyImg = new MyImage(dom);
var newImage = new Image();
newImage.onload = function () {
oMyImg.setSrc(newImage.src);
}
this.proxy = function (src) {
oMyImg.setSrc('./img/1.jpg');
newImage.src = src;
}
}
var appSrc = new ProxyImage(div[0]);
var url = 'http://s9.knowsky.com/bizhi/l/20090808/200910296%20%2841%29.jpg';
// ProxyImage(url);
btn.onclick = function () {
appSrc.proxy(url);
}
这写的啥玩意..
dddd
作业2.0 事件累积?
先写一波事件点击改变属性的操作.
写得时候感觉写得挺溜的,
写完之后发现可读性很差,毫无维护性,扩展性可言..
通篇也没有用到什么面相对象的东西.
dddd
duyi
up
down
事件累积?
刚开始这么想的,用debounce
var debounce = (function () {
// 让每个函数拥有同一个 timer
var timer = null;
return function (fun,delay) {
var delay = delay || 1000;
return function () {
var self = this;
var args = arguments;
timer = setTimeout(function () {
fun.apply(self,args);
},delay);
}
}
})();
... 此部分与上面相同
var newArrUp = arr.map(function (item,index) {
return debounce(fatherUp(item));
});
var newArrDown = arr.map(function (item,index) {
return debounce(fatherDown(item));
});
...此部分与上面相同
我的思路是,首先要实现延迟,自然想到debounce 防抖
要互相之间影响,所以让他们拥有同一个timer,
结果,后一个操作会取消前一个操作,
也就是说,
我们需要每次操作的时候,把不同的函数操作,放进一个函数里,然后延迟执行?
事件累积作业2.0版本
我们让每个button点击事件都绑定同一个函数,
每个点击事件会传一个参数,来决定要改变哪个属性.
但会有延迟.