One design pattern per day · agent pattern

Blogger's note: one design pattern per day aims to initially understand the essence of the design pattern. Currently, it is implemented in two languages: javascript (eat on this) and python (pure like). Sure, there are many ways to implement each design pattern, but this booklet only records the most straightforward way:)

0. Project address

1. What is agent mode?

Definition of Proxy Pattern: provide a proxy for an object to facilitate its access.

Agent mode can avoid direct access to some objects. Based on this, common protection agents and virtual agents are used. The protection agent can directly deny access to the object in the agent; the virtual agent can delay access to the real need to save program cost.

2. Advantages and disadvantages of agent mode

The agent mode has the advantages of high decoupling, object protection and easy modification.

Similarly, because objects are accessed through a proxy, the overhead is greater and the time is slower.

3. Code implementation

3.1 Python 3 Implementation

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)

# Implement agent mode with inheritance
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")

  # Only load once, others are blocked by agent
  # To save resources
  for i in range(0,10):
    proxyImg.load_img()

  proxyImg.display()

3.2 javascript implementation

main.js :

// main.js
const myImg = {
  setSrc(imgNode, src) {
    imgNode.src = src;
  }
};

// Lazy loading of pictures with agent mode
const proxyImg = {
  setSrc(imgNode, src) {
    myImg.setSrc(imgNode, "./image.png"); // NO1. Load the placeholder image and place the image in the < img > element

    let img = new Image();
    img.onload = () => {
      myImg.setSrc(imgNode, src); // NO3. Update the picture in the < img > element after loading
    };
    img.src = src; // NO2. Load the pictures you really need
  }
};

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>One design pattern per day · proxy pattern</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

4. reference

proxy pattern
JavaScript Design Pattern and development practice

Keywords: Javascript Python IE

Added by samyl on Fri, 06 Dec 2019 12:39:22 +0200

Programming VIP