The agency model is the equivalent of hiring an assistant, who does the chores for you, minimizes your workload, and takes care of the core (you have to do) tasks yourself.

  1. define

Provides a proxy or placeholder for an object to control access to it

  1. The core

Provide a surrogate object to control access to an object when it is inconvenient for the client to directly access it or when it is not desirable. The client actually accesses the surrogate object.

After the proxy object does some processing of the request, it passes the request to the ontology object

The interface between the proxy and the ontology is consistent, the ontology defines the key functionality, and the proxy provides or denies access to it, or does something extra before accessing the ontology

  1. implementation

There are three proxy modes: protected proxy, virtual proxy, and cache proxy

The protection proxy mainly implements the restrictive behavior of accessing principals, using filtering characters as a simple example

// The body sends the message
function sendMsg(msg) {
    console.log(msg);
}

// proxy to filter messages
function proxySendMsg(msg) {
    // If there is no message, return directly
    if (typeof msg === 'undefined') {
        console.log('deny');
        return;
    }
    
    // If there are messages, filter them
    msg = (' ' + msg).replace(/ mud \s* coal /g.' ');

    sendMsg(msg);
}


sendMsg('Peat, peat, peat.'); // Peat, peat
proxySendMsg('Peat, peat.'); / /!
proxySendMsg(); // deny
Copy the code

Its intent is clear: to control access to the subject before it is accessed, to return it directly in the proxy when there is no message, to deny access to the subject, in the form of a data protection proxy

Sensitive characters are processed when messages are sent, which is the virtual proxy pattern

The virtual agent adds some additional operations to control access to principals

When the scrolling event is triggered, perhaps not as frequently, we can introduce function throttling, which is an implementation of virtual proxies

function debounce(fn, delay) {
    delay = delay || 200;
    var timer = null;
    return function() {
        var arg = arguments;
        // At each operation, the last timer is cleared
        clearTimeout(timer);
        // Define a new timer to operate after a period of time
        timer = setTimeout(function() {
            fn.apply(this, arg); }, delay); }};var count = 0;
/ / the main body
function scrollHandle(e) {
    console.log(e.type, ++count); // scroll
}
/ / agent
var proxyScrollHandle = (function() {
    return debounce(scrollHandle, 500); }) ();window.onscroll = proxyScrollHandle;
Copy the code

The cache proxy can provide temporary cache for some expensive results and improve efficiency

Let’s talk about cache addition

        / / the main body
        function add() {
            var arg = [].slice.call(arguments);
            console.log("Computing");
            return arg.reduce((a, b) = > a + b);
        }
        / / agent
        var proxyAdd = (function () {
            var cache = [];
            return function () {
                var arg = [].slice.call(arguments);
                if(cache[arg]){
                    return cache[arg]
                }else{
                    cache[arg]=add.apply(this,arg);
                    return cache[arg]
                }
            }
        })()

        console.log(
            add(1.2.3.4),
            proxyAdd(10.20.30.40),
            proxyAdd(10.20.30.40),
            proxyAdd(10.20.30.40));// 10 100 100 100 100
Copy the code