博主按：《天天一个设想形式》旨在开端体会设想形式的精华，现在采纳
javascript（_靠这用饭_）和
python（_地道喜好_）两种言语完成。固然，每种设想形式都有多种完成体式格局，但此小册只纪录最直接了当的完成体式格局 :)
0. 项目地点
1. 什么是代办形式？
代办形式的定义：为一个对象供应一种代办以轻易对它的接见。
代办形式能够处理防止对一些对象的直接接见，以此为基础，罕见的有庇护代办和假造代办。庇护代办能够在代办中直接谢绝对对象的接见；假造代办能够耽误接见到真正须要的时刻，以节约顺序开支。
2. 代办形式优缺点
代办形式有高度解耦、对象庇护、易修正等长处。
同样地，由于是经由过程“代办”接见对象，因而开支会更大，时候也会更慢。
3. 代码完成
3.1 python3 完成
class Image:
def __init__(self, filename):
self.filename = filename
def load_img(self):
print("finish load " + self.filename)
def display(self):
print("display " + self.filename)
# 借助继续来完成代办形式
class ImageProxy(Image):
def __init__(self, filename):
super().__init__(filename)
self.loaded = False
def load_img(self):
if self.loaded == False:
super().load_img()
self.loaded = True
def display(self):
return super().display()
if __name__ == "__main__":
proxyImg = ImageProxy("./js/image.png")
# 只加载一次，别的均被代办阻拦
# 到达节约资本的目标
for i in range(0,10):
proxyImg.load_img()
proxyImg.display()3.2 javascript 完成
main.js :
// main.js
const myImg = {
setSrc(imgNode, src) {
imgNode.src = src;
}
};
// 应用代办形式完成图片懒加载
const proxyImg = {
setSrc(imgNode, src) {
myImg.setSrc(imgNode, "./image.png"); // NO1. 加载占位图片而且将图片放入<img>元素
let img = new Image();
img.onload = () => {
myImg.setSrc(imgNode, src); // NO3. 完成加载后, 更新 <img> 元素中的图片
};
img.src = src; // NO2. 加载真正须要的图片
}
};
let imgNode = document.createElement("img"),
imgSrc =
"https://upload-images.jianshu.io/upload_images/5486602-5cab95ba00b272bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp";
document.body.appendChild(imgNode);
proxyImg.setSrc(imgNode, imgSrc);main.html :
<!-- main.html -->
<!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>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>4. 参考
- 代办形式
- 《JavaScript 设想形式和开辟实践》
