JavaScript代理模式

代理模式:

当某个接口或者对象不满足我们的需求时,再重新定义一个对象来满足需求,重新定义的对象然后访问本体对象。

在代码中我们经常会遇到,如果某个ajax请求已经请求过了,那么将该api返回的数据结果缓存起来,那么下次再次请求该api,则会先从缓存中查找是否有该值,如果有,则返回,否则请求。这种情况提供的缓存逻辑,也属于代理模式。

通常我们也会遇到监听window上的scroll事件,当用户滚动鼠标滑轮时,将会触发scroll事件,如果滚动一下,会频繁触发scroll事件,即执行监听的函数太过于频繁,这时我们可以使用debounce函数(原理其实就是setTimeout),加个时间限制,如果从最后一次事件触发之后某个时间端都没有滚动过,再执行监听的函数,那么使用debounce包装的scroll事件也是一种代理模式。

总之就是对于原对象不满足需求的情况下,来重新定义并封装来满足需求。

举个缓存代理例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var getDataByUrl = function(url) {
return new Promise((resolve, reject) => {
resolve(url);
});
}

var proxyGetData = (function() {
var cache = {};
return function(url) {
if(cache[url]) {
console.log('from cache');
return cache[url];
} else {
var data = getDataByUrl(url);
cache[url] = data;
return data;
}
}
})();

console.log(proxyGetData('123'));
console.log(proxyGetData('123')); //输出 from cache

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!