Detailed explanation of the proxy pattern of JS design patterns

This time I will bring you JSDesign PatternAgent ModeDetailed explanation, what are the Notes of JS Agent Mode, the following is a practical case, one Get up and take a look.

Concept: The proxy mode is to provide a substitute or placeholder for an object to control access to it. That is, in order to ensure the single responsibility of the current object, another object needs to be created to handle some logic of the current object to improve code efficiency, determine status, etc. The proxy can be almost any object: files, resources, objects in memory, or some Things that are difficult to copy. Common agents include remote agents, virtual agents, security agents, and intelligent guidance. I will mainly introduce the two most common agent modes, which are virtual agents.

Function and Precautions
1. Remote proxy (one space locally proxies objects in different spaces)
2. Virtual proxy (needs to create expensive objects, such as image loading)
3. Security proxy (controlling access rights to real objects)
4. Intelligent guidance (calling the object proxy to handle other things, such as garbage collection mechanism)
Notes:
Do not abuse the proxy. Sometimes it just increases the complexity of the code.

Let’s look at the virtual agent to implement image preloading

// 图片加载函数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("file://c:/loading.png");
            img.src = src;
        }
    }
})();// 调用代理对象加载图片proxyImage.setSrc( "http://images/qq.jpg");

The other is the virtual agent to merge http requests

// 文件同步函数var synchronousFile = function( id ){
    console.log( "开始同步文件，id为：" + id );
}// 使用代理合并请求var proxySynchronousFile = (function(){
    var cache = [], // 保存一段时间内需要同步的ID
        timer; // 定时器指针
    return function( id ){
        cache[cache.length] = id;        if( timer ){            return;
        }
        timer = setTimeout( function(){
            proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
            clearTimeout( timer ); // 清空定时器
            timer = null;
            cache = [];
        },2000 );
    }
})();// 绑定点击事件var checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++]; ){
    c.onclick = function(){
        if( this.checked === true ){            // 使用代理进行文件同步
            proxySynchronousFile( this.id );
        }
    }
}

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed Explanation of the Builder Pattern of JS Design Patterns

Detailed Explanation of the Constructor Pattern of JS Design Patterns

js design pattern - the use of singleton pattern

The above is the detailed content of Detailed explanation of the proxy pattern of JS design patterns. For more information, please follow other related articles on the PHP Chinese website!