define

The proxy pattern provides a proxy or placeholder for an object to control access to it. Proxy mode is the key when the demand is not convenient to have direct access to an object or does not meet the need of time, to provide a double object to control access to the object, the demand side, in fact, access is the double objects, double object after some processing of the request, the request again to ontology.

model

There are several variants of the general proxy pattern, but the main ones used in Javascript are virtual and cache proxies, and let’s focus on these two topics.

Virtual agent

In the process of Web application development, image preloading is a practical and effective technical means. By loading a loading image and waiting for the completion of the asynchronous loading image, a new image is filled into the IMG tag. In this business scenario, image preloading technology not only improves user experience, but also brings technical feasibility to virtual agent mode.

Here is an example of image preloading using a virtual proxy:

var myImage = (function () {
  var imgNode = document.createElement('img');
  document.body.appendChild(imgNode);

  return {
    setSrc: function(src) { imgNode.src = src; }}; }) ();var proxyImage = (function () {
  var img = new Image();
  img.onload = function() {
    myImage.setSrc(this.src);
  };

  return {
    setSrc: function(src) {
      myImage.setSrc('/Users/biubiubiu/projects/blog/static/loading.gif'); img.src = src; }}; }) (); proxyImage.setSrc('https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/e4dde71190ef76c6ac26b6319516fdfaaf516737.jpg')
Copy the code

The caching proxy

The purpose of the cache proxy is to provide temporary storage for some costly operation results, so that when the next call is made, the results can be directly returned from the cache under the condition that the parameters and results remain unchanged, rather than re-performing ontology operations to reduce the number of ontology calls.

The sample

Assuming that there is a sum function to calculate the sum and a corresponding proxySum proxy function to control the result set through the memory cache, we will find that when proxySum(2, 3, 4) is called for the second time, the ontology sum function is not computed, but directly returns the cached calculation results. In this example, we can see that the caching proxy works to its advantage by allowing the sum function to focus more on its computational responsibilities. Caching is implemented by the proxy proxy object, which is a good example of the separation of concerns and single responsibility principle.

var sum = function (. args) {
  console.log("Start summing up.");
  var a = 0;
  for (let i = 0; i < args.length; i++) {
    a += args[i];
  }
  return a;
};

var proxySum = (function () {
  var cache = {};
  return function (. args) {
    console.log(args);
    const key = args.join(",");
    if (Object.prototype.hasOwnProperty.call(cache, key)) {
      return cache[key];
    }
    
    cache[key] = sum.apply(this, args);
    returncache[key]; }; }) ();console.log(proxySum(2.3));
console.log(proxySum(2.3.4));
console.log(proxySum(2.3.4));

Copy the code