Javascript proxy mode

This time I will bring you proxy mode of Javascript, what are the precautions of Javascript proxy mode, the following is a practical case, let’s take a look .

Definition of proxy mode: Provide a proxy for other objects to control access to this object. In some cases, one object is not suitable or cannot directly reference another object, and a proxy object can act as an intermediary between the client and the target object.

Virtual proxy delays the creation and execution of some expensive objects until they are really needed.

Lazy loading of images

//图片加载let imageEle = (function(){    let node = document.createElement('img');    document.body.appendChild(node);    return {        setSrc:function(src){
            node.src = src;
        }
    }
})();//代理对象let proxy = (function(){    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };    return {        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();
proxy.setSrc('example.png');

Merge http requests

If there is a function that requires frequent request operations, which is relatively expensive, you can collect the request data over a period of time through a proxy function and issue it all at once

//上传请求let upload = function(ids){
    $.ajax({        data: {            id:ids
        }
    })
}//代理合并请求let proxy = (function(){    let cache = [],
        timer = null;    return function(id){
        cache[cache.length] = id;        if(timer) return false;
        timer = setTimeout(function(){
            upload(cache.join(','));
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000);
    }  
})(); 
// 绑定点击事件let checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++];){
    c.onclick = function(){        if(this.checked === true){
            proxy(this.id);
        }
    }
}

Cache proxy

The cache proxy can provide temporary storage for some expensive operation results. During the next operation, if the parameters passed in are consistent with the previous ones, the previously stored operation results can be directly returned.

//计算乘积let mult = function(){    let result = 1;    for(let i = 0,len = arguments.length;i < len;i++){
        result*= arguments[i];
    }    return result;
}//缓存代理let proxy = (function(){    let cache = {};
    reutrn function(){        let args = Array.prototype.join.call(arguments,&#39;,&#39;);        if(args in cache){            return cache[args];
        }        return cache[args] = mult.apply(this,arguments);
    }
})();

Advantages and Disadvantages

Advantages: The proxy mode can separate the proxy object from the called object, reducing the coupling of the system. The proxy mode plays an intermediary role between the client and the target object, which can protect the target object. The proxy object can also perform other operations before calling the target object.

Disadvantages: Increases the complexity of the system

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Strategy pattern of Javascript

Using function throttling in JS

The above is the detailed content of Javascript proxy mode. For more information, please follow other related articles on the PHP Chinese website!