proxy pattern

Let's review the questions left by the strategic model in the previous chapter:

Assuming that the company's performance grade is divided into A, B, C, D and E, the corresponding grade points of the year-end bonus are 2, 1.8, 1.5, 1.1 and 0.8. Assuming that the year-end base is base, the year-end bonus is: year-end base * grade point. Given the performance level, ask for the employee's year-end bonus.

// Mapping relationship between performance grade and grade point
const levelToCredit = {
    A: 2,
    B: 1.8,
    C: 1.5,
    D: 1.1,
    E: 0.8
}

// Year end bonus calculation logic
function getsalary(base, level) {
  return levelToCredit[level] * base
}

The agent mode is a bit like the role of an agent, which can complete non core transactions. Suppose we want to use a function to load an image on the page. The code should be as follows:

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

imgNode.setSrc('https://img.com/banner.png ') / / load picture

In fact, when we call setSrc, we will launch a network request. Before the picture resource returns, the picture is blank. In order to avoid flickering when the picture returns, we add loading for the picture. Suppose you modify the above code directly at the beginning:

var imgNode = (function () {
  // Nodes that really show pictures
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  // proxy node
  var proxyImg = document.createElement('img')
  // When the proxy image is loaded, assign the link of the image to the display node
  proxyImg.onload = function() {
    imgNode.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      // Pre loading
      imgNode.src = 'https://img.com/loading.gif'
      // The proxy node starts to request picture data
      proxyImg.src = src
    }
  }
})()

imgNode.setSrc('https://img.com/banner.png ') / / load picture

Such code is believed to be the first choice of many people, including the scheme I began to think of. What are the disadvantages of such code?
In the future, it is assumed that the network speed is fast to the extreme, so the loading occupied image will cause the page to flicker. At this time, if you want to remove the proxy method, you need to modify the logic of the function, which violates the principle of openness and closure.
Moreover, the two responsibilities of agent and node creation are coupled to a function, which also violates the principle of single responsibility. But now you may only know that we should abide by these principles. As for why, few people pay attention to it, and few articles explain why in detail.
From my personal development experience, it can be understood as follows:

Suppose that there are two functions A and B in A requirement, and the function B is to help A do something; Xiao Wang wrote these two functions in function F. one day, the product will cut off the function of B, and then Xiao Wang leaves. Xiao Li takes over his work to cut off B. after reading the code, Xiao Li finds that cutting off B has to modify the whole function of F. Xiao Li not only needs to understand function f, but also needs to remove function B from function f, and finally needs to ensure that function A is not affected. After such A meal, Xiao Li felt that the whole person was not good, because he just wanted to cut off B.
Unfortunately, he also needs to understand the A function, the code interface and modification of F function at the same time. Such A development model is very fatal in large-scale applications, which is easy to lead to poor stability of the whole project, and the developed code is easy to become A mutual mental burden.

Suppose we use the proxy mode to separate B. returning to the above example, first of all, we are the code without proxy, and the imgNode function is responsible for generating an image:

var imgNode = (function () {
  // Create displayed picture node
  const imgNode = document.createElement('img')
  // Mount to body
  document.body.appendChild(imgNode)
  // Expose setSrc
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()


var proxyImg = (function(){
  // Picture node
  let node = null
  // Create proxy node
  const proxyImg = document.createElement('img')
  // After the picture is loaded, set node as the src of the proxy picture
  proxyImg.onload = function() {
    node.setSrc(this.src)
  }
  return (imgNode) => {
    return {
      setSrc: function(src) {
        // Use proxy image node request
        proxyImg.src = src
        // Cache node
        node = imgNode
        // Set the picture of the display picture node to loading
        img.setSrc('https://img.com/loading.png')
      }
  }
  }
})()

const img = proxyImg(imgNode)
img.setSrc('https://img.com/banner.png')

Here, proxyImg is a completely icing on the cake function. Assuming that the network speed is fast to a certain extent in the future, this loading can be eliminated. Then we can use img normally without an agent Replace setsrc with imgnode Setsrc implements the function. So what are the characteristics of the proxy mode? First, it implements the same api as the original function, so that when the proxy mode is cancelled, it will not be greatly changed due to the differences of APIs.