This chapter introduces a structural design pattern-Proxy Pattern.

define

Providing a proxy for an object to control access to it adds a means of access, such as an expensive action that can be loaded on demand and then created using it

There are many kinds of proxy modes, and the following figure is just a partial list. I’ll pick out a few common front-end models that I know about

Graph TD proxy mode --> Remote Proxy proxy mode --> Virtual proxy proxy mode --> Cache proxy proxy mode --> Protected proxy proxy mode --> Intelligent Reference proxy

Virtual agent

The front end is more commonly used virtual agents such as picture lazy loading, preloading (some people confuse the two), here is an example of preloading, such as Alipay hungry me takeout often have the scratch card or flip the red envelope, this situation can be used preloading

    // Create three cards
    <div class="card-box" @click="handleClick": > < img SRC = "SRC" data - SRC = "~ D: / picture/HBMZ. The article PNG" > < img SRC = "SRC" data - SRC = "~ D: / picture/HBMZ. The article PNG" > < img: SRC = "SRC" Data-src ="~D:/ article image /hbmz.png" > </div> <img id="img" SRC ="~D:/ hbmz.png" style="display: none">Copy the code

Foster a

    class IM {
        constructor(img) {
            this.img = img
        }
        replace(src) {
            this.img.src = src
        }
    }
    
    function handleClick(e) {
        const preload = document.getElementById('img')  
        new IM( e.target ).replace( preload.src )
    }
Copy the code

The caching proxy

Front-end classic caching proxy – factorial

  function factorial(n) {
      console.log('Recalculate factorial')
      if (n < 2) {
          return n
      } else {
          return n * factorial(n-1)
      }  
  }
    
   
  factorial(3)
  factorial(3) 
  // This will print 2 * 3 times
Copy the code

Sometimes we don’t want to recalculate factorials every time, so let’s add a cache

  function factorial(n) {
      console.log('Recalculate factorial')
      if (n < 2) {
          return n
      } else {
          return n * factorial(n-1)}}function proxy(fn) {
        const catchObject = {}
        
        return function(key) {
            if (key in catchObject) {
                return catchObject[key]
            } else {
                return catchObject[key] = fn(key)
            }                
        }
  }
    
    
    const instance = proxy(factorial)
    instance(3)
    instance(3)
    instance(3)
    
    // We find that no matter how many times we "repeat", we only count once
Copy the code

Front-end classic caching proxy – TAB

    <div class="tab" onClick="handleClick">
        <span> 1 </span>
        <span> 2 </span>
        <span> 3 </span>
    </div>
    <div class="content">
        <! -- Get different data according to TAB -->
    </div>
    
    class ProxyTab {
        static catch = {}
        constructor(target) {
            if(! ProxyTab.catch[target]) { ProxyTab.catch[target] =this.http()
            }
        }
        http() {
           return axios.get('xxx')}}function handleClick(e) {
        new ProxyTab(e.target)
    }
Copy the code

Similar scenarios also have paging, event proxy (UL proxy LI event), this time I will write so much

The last whisper

Starting and finishing something is more important than doing it well. Because once you start, you have a chance to make it better and “now” is the best time to do it anyway, just start, okay