代理模式（Proxy Pattern）
常用的代理模式变种有以下几种：
- 保护代理
- 虚拟代理
- 缓存代理
1. 保护代理
- 举例
class Car {
drive() {
return "driving";
};
}
class CarProxy {
constructor(driver) {
this.driver = driver;
}
drive() {
// 保护代理，仅18岁才能开车
return (this.driver.age < 18) ? "too young to drive" : new Car().drive();
};
}
2. 虚拟代理
- 举例：图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片懒加载</title>
<style>
img {
display: block;
width: 400px;
height: 300px;
margin-bottom: 200px;
}
</style>
</head>
<body>
<img data-src="./images/1.jpg" >
<img data-src="./images/2.jpg" >
<img data-src="./images/3.jpg" >
<img data-src="./images/4.jpg" >
</body>
<script>
var imgs = document.querySelectorAll('img');
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function lazyLoad(imgs) {
var H = document.documentElement.clientHeight;//获取可视区域高度
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
lazyLoad(imgs);
}
</script>
</html>
3. 缓存代理
- 举例：缓存ajax请求数据
const getData = (function() {
const cache = {};
return function(url) {
if (cache[url]) {
return Promise.resolve(cache[url]);
}
return $.ajax.get(url).then((res) => {
cache[url] = res;
return res;
}).catch(err => console.error(err))
}
})();
getData('/getData'); // 发起http请求
getData('/getData'); // 返回缓存数据
总结
代理模式包括许多小分类，在 JavaScript 开发中最常用的是虚拟代理和缓存代理。虽然代理模式非常有用，但我们在编写业务代码的时候，往往不需要去预先猜测是否需要使用代理模式。当真正发现不方便直接访问某个对象的时候，再编写代理也不迟。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！