天天一个设想形式·代办形式

博主按:《天天一个设想形式》旨在开端体会设想形式的精华,现在采纳
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. 参考

    原文作者:心谭
    原文地址: https://segmentfault.com/a/1190000017150316
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞