代理模式
代理提供与本体一致的接口,在js中可以是代理可以是对象或者函数,分为保护代理和虚拟代理,js中常用的是虚拟代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>代理模式-图片懒加载</title>
</head>
<body>
<script>
// 代理(对象或者相同签名的函数)与本体具有一致的接口,JavaScript中常用的是虚拟代理,某些对象花销很大的对象,在真正需要的时候才去创建,如:虚拟代理实现图片懒加载
// 图片懒加载的方式:先通过一张loading图,然后通过异步的方式去加载真正需要的图片,加载完了替代原来的loading图
// 如下的imgNode与proxyImgNode就具有相同的接口setSrc,用户可使用代理的setSrc实现了图片懒加载
const imgNode = (function () {
const imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc(src) {
imgNode.src = src;
},
};
})();
const proxyImgNode = (function () {
const img = new Image();
img.onload = function () {
imgNode.setSrc(this.src);
};
return {
setSrc(src) {
// 默认占位图
imgNode.setSrc(
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
);
img.src = src;
},
};
})();
let src =
"https://s.cn.bing.net/th?id=OHR.RedwoodSprout_EN-C…806_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&qlt=35";
proxyImgNode.setSrc(src);
</script>
</body>
</html>
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
