Hey, sure you don't want to learn about the js proxy pattern?

Definition

The proxy pattern is to provide a surrogate or placeholder for an object in order to control access to it. The key to the proxy pattern is to provide a surrogate object to control access to an object when it is not convenient for the demander to access it directly or when the need is not met. The demander actually accesses the surrogate object, and the surrogate object, after doing some processing of the request, then passes the request to the native object.

Patterns

There are several variants of the generic proxy pattern, but the main ones commonly used in Javascript are virtual proxy and cached proxy, so let's focus on those two topics.

Virtual Proxies

In web application development, image preloading is a practical and effective technical tool, by taking a place with a loading image, waiting for the asynchronous loading of the image to complete and then populating the img tag with the new image. So in this business scenario, the image preloading technique improves not only the user experience, but also brings technical feasibility to the virtual proxy mode.

Here is an example of image preloading implemented 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' )

Caching proxies

The purpose of the cache proxy is to provide temporary storage for the results of some overhead operations, so that the next call, with the same parameters and results, returns the results directly from the cache instead of doing the ontology again, reducing the number of ontology calls.

Example

Suppose there is a sum function that computes the sum, and a corresponding proxySum proxy function that controls the result set via memory cache. We see that when proxySum(2, 3, 4) is called a second time, the ontology sum function is not computed, but returns the cached result directly. In this example, we can see that the caching proxy plays to its strengths, allowing the sum function to focus more on its own computational responsibilities, and the cache is implemented by the proxy object, which is a good example of the separation of concerns and single responsibility principles.

var sum = function (. .args) {
  console.log("Starting sum calculation");
  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);
    return cache[key];
  };
})();

console.log(proxySum(2, 3));
console.log(proxySum(2, 3, 4));
console.log(proxySum(2, 3, 4));