代理模式
原理
客户 ==> 代理 ==> 本体
是不是很像如下:
客户端 ==> nginx ==> 服务器
代理模式: 是为一个对象提供一个替代品,准确说是占位符, 用来控制它的访问.
尤其这个对象是一些性能开销很大的对象, 该种代理叫做虚拟代理.
虚拟代理: 把一些开销很大的对象延迟到需要它的时候才创建.
虚拟代理举例说明
- 图片懒加载
在某些拥有大量图片的页面(电商尤为常见), PC端常用的一种技术叫做图片懒加载(移动端尤其).原理这里就不做介绍了.
主要说下图片懒加载下的虚拟代理实现.
<!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>Document</title>
</head>
<body>
</body>
<script>
window.onload = function () {
// 图片懒加载函数
const myImage = (function (src) {
let imgNode = document.createElement('img')
document.body.appendChild(imgNode)
return {
setSrc (src) {
imgNode.src = src
}
}
})()
// 代理对象
const proxyImage = (function () {
const img = new Image();
img.onload = function () {
// 加载真正的图片
myImage.setSrc(this.src)
}
return {
set (url) {
myImage.setSrc('./1.jpeg') // 本地的loading图片
img.src = url
}
}
})()
setTimeout(() => {
proxyImage.set('https://publish-pic-cpu.baidu.com/4d09f82c-db73-468c-8e5f-9656876891f2.jpeg@f_webp,q_90,w_230')
}, 5000)
}
</script>
</html>
上述懒加载功能当然可以直接写在一个函数里面实现:
但是使用代理, 有如下一些好处:
- 细粒度化: 函数各司其职,单一职责原则.
- 降低耦合.方便后期维护或者扩展.
缓存代理
缓存代理: 多用于大量数据计算时候,或者存储时候.为了避免不必要的重复计算,我们可以使用缓存代理,提升代码的性能.减少代码执行时间.
下述以一个计算加法的例子描述缓存代理的使用.
// 处理计算的函数: 求数组中元素的和
const sum = (list) => list.reduce((v, i) => v + i, 0)
// 代理对象
const proxySum = (function () {
// 缓存对象
var cache = {}
return function () {
// 已缓存的标识符
let flag = Array.prototype.join.call(arguments, '-')
if (flag in cache) {
// 返回缓存
console.log('返回缓存数据')
return cache[flag]
}
console.log('第一次计算')
return cache[flag] = sum.apply(this, arguments)
}
})()
console.log(proxySum([1,2,3,4,5,6,7,8,9,10])) // 第一次计算 55
console.log(proxySum([1,2,3,4,5,6,7,8,9,10])) // 返回缓存数据 55
