Explication détaillée du modèle de proxy des modèles de conception JS

Cette fois je vous apporte une explication détaillée de JSDesign PatternMode Proxy, quelles sont les Notes du mode Proxy JS, voici des cas pratiques , un Levez-vous et jetez un œil.

Concept : Le modèle de proxy consiste à fournir un substitut ou un espace réservé pour un objet afin d'en contrôler l'accès. Autrement dit, afin d'assurer la responsabilité unique de l'objet actuel, un autre objet doit être créé pour gérer une certaine logique de l'objet actuel afin d'améliorer l'efficacité du code, déterminer l'état, etc. Le proxy peut être presque n'importe quel objet : fichiers, ressources , les objets en mémoire ou certaines choses difficiles à copier. Les agents courants incluent les agents distants, les agents virtuels, les agents de sécurité et les conseils intelligents. Je présenterai principalement les deux modes d'agent les plus courants, qui sont les agents virtuels.

Fonction et précautions
1. Proxy distant (un espace proxy localement des objets dans différents espaces)
2 Proxy virtuel (nécessite de créer des objets coûteux, tels que le chargement d'images)
3. Proxy de sécurité (contrôle les droits d'accès aux objets réels)
4. Guidage intelligent (appel du proxy d'objet pour gérer d'autres choses, comme le mécanisme de récupération de place)
Remarques :
N'abusez pas du proxy. augmente la complexité du code.

Regardons l'agent virtuel pour implémenter le préchargement d'images

// 图片加载函数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");

L'autre est l'agent virtuel fusionnant les requêtes http

// 文件同步函数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 );
        }
    }
}

Je crois que vous l'avez maîtrisé après en lisant le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée du modèle de constructeur des modèles de conception JS

Explication détaillée du modèle de constructeur de Modèles de conception JS

modèle de conception js - utilisation du modèle singleton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!