introduire
Comme son nom l'indique, les agents doivent aider les autres à faire des choses. GOF définit le modèle proxy comme suit:
Le mode proxy (proxy), fournit un proxy pour d'autres objets pour contrôler l'accès à cet objet.
Le mode proxy permet à l'objet proxy de contrôler la référence d'un objet spécifique. Un proxy peut être presque n'importe quel objet: un fichier, une ressource, un objet en mémoire ou quelque chose qui est difficile à copier.
texte
Donnons un exemple simple. Si Dudu veut envoyer des roses de yaourt et de petites filles, mais ne connaît pas ses coordonnées ou est gênée, et veut confier son oncle à envoyer ces roses, alors l'oncle est un agent (en fait, c'est plutôt bien, vous pouvez déduire quelques fleurs à votre femme), alors comment pouvons-nous le faire?
La copie de code est la suivante:
// déclare d'abord la beauté
var girl = function (name) {
this.name = name;
};
// c'est dudu
var dudu = fonction (fille) {
this.girl = girl;
this.sendgift = fonction (cadeau) {
alert ("hi" + girl.name + ", Dudu vous offre un cadeau:" + cadeau);
}
};
// L'oncle est l'agent
var proxytom = fonction (fille) {
this.girl = girl;
this.sendgift = fonction (cadeau) {
(New Dudu (fille)). Sendgift (cadeau); // Envoyez des fleurs pour dudu
}
};
La méthode d'appel est très simple:
La copie de code est la suivante:
var proxy = new proxytom (nouvelle fille ("girl de yogourt"));
proxy.sendgift ("999 roses");
Une bataille pratique
Grâce au code ci-dessus, je crois que tout le monde est très clair sur le mode proxy. Prenons le combat réel: nous avons une liste de lecture simple, et nous devons afficher le bouton Introduction et lecture de la chanson vidéo sous la connexion lorsque vous cliquez sur une seule connexion (ou sélectionnez tout). Lorsque vous cliquez sur le bouton de lecture, la vidéo est lue. La structure de la liste est la suivante:
La copie de code est la suivante:
<h1> Dave Matthews Vids </H1>
<p> <span id = "toggle-all"> Sélectionnez tout / reélection </span> </p>
<ol id = "vids">
<li> <entrée type = "Checkbox" coché> <a href = "http://new.music.yahoo.com/videos/--2158073"> gravedigger </a> </li>
<li> <entrée type = "Checkbox" coché> <a href = "http://new.music.yahoo.com/videos/--472739"> Save Me </a> </li>
<li> <entrée type = "Checkbox" coché> <a href = "http://new.music.yahoo.com/videos/--45286339"> Crush </a> </li>
<li> <Type d'entrée = "Box" Coched> <a href = "http://new.music.yahoo.com/videos/--2144530"> Ne buvez pas l'eau </a> </li>
<li> <Type de saisie = "Checkbox" coché> <a href = "http://new.music.yahoo.com/videos/--217241800"> drôle comme il est </a> </li>
<li> <Type de saisie = "Checkbox" coché> <a href = "http://new.music.yahoo.com/videos/--2144532"> Que diriez-vous </a>
</li>
</l>
Analyons d'abord ce qui suit. Tout d'abord, nous surveillons non seulement l'événement de clic de la connexion A, mais surveillons également l'événement de clic de «Sélectionnez tout / anti-sélection», puis demandant au serveur d'interroger les informations vidéo et d'assembler les informations HTML pour l'afficher en dernière position de l'élément Li. L'effet est le suivant:
Surveillez ensuite l'événement de clic de la connexion de lecture et commencez à jouer après avoir cliqué. L'effet est le suivant:
Ok, commencez par, sans jQuery, personnalisons un sélecteur:
La copie de code est la suivante:
var $ = fonction (id) {
return document.getElementById (id);
};
Étant donné que le service JSON de Yahoo fournit des paramètres de rappel, nous transmettons notre rappel personnalisé pour accepter les données. Le code d'assemblage de la chaîne de requête spécifique est le suivant:
La copie de code est la suivante:
var http = {
makerequest: fonction (ids, rappel) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id où ids in ("% id%")',
format = "format = json",
handler = "callback =" + rappel,
script = document.createElement ('script');
sql = sql.replace ('% id%', ids.join ('","'));
SQL = EncodeuRIComponent (SQL);
URL + = SQL + '&' + Format + '&' + Handler;
script.src = url;
document.body.appendChild (script);
}
};
L'objet proxy est le suivant:
La copie de code est la suivante:
var proxy = {
IDS: [],
retard: 50,
Timeout: Null,
rappel: null,
Contexte: NULL,
// Définissez l'ID et le rappel demandé pour déclencher le rappel pendant la lecture
MakeRequest: fonction (id, rappel, contexte) {
// Ajouter à la file d'attente DD à la file d'attente
this.ids.push (id);
this.callback = callback;
this.context = context;
// définir le délai d'expiration
if (! this.timeout) {
this.timeout = setTimeout (function () {
proxy.flush ();
}, this.delay);
}
},
// déclenche la demande, et http.makerequest a été appelé en utilisant des responsabilités proxy
flush: function () {
// proxy.Handler est le rappel lors de la demande de Yahoo
http.makerequest (this.ids, 'proxy.handler');
// Après avoir demandé des données, exécutez la méthode proxy.Handler (il y a un autre ensemble de rappel à l'intérieur)
// Effacer le délai et la file d'attente
this.timeout = null;
this.ids = [];
},
Handler: fonction (données) {
var i, max;
// Appel de rappel pour une seule vidéo
if (parseInt (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
retour;
}
// appelle les appels pour plusieurs vidéos
for (i = 0, max = data.query.results.video.length; i <max; i + = 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
Le module de traitement vidéo a principalement trois sous-fonctions: obtenir des informations, afficher des informations et lire des vidéos:
La copie de code est la suivante:
var vidéos = {
// initialise le code du joueur et commencez à jouer
getPlayer: function (id) {
retour '' +
'<object id = "uvp_fop" allowfullscreen = "true">' +
'<param name = "film" value = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" /////>' +
'<param name = "flashvars" value = "id = v' + id + '& eid = 1301797 & lang = us & enablefullScreen = 0 & shareenable = 1" ///>' +
'<param name = "wmode" value = "transparent" ///>' +
'<embed' +
'height = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'pertefullScreen = "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 & activerfullScreen = 1 & shareenable = 1"' +
'///' +
'<// objet>';
},
// épisser les informations pour afficher le contenu, puis l'afficher en bas de l'ajout à Li
UpdateList: fonction (data) {
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.title + '<// 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);
},
// Obtenez des informations et affichez-les
getInfo: fonction (id) {
var info = $ ('info' + id);
if (! info) {
proxy.makerequest (id, vidéos.updatelist, vidéos); // Exécuter les responsabilités de proxy et passer dans la fonction de rappel des vidéos.Updatelist
retour;
}
if (info.style.display === "Aucun") {
info.style.display = '';
} autre {
info.style.display = 'Aucun';
}
}
};
Nous pouvons maintenant gérer le code pour les événements de clic. Puisqu'il existe de nombreuses connexions, si chaque connexion lie l'événement, il y aura évidemment un problème avec les performances. Nous lions donc l'événement à l'élément <l>, puis détectons si la connexion cliquée est une connexion A. Si cela signifie que le clic est l'adresse vidéo, puis il peut être lu:
La copie de code est la suivante:
$ ('vids'). onclick = fonction (e) {
var src, id;
E = E || window.event;
src = e.target || e.srcelement;
// Si ce n'est pas une connexion, je ne continuerai pas à traiter
if (src.NodeName.ToupperCase ()! == "A") {
retour;
}
// Arrêtez la bulle
if (typeof e.PreventDefault === "fonction") {
E.PreventDefault ();
}
e.reTurnValue = false;
id = src.href.split ('-') [1];
// Si vous cliquez sur le lien Play dans la zone d'information vidéo qui a été produite, la lecture commencera
// Le retour ne continuera pas
if (src.classname === "play") {
src.parentNode.innerHtml = videos.getPlayer (id);
retour;
}
src.parentNode.id = "v" + id;
videos.getInfo (id); // c'est le code de traitement pour afficher les informations vidéo lors du clic pour la première fois
};
Les codes de choix et de choix sont similaires, donc nous n'expliquerons pas:
La copie de code est la suivante:
$ ('toggle-all'). onclick = fonction (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). getElementsByTagName ('a');
pour (i = 0, max = hrefs.length; i <max; i + = 1) {
// ignore la connexion de jeu
if (hrefs [i] .classname === "play") {
continuer;
}
// ignorer les éléments qui ne sont pas sélectionnés
if (! hrefs [i] .parentNode.firstChild.checked) {
continuer;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentNode.id = "v" + id;
videos.getInfo (id);
}
};
Résumer
Le mode proxy convient généralement aux situations suivantes:
1. Proxy distant, c'est-à-dire pour fournir des représentations locales pour un objet dans différents espaces d'adresse, afin que le fait qu'un objet existe dans différents espaces d'adresses puisse être caché, tout comme la classe de proxy dans le service Web.
2. Les agents virtuels créent des objets avec des frais généraux élevés au besoin et les utilisez pour stocker de vrais objets qui mettent beaucoup de temps à instancier. Par exemple, lors du rendu du navigateur, le problème peut être affiché en premier et l'image peut être affichée lentement (c'est-à-dire que l'agent virtuel remplace l'image réelle. À l'heure actuelle, l'agent virtuel enregistre le chemin et la taille de l'image réelle.
3. Agent de sécurité, utilisé pour contrôler les autorisations lors de l'accès à des objets réels. Généralement, les objets doivent avoir des autorisations d'accès différentes.
4. Guidance intelligente, uniquement lorsque l'objet réel est appelé, l'agent gère d'autres choses. Par exemple, la collecte des ordures en C # aura des références lors de l'utilisation d'un objet. Si l'objet n'a pas de références, GC peut le recycler.
Référence: "Big Talk Design Pattern"