Detaillierte Erläuterung des Proxy-Musters von JS-Entwurfsmustern

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung von JSEntwurfsmusterProxy-Modus, was sind die Hinweise zum JS-Proxy-Modus, im Folgenden sind praktische Fälle aufgeführt , einer Steh auf und schau es dir an.

Konzept: Das Proxy-Muster soll einen Ersatz oder Platzhalter für ein Objekt bereitstellen, um den Zugriff darauf zu steuern. Das heißt, um die Einzelverantwortung des aktuellen Objekts sicherzustellen, muss ein weiteres Objekt erstellt werden, das eine gewisse Logik des aktuellen Objekts verarbeitet, um die Codeeffizienz zu verbessern, den Status zu bestimmen usw. Der Proxy kann fast jedes Objekt sein: Dateien, Ressourcen , Objekte im Speicher oder einige Dinge, die schwer zu kopieren sind, umfassen Remote-Agenten, virtuelle Agenten und intelligente Führung. Ich werde hauptsächlich die beiden häufigsten Agentenmodi vorstellen, nämlich virtuelle Agenten.

Funktion und Vorsichtsmaßnahmen
1. Remote-Proxy (ein lokaler Proxy für Objekte in verschiedenen Räumen)
2. Virtueller Proxy (muss teure Objekte erstellen, z. B. das Laden von Bildern)
3. Sicherheits-Proxy (steuert Zugriffsrechte auf reale Objekte)
4. Intelligente Führung (Aufruf des Objekt-Proxys, um andere Dinge zu handhaben, z. B. den Garbage Collection-Mechanismus)
Hinweise:
Missbrauchen Sie den Proxy nicht erhöht die Komplexität des Codes.

Sehen wir uns die virtuelle Proxy-Implementierung des Bildvorladens an

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

Das andere ist das Zusammenführen von HTTP-Anfragen durch einen virtuellen Proxy

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

Ich glaube, Sie haben es nach dem Lesen gemeistert Fall in diesem Artikel Methode, weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des Builder-Musters von JS-Designmustern

Detaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmuster

js-Entwurfsmuster – die Verwendung von Singleton-Mustern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Proxy-Musters von JS-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!