JavaScript-Entwurfsmuster, Proxy-Muster lernen

Überblick

Das Proxy-Muster gehört zu den strukturellen Entwurfsmustern innerhalb der Entwurfsmuster;

Definition:

Wie der Name schon sagt, stellt es einen Ersatz oder Platzhalter für ein Objekt bereit, um den Zugriff darauf zu kontrollieren!

Umgangssprachliche Erklärung:

Viele Prominente haben Agenten. Wenn sie den Agenten für kommerzielle Aufführungen oder Konzerte kontaktieren möchten, müssen sie zuerst den Agenten kontaktieren. Nachdem die Kooperationsfragen mit dem Agenten besprochen wurden, wird der Agent sie dem Prominenten übermitteln, und dann wird der Prominente an den Aktivitäten teilnehmen. Dasselbe gilt für die Anmietung eines Hauses. Egal, ob wir ein Haus mieten oder kaufen, unsere erste Reaktion ist definitiv, eine Plattform wie Lianjia zu finden, weil wir nur mit Lianjia kommunizieren müssen und Lianjia mit dem Vermieter kommuniziert, was uns den Schritt der direkten Kommunikation mit dem Vermieter erspart; da Lianjia ein Agenturmodell ist, fungiert es als Agent für die Wohnressourcen des Vermieters;

Durchführung

Zum Beispiel:

Als Starjäger sind Sie ein treuer Fan eines Stars. Es kommt vor, dass der Star bald Geburtstag hat und Sie ihm ein Geschenk schicken möchten, um Ihre Gefühle auszudrücken. Der normale Ablauf ist:

var Fans = {
    Blume(){
        star.reception("Stern");
    }
}

var Stern = {
    Empfang:Funktion(Geschenk){
        console.log("Von Fans erhalten: "+Geschenk);
    }
}

Fans.flower(); //Blumen von Fans erhalten

Sie haben sich entschieden, Blumen zu kaufen und sie ihr zu schicken, in der Hoffnung, dass sie Ihre Liebe spürt. Doch oft sind die Ideale zu komplex und die Realität sehr dürftig! Vergessen Sie den Agenten nicht, denn oft unterschreibt nicht der Star selbst, sondern der Agent Ihr Geschenk:

var Fans = {
    Blume(){
        Agent.reception("Empfang");
    }
}

var Agent = {
    Empfang:Funktion(Geschenk){
        console.log("Geschenk von Fans: "+Geschenk); //Geschenk von Fans: flowersstar.reception("Blumen");
    }
}
var Stern = {
    Empfang:Funktion(Geschenk){
        console.log("Von Fans erhalten: "+Geschenk);
    }
}

Fans.flower(); //Blumen von Fans erhalten

Der Agent ist hier ein einfacher Agent. Die Fans müssen dem Agenten zuerst Geschenke machen, und der Agent gibt sie dann selbst an den Star weiter.

Schutz-Agent

Als der Star voller Freude das von seinen Fans geschickte Paket sah, öffnete er es und stellte fest, dass es Blumen waren! Der Star reagierte sehr verächtlich und teilte seinem Agenten mit, dass von nun an jeder, der mir Blumen schicke, mir keine mehr schicken solle. Er könne das selbst regeln:

var Fans = {
    Blume(){
        Agent.reception("Empfang");
    }
}

var Agent = {
    Empfang:Funktion(Geschenk){
        console.log("Geschenk von Fans: "+Geschenk); //Geschenk von Fans: Blumenif(Geschenk != "Blumen"){
            star.reception("Stern");
        }
      
    }
}
var Stern = {
    Empfang:Funktion(Geschenk){
        console.log("Von Fans erhalten: "+Geschenk);
    }
}

Fans.flower();

Im obigen Programm hat der Star die von den Fans geschickten Blumen überhaupt nicht erhalten, da sie vom Agenten abgefangen und verarbeitet wurden. Das Herausfiltern einiger Geschenke durch den Agenten wird als Schutzagent bezeichnet.

Virtueller Agent

Wenn die Stars die von ihren Fans geschickten Blumen nicht erhalten, können die Fans ihre Meinung ändern und etwas Geld spenden, damit die Stars kaufen können, was sie möchten! Also suchte er einen Agenten, gab ihm eine Million in bar und bat ihn, das Geld selbst an den Star weiterzuleiten.

Funktion Geld(){
    this.total = "Eine Million in bar"
   gib dies zurück.total;
}
var Fans = {
    Blume(){
        Agent.Empfang();
    }
}

var Agent = {
    Empfang:Funktion(){
        // console.log("Geschenk von Fans: "+Geschenk);
        lass Geld = neues Geld();
        Stern.Empfang(Geld.Gesamt);
      
    }
}
var Stern = {
    Empfang:Funktion(Geschenk){
        console.log("Von Fans erhalten: "+Geschenk); //Von Fans erhalten: eine Million Bargeld}
}

Fans.flower();

Der Star war sehr glücklich, als er eine Million erhielt. Da die Million nicht ausgegeben wurde, wurde sie nicht vom Agenten abgefangen und gefiltert. Daher erhielt der Star sie direkt. Wir nennen dieses Modell das virtuelle Agentenmodell.

Virtueller Proxy zum verzögerten Laden von Bildern

Wenn kein Proxy vorhanden ist, sieht unser Code folgendermaßen aus:

// Erstelle ein Entity-Objekt var myImage = (function(){
  // Ein Tag erstellen var imgNode = document.createElement( 'img' );
  // Zur Seite hinzufügen document.body.appendChild( imgNode );
  zurückkehren {
    // Setze die Quelle des Bildes
    setSrc: Funktion( src ) {
      // Quelle ändern
      imgNode.src = Quelle;
    }
  }
})();

meinBild.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

Virtueller Agent

// Erstelle ein Entity-Objekt var myImage = (function(){
  // Ein Tag erstellen var imgNode = document.createElement( 'img' );
  // Zur Seite hinzufügen document.body.appendChild( imgNode );
  zurückkehren {
    // Setze die Quelle des Bildes
    setSrc: Funktion( src ) {
      // Quelle ändern
      imgNode.src = Quelle;
    }
  }
})();

// Ein Proxy-Objekt erstellen var proxyImage = (function(){
  //Erstellen Sie ein neues img-Tag. var img = neues Bild;
  // Ereignis zum Abschluss des Ladens des Bilds img.onload = function(){
    // Rufen Sie myImage auf, um die src-Methode zu ersetzen myImage.setSrc( this.src );
  }
  zurückkehren {
    // Proxy-Einstellungsadresse setSrc: function( src ){
      // Vorladen wird geladen
      meinImage.setSrc( 'file:// /C:/Benutzer/svenzeng/Desktop/loading.gif' );
      // Normale Bildadresse zuweisen img.src = src;
    }
  }
})();

proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

Der obige Code verwendet den Proxy-Modus, um das Vorladen von Bildern zu implementieren. Es ist ersichtlich, dass der Proxy-Modus die Erstellung von Bildern geschickt von der Vorladelogik trennt. Wenn in Zukunft kein Vorladen mehr erforderlich ist, ändern Sie einfach den Anforderungstext anstelle des Anforderungsproxyobjekts.

Oben finden Sie den detaillierten Inhalt des Proxy-Musters beim Erlernen von JavaScript-Entwurfsmustern. Weitere Informationen zu JavaScript-Entwurfsmustern finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!