einführen
Wie der Name schon sagt, sollen Agenten anderen helfen, Dinge zu tun. GOF definiert das Proxy -Modell wie folgt:
Der Proxy -Modus (Proxy) bietet einen Proxy für andere Objekte, um den Zugriff auf dieses Objekt zu steuern.
Mit dem Proxy -Modus kann das Proxy -Objekt die Referenz eines bestimmten Objekts steuern. Ein Proxy kann fast jedes Objekt sein: eine Datei, eine Ressource, ein Objekt im Speicher oder etwas, das schwer zu kopieren ist.
Text
Lassen Sie uns ein einfaches Beispiel geben. Wenn Dudu Joghurt und kleine Mädchen Rosen schicken möchte, aber ihre Kontaktinformationen nicht kennt oder verlegen ist und ihren Onkel anvertrauen möchte, diese Rosen zu schicken, dann ist der Onkel ein Agent (eigentlich ist es ziemlich gut, Sie können ein paar Blumen Ihrer Frau abziehen). Wie können wir es also tun?
Die Codekopie lautet wie folgt:
// Erkliere die Schönheit zuerst
var girl = function (name) {
this.name = name;
};
// Das ist Dudu
var DUDU = Funktion (Mädchen) {
this.girl = Mädchen;
this.sendgift = function (Geschenk) {
alert ("hi" + girl.name + ", Dudu gibt dir ein Geschenk:" + Geschenk);
}
};
// Der Onkel ist der Agent
var proxytom = function (Mädchen) {
this.girl = Mädchen;
this.sendgift = function (Geschenk) {
(New Dudu (Mädchen)). Sendgift (Geschenk); // Blumen für Dudu senden
}
};
Die Anrufmethode ist sehr einfach:
Die Codekopie lautet wie folgt:
var proxy = new Proxytom (neues Mädchen ("Joghurtmädchen");
Proxy.SendGift ("999 Rosen");
Ein praktischer Kampf
Über den obigen Code glaube ich, dass jeder im Proxy -Modus sehr klar ist. Nehmen wir den tatsächlichen Kampf: Wir haben eine einfache Wiedergabeliste und müssen die Einführung und Wiedergabetaste von Video -Songs unterhalb der Verbindung anzeigen, wenn Sie auf eine einzelne Verbindung klicken (oder alle auswählen). Beim Klicken auf die Wiedergabetaste wird das Video abgespielt. Die Listenstruktur lautet wie folgt:
Die Codekopie lautet wie folgt:
<h1> Dave Matthews vids </h1>
<p> <span id = "Toggle-All"> Wählen Sie alle/Sprechauswahl </span> </p>
<ol id = "vids">
<li> <Eingabe type = "CheckBox" checked> <a href = "http://new.music.yahoo.com/videos/--2158073"> gravedigger </a> </li>
<li> <Eingabe type = "Kontrollkästchen" checked> <a href = "http://new.music.yahoo.com/videos/--4472739"> Speichern Sie mich </a> </li>
<li> <Eingabe type = "Kontrollkästchen" checked> <a href = "http://new.music.yahoo.com/videos/--45286339"> Crush </a> </li>
<li> <Eingabe type = "Kontrollkästchen" checked> <a href = "http://new.music.yahoo.com/videos/--2144530"> Nicht das Wasser trinken </a> </li>
<li> <Eingabe type = "Kontrollkästchen" checked> <a href = "http://new.music.yahoo.com/videos/--217241800"> Lustig wie es ist </a> </li>
<li> <Eingabe type = "Kontrollkästchen" checked> <a href = "http://new.music.yahoo.com/videos/--2144532"> Was würden Sie sagen </a>
</li>
</ol>
Lassen Sie uns zunächst Folgendes analysieren. Zuerst überwachen wir nicht nur das Klickenereignis von Verbindung A, sondern auch das Klickereignis von "All/Anti-Select" und fordern Sie den Server an, die Videoinformationen abzufragen und die HTML-Informationen zusammenzustellen, um sie an der letzten Position des Li-Elements anzuzeigen. Der Effekt ist wie folgt:
Überwachen Sie dann den Klickereignis der Spielverbindung und beginnen Sie mit dem Spielen nach dem Klicken. Der Effekt ist wie folgt:
OK, fangen Sie mit, ohne jQuery, und passen Sie einen Selektor an:
Die Codekopie lautet wie folgt:
var $ = function (id) {
return document.getElementById (id);
};
Da der JSON -Service von Yahoo Callback -Parameter anbietet, geben wir unseren benutzerdefinierten Rückruf über, um Daten zu akzeptieren. Der spezifische Code für Abfrage -Zeichenfolge -Assembler lautet wie folgt:
Die Codekopie lautet wie folgt:
var http = {
MakeRequest: Funktion (IDs, Callback) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',,
sql = 'select * von music.video.id wobei IDs in ("%id%")',
format = "format = json",
Handler = "Callback =" + Callback,
script = document.createelement ('script');
SQL = SQL.Replace ('%id%', ids.join ('","'));
SQL = CODURIComponent (SQL);
URL + = SQL + '&' + Format + '&' + Handler;
script.src = url;
document.body.appendchild (script);
}
};
Das Proxy -Objekt lautet wie folgt:
Die Codekopie lautet wie folgt:
var proxy = {
IDS: [],
Verzögerung: 50,
Zeitüberschreitung: NULL,
Rückruf: NULL,
Kontext: null,
// Stellen Sie die angeforderte ID und den Rückruf ein, um den Rückruf während der Wiedergabe auszulösen
MakeRequest: Funktion (ID, Rückruf, Kontext) {
// zur Warteschlange zur Warteschlange hinzufügen
this.ids.push (id);
this.callback = callback;
this.context = context;
// Timeout festlegen
if (! this.timeout) {
this.timeout = setTimeout (function () {
Proxy.flush ();
}, this.delay);
}
},
// Die Anforderung auslösen, und http.makeRequest wurde unter Verwendung von Proxy -Verantwortlichkeiten aufgerufen
Flush: function () {
// Proxy.handler ist der Rückruf, wenn Sie Yahoo anfordern
http.makequest (this.ids, 'proxy.handler');
// Führen Sie nach Anforderung von Daten die Methode Proxy.Handler aus (es gibt einen weiteren Rückruf im Inneren).
// Timeout und Warteschlange löschen
this.timeout = null;
this.ids = [];
},
Handler: Funktion (Daten) {
var i, max;
// Rückrufanruf für ein einzelnes Video
if (parseInt (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
zurückkehren;
}
// Rückrufanrufe für mehrere Videos
für (i = 0, max = data.query.results.video.length; i <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
Das Video-Verarbeitungsmodul verfügt hauptsächlich um drei Unterfunktionen: Informationsinformationen, Informationen anzeigen und Videos abspielen:
Die Codekopie lautet wie folgt:
var videos = {
// Initialisieren Sie den Spielercode und beginnen Sie mit dem Spielen
getPlayer: function (id) {
zurück '' +
'<object id = "uvp_fop" duldfullscreen = "true">' +
'<param name = "movie" value = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" ////>' + +
'<param name = "flasvars" value = "id = v' + id + '& eid = 1301797 & lang = us & enablefullscreen = 0 & ShareEnable = 1" ///>' +
'<param name = "wmode" value = "transparent" ///>' +
'<Einbett' +
'height = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'DegentingFullscreen = "True"' +
'src = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"' +
'type = "application/x-shockwave-flash"' +
'flashvars = "id = v' + id + '& eid = 1301797 & lang = us & ympsc = 4195329 & enableFullScreen = 1 & shareEnable = 1"' +
'///' +
'<// Object>';
},
// Spleißen Sie die Informationen, um den Inhalt anzuzeigen, und zeigen Sie sie am Ende des Anhangs an Li an
Updatelist: Funktion (Daten) {
var id,
html = '',
Info;
if (Data.Query) {
Data = data.Query.Results.video;
}
id = data.id;
html + = '<img src = "' + data.image [0] .url + '" ///>';
html + = '<h2>' + data.titel + '<// H2>';
html + = '<p>' + data.copyrightyear + ',' + data.label + '<// p>';
if (data.album) {
html + = '<p> Album:' + data.album.release.title + ',' + data.album.release.releaseyear + '<br //>';
}
html + = '<p> <a href = "http://new.music.yahoo.com/videos/--' + id + '"> »Play </a> <// p>';
info = document.createelement ('div');
info.id = "info" + id;
info.innerhtml = html;
$ ('v' + id) .AppendChild (info);
},
// Informationen abrufen und anzeigen
getInfo: function (id) {
var info = $ ('info' + id);
if (! info) {
Proxy.MakeRequest (ID, Videos.Updatelist, Videos); // Führen Sie die Proxy -Verantwortlichkeiten aus und geben Sie in der Callback -Funktion von Videos.Updatelist über
zurückkehren;
}
if (info.style.display === "Keine") {
info.style.display = '';
} anders {
info.style.display = 'none';
}
}
};
Jetzt können wir den Code für Klickereignisse verarbeiten. Da es viele Verbindungen gibt, wird es offensichtlich ein Problem mit der Leistung geben, wenn jede Verbindung das Ereignis bindet. Daher binden wir das Ereignis an das <OL> -Element und erkennen dann, ob die geklickte Verbindung eine Verbindung ist. Wenn dies bedeutet, dass das Klick die Videoadresse ist und sie gespielt werden kann:
Die Codekopie lautet wie folgt:
$ ('vids'). onclick = function (e) {
var src, id;
e = e || Fenster.Event;
src = e.target || e.srcelement;
// Wenn es sich nicht um eine Verbindung handelt, werde ich nicht weiter verarbeiten
if (src.nodename.touppercase ()! == "a") {
zurückkehren;
}
// Blase stoppen
if (typeof e.preventDefault === "Funktion") {
E.PreventDefault ();
}
E. returnValue = false;
id = src.href.split ('-') [1];
// Wenn Sie auf den Link klicken, der im produzierten Videoinformationsbereich abgespielt wurde, beginnt die Wiedergabe
// dann wird die Rückkehr nicht fortgesetzt
if (src.className === "Play") {
src.parentnode.innerhtml = videos.getPlayer (id);
zurückkehren;
}
src.parentnode.id = "v" + id;
videos.getInfo (id); // Dies ist der Verarbeitungscode zum Anzeigen von Videoinformationen beim ersten Klicken zum ersten Mal
};
Die Codes für die Auswahl und Auswahl sind ähnlich, sodass wir nicht erklären werden:
Die Codekopie lautet wie folgt:
$ ('Toggle-All'). Onclick = Funktion (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). getElementsByTagName ('a');
für (i = 0, max = hrefs.length; i <max; i += 1) {
// Ignorieren Sie die Spielverbindung
if (hrefs [i] .className === "Play") {
weitermachen;
}
// Ignorieren Sie Elemente, die nicht ausgewählt sind
if (! hrefs [i] .Parentnode.Firstchild.Checked) {
weitermachen;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .Parentnode.id = "v" + id;
videos.getInfo (id);
}
};
Zusammenfassen
Der Proxy -Modus ist im Allgemeinen für die folgenden Situationen geeignet:
1. Remote -Proxy, dh lokale Darstellungen für ein Objekt in verschiedenen Adressräumen bereitzustellen, damit die Tatsache, dass ein Objekt in verschiedenen Adressräumen existiert, genau wie die Proxy -Klasse im Webdienst verborgen werden kann.
2. Virtuelle Agenten erstellen nach Bedarf Objekte mit hohem Overhead und speichern Sie sie, um echte Objekte zu speichern, deren Instanziierung lange dauert. Zum Beispiel kann beim Rendern des Browsers zuerst das Problem angezeigt werden, und das Bild kann langsam angezeigt werden (dh der virtuelle Agent ersetzt das reale Bild. Zu diesem Zeitpunkt speichert der virtuelle Agent den Pfad und die Größe des realen Bildes.
3. Security Agent, verwendet, um die Berechtigungen beim Zugriff auf reale Objekte zu steuern. Im Allgemeinen sollten Objekte unterschiedliche Zugriffsberechtigungen haben.
4. Intelligente Anleitung, nur wenn das eigentliche Objekt aufgerufen wird, behandelt der Agent andere Dinge. Beispielsweise hat die Müllsammlung in C# Referenzen bei der Verwendung eines Objekts. Wenn das Objekt keine Referenzen hat, kann GC es recyceln.
Referenz: "Big Talk Design Muster"