Mode proxy Javascript

Cette fois, je vous présente le mode proxy de Javascript et quelles sont les précautions du mode proxy Javascript. Ce qui suit est un cas pratique. un regard.

Définition du modèle de proxy : Fournissez un proxy pour d'autres objets afin de contrôler l'accès à cet objet. Dans certains cas, un objet ne convient pas ou ne peut pas référencer directement un autre objet, et un objet proxy peut servir d'intermédiaire entre le client et l'objet cible.

Les agents virtuels retardent la création et l'exécution de certains objets coûteux jusqu'à ce qu'ils soient réellement nécessaires

Chargement paresseux des 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');

Demande http de fusion

S'il existe une fonction qui nécessite des opérations de requête fréquentes, ce qui est relativement coûteux, vous pouvez collecter les données de la requête sur une période donnée via une fonction proxy et les envoyer immédiatement

//上传请求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

Le proxy de cache peut fournir un stockage temporaire pour certains résultats d'opérations coûteuses. Lors de l'opération suivante, si les paramètres transmis sont cohérents avec les précédents, les résultats de l'opération précédemment stockés peuvent être directement renvoyés

//计算乘积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);
    }
})();

Avantages et inconvénients

Avantages : Le mode proxy peut séparer l'objet proxy de l'objet appelé, réduisant ainsi le couplage du système. Le mode proxy joue un rôle intermédiaire entre le client et l'objet cible, ce qui peut protéger l'objet cible. L'objet proxy peut également effectuer d'autres opérations avant d'appeler l'objet cible.

Inconvénients : augmente la complexité du système

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

Modèle de stratégie de Javascript

Utilisation de la limitation de fonctions dans JS

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!