js design patterns: what is the proxy pattern? Introduction to js proxy mode

This article brings you content about js design patterns: What is the proxy pattern? The introduction of js proxy mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is proxy mode?

Scenario: Xiao Ming chases girl A

• Non-agent mode: Xiao Ming=花=> Girl A

• Agent mode: Xiao Ming =花=> Let girl A’s friend B help =花=> Girl A

##Definition: Provide an agent for other objects to control this object Access.

Mainly solves: Problems caused when accessing objects directly, for example: the object to be accessed is on a remote machine. In object-oriented systems, direct access to some objects will cause a lot of trouble to users or the system structure due to certain reasons (for example, object creation is expensive, or certain operations require security control, or require out-of-process access). We can add an access layer to this object when accessing this object.

When to use: Want to have some control when accessing an object.

How to solve: Add an intermediate layer.

Application examples: 1. Shortcuts in Windows. 2. When Zhu Bajie went to find Gao Cuilan, he turned out to be Sun Wukong. It can be understood like this: Gao Cuilan's appearance was abstracted, and both Gao Cuilan and Sun Wukong implemented this interface. When Zhu Bajie visited Gao Cuilan, he couldn't tell that this was Sun Wukong, so Sun Wukong was said to be Gao Cuilan. Agent class. 3. You don’t have to buy train tickets at the train station, you can also go to an agency. 4. A check or bank deposit certificate is a proxy for the funds in the account. Checks are used in place of cash in market transactions and provide control over the funds in the issuer's account. 5. spring aop.

Advantages: 1. Clear responsibilities. 2. High scalability. 3. Intelligent.

Disadvantages: 1. Since a proxy object is added between the client and the real subject, some types of proxy modes may cause the request processing speed to slow down. 2. Implementing the proxy mode requires additional work, and the implementation of some proxy modes is very complex.

Usage scenarios: Divided according to responsibilities, there are usually the following usage scenarios: 1. Remote agent. 2. Virtual agent. 3. Copy-on-Write agent. 4. Protect (Protect or Access) agent. 5. Cache agent. 6. Firewall proxy. 7. Synchronization agent. 8. Smart Reference agent.

Notes: 1. The difference between the adapter pattern and the adapter pattern: the adapter pattern mainly changes the interface of the object under consideration, while the proxy pattern cannot change the interface of the proxy class. 2. The difference between the decorator mode and the decorator mode: the decorator mode is to enhance the function, while the proxy mode is to control it.

There are many types of proxy modes. The most commonly used ones in JS are virtual proxy and caching proxy.

Virtual proxy implements image preloading

The following code uses the proxy mode to implement image preloading. You can see that the proxy mode cleverly separates the image creation and preloading logic, and in If preloading is not needed in the future, just change the request ontology instead of the request proxy object.

const myImage = (function() {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc('loading.jpg') // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc('http://loaded.jpg')

Cache proxy implements product calculation

const mult = function() {
  let a = 1
  for (let i = 0, l; l = arguments[i++];) {
    a = a * l
  }
  return a
}

const proxyMult = (function() {
  const cache = {}
  return function() {
    const tag = Array.prototype.join.call(arguments, ',')
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()

proxyMult(1, 2, 3, 4) // 24

Recommendation: Don’t guess whether you need to use the proxy mode during development. If you find that it is inconvenient to use an object directly, it is not too late to optimize it.

Related recommendations:

js design pattern: What is the strategy pattern? Introduction to js strategy pattern

#js design pattern: What is singleton pattern? Introduction to js singleton mode

The above is the detailed content of js design patterns: what is the proxy pattern? Introduction to js proxy mode. For more information, please follow other related articles on the PHP Chinese website!