Javascript-Proxy-Modus

Dieses Mal stelle ich Ihnen den Proxy-Modus von Javascript und die Vorsichtsmaßnahmen des Javascript-Proxy-Modus vor. Nehmen wir das Folgende ein Blick.

Definition des Proxy-Musters: Stellen Sie einen Proxy für andere Objekte bereit, um den Zugriff auf dieses Objekt zu steuern. In einigen Fällen ist ein Objekt nicht geeignet oder kann nicht direkt auf ein anderes Objekt verweisen, und ein Proxy-Objekt kann als Vermittler zwischen dem Client und dem Zielobjekt fungieren.

Virtuelle Agenten verzögern die Erstellung und Ausführung einiger teurer Objekte, bis sie tatsächlich benötigt werden

Verzögertes Laden von Bildern

//图片加载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');

HTTP-Anfrage zusammenführen

Wenn es eine Funktion gibt, die häufige Anforderungsvorgänge erfordert, was relativ teuer ist, können Sie die Anforderungsdaten über einen bestimmten Zeitraum über eine Proxy-Funktion sammeln und sofort versenden

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

Der Cache-Proxy kann temporären Speicher für einige teure Operationsergebnisse bereitstellen. Wenn die übergebenen Parameter bei der nächsten Operation mit den vorherigen übereinstimmen, können die zuvor gespeicherten Operationsergebnisse direkt zurückgegeben werden

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

Vor- und Nachteile

Vorteile: Der Proxy-Modus kann das Proxy-Objekt vom aufgerufenen Objekt trennen, wodurch die Kopplung des Systems verringert wird. Der Proxy-Modus spielt eine Vermittlerrolle zwischen dem Client und dem Zielobjekt und kann das Zielobjekt schützen. Das Proxy-Objekt kann vor dem Aufruf des Zielobjekts auch andere Vorgänge ausführen.

Nachteile: Erhöht die Komplexität des Systems

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Strategiemuster von Javascript

Funktionsdrosselung in JS verwenden

Das obige ist der detaillierte Inhalt vonJavascript-Proxy-Modus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!