• Proxy mode · Original address
  • More Design Patterns Tutorial series
  • More Free tutorials

A Design Pattern a Day is designed to get a first look at design patterns and is currently implemented in javascript (for a living) and Python (purely for fun). Of course, there are multiple implementations of each design pattern, but this small volume only documents the most straightforward

0. Project address

  • Code for this lesson
  • A Design Pattern a day address

1. What is the proxy mode?

Definition of proxy pattern: Provide a proxy for an object to facilitate access to it.

The proxy pattern can solve the problem of avoiding direct access to some objects. On this basis, there are common protected proxies and virtual proxies. A protected proxy can deny access to objects directly in the proxy; Virtual agents can delay access until it is really needed to save overhead.

2. Advantages and disadvantages of the proxy mode

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

Similarly, objects are more expensive and slower because they are accessed through a “proxy.”

3. Code implementation

3.1 python3 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 the proxy pattern 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")

  # load only once, all others are blocked by the proxy
  Achieve the purpose of saving resources
  for i in range(0.10):
    proxyImg.load_img()

  proxyImg.display()
Copy the code

3.2 javascript implementation

main.js :

// main.js
constmyImg = { setSrc(imgNode, src) { imgNode.src = src; }};// Use proxy mode to load images lazily
const proxyImg = {
  setSrc(imgNode, src) {
    myImg.setSrc(imgNode, "./image.png"); // NO1. Load the placeholder image and place it in the  element

    let img = new Image();
    img.onload = (a)= > {
      myImg.setSrc(imgNode, src); // NO3. After loading, update the image in  element
    };
    img.src = src; // NO2. Load the image 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);
Copy the code

main.html :

<! -- main.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/Agent pattern per day</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>
Copy the code

4. Reference

  • The proxy pattern
  • JavaScript Design Patterns and Development Practices