# 设计模式:代理模式
# 什么是代理模式
为对象提供一个替代品,让他替你做一些事情。
# 使用场景
最典型的要属于图片懒加载,比如一个网站有很多大图。每次加载都需要很长时间,为了优化这一操作。我们可以先给大图设定一个 loading 动画。等大图加载完毕时在给 img 标签替换为原本的图片。
# Coding
图片懒加载
var proxyImg = function(id, src) {
let img = document.getElementById(id);
let tempImg = new Image();
// 设置 loading 动图
img.src = 'http://www.xxx.com/loading.gif';
// 定义临时变量,等临时变量加载好图片后在重置图片地址
tempImg.onload = function() {
img.src = src;
}
// 重置图片地址
tempImg.src = src;
}
// 调用
proxyImg('myImg', '大图片地址')
es6 实现方式
class ProxyImg{
constructor(id){
this.img = document.getElementById(id);
// 设置 loading 动图
this.img.src = 'http://www.xxx.com/loading.gif';
this.tempImg = new Image();
}
setSrc(src) {
this.tempImg.onload = function() {
this.img.src = src
}
this.tempImg.src = src
}
}
let proxyImg = new ProxyImg('myImg');
proxyImg.setSrc('大图片地址')
代理模式的存在意义
上面这样的图片懒加载效果,不使用代理模式代码也不会复杂到哪里去。但是你的函数的就会出现两个任务
- 为图片设置路径
- 处理懒加载问题
这样的代码是不规范的,在面向对象设计原则中有一种叫“单一职责原则”。指的是你的函数必须只有一个目的。如果一个函数一旦承担了多个功能,那就意味着将来要修改的时候就要考虑对其他功能的影响,一旦影响到了其他功能又可能会影响到下一个模块的功能。这是软件开发中最令人头痛的问题。所以严格遵守“单一职责原则”是降低代码耦合度的好的方法。
# 总结
本章我们通过一个简单的图片懒加载的例子,了解什么是代理模式。以及一种面向对象设计原则“单一职责原则”。代理模式其实还有很多应用场景, 缓存代理
:比如缓存 ajax 请求,保护代理
访问前做权限判断等。在对某个对象进行读写前可以考虑是否需要 代理模式
。
← 设计模式:策略模式 设计模式:迭代器模式 →