introducir
Como su nombre indica, los agentes deben ayudar a otros a hacer cosas. GOF define el modelo proxy de la siguiente manera:
Modo proxy (proxy), proporciona un proxy para que otros objetos controlen el acceso a este objeto.
El modo proxy permite que el objeto proxy controle la referencia de un objeto específico. Un proxy puede ser casi cualquier objeto: un archivo, un recurso, un objeto en la memoria o algo que es difícil de copiar.
texto
Demos un ejemplo simple. Si Dudu quiere enviar rosas de yogurt y niña, pero no conoce su información de contacto o se avergüenza, y quiere confiar a su tío que envíe estas rosas, entonces el tío es un agente (en realidad, es bastante bueno, puedes deducir algunas flores a tu esposa), entonces, ¿cómo podemos hacerlo?
La copia del código es la siguiente:
// declara la belleza primero
var niña = function (nombre) {
this.name = name;
};
// esto es dudu
var dudu = function (niña) {
this.girl = niña;
this.sendgift = function (regalo) {
alerta ("hola" + girl.name + ", Dudu te da un regalo:" + regalo);
}
};
// El tío es el agente
var proxytom = function (girl) {
this.girl = niña;
this.sendgift = function (regalo) {
(nuevo dudu (niña)). SendGift (regalo); // Envía flores para Dudu
}
};
El método de llamada es muy simple:
La copia del código es la siguiente:
var proxy = new Proxytom (nueva chica ("Yogurt Girl"));
proxy.sendgift ("999 rosas");
Una batalla práctica
A través del código anterior, creo que todos son muy claros sobre el modo proxy. Tomemos el combate real: tenemos una lista de reproducción simple y necesitamos mostrar la introducción de la canción de video y reproducir el botón debajo de la conexión al hacer clic en una sola conexión (o seleccionar todo). Al hacer clic en el botón Reproducir, se reproduce el video. La estructura de la lista es la siguiente:
La copia del código es la siguiente:
<h1> Dave Matthews Vids </h1>
<p> <span id = "toggle-all"> seleccione todo/reselect </span> </p>
<ol id = "vids">
<li> <input type = "CheckBox" Checked> <a href = "http://new.music.yahoo.com/videos/--2158073"> gravedigger </a> </li>
<li> <input type = "CheckBox" Checked> <a href = "http://new.music.yahoo.com/videos/ --4472739"> Guárdeme </a> </li>
<li> <input type = "CheckBox" Checked> <a href = "http://new.music.yahoo.com/videos/-45286339"> Crush </a> </li>
<li> <input type = "CheckBox" Checked> <a href = "http://new.music.yahoo.com/videos/-2144530"> No beba el agua </a> </li>
<li> <input type = "CheckBox" checked> <a href = "http://new.music.yahoo.com/videos/-217241800"> Es curioso la forma en que es </a> </li>
<li> <input type = "CheckBox" checked> <a href = "http://new.music.yahoo.com/videos/-21444532"> ¿Qué dirías? </a>
</li>
</ol>
Primero analicemos lo siguiente. Primero, no solo monitoreamos el evento de clics de la conexión A, sino que también monitoreamos el evento de clic de "Seleccionar todo/anti-selección", y luego solicitamos al servidor que consulte la información de video y ensamble la información HTML para mostrarla en la última posición del elemento LI. El efecto es el siguiente:
Luego monitoree el evento de clic de la conexión de reproducción y comience a reproducir después de hacer clic. El efecto es el siguiente:
Ok, comience con, sin jQuery, personalizamos un selector:
La copia del código es la siguiente:
var $ = function (id) {
return document.getElementById (id);
};
Dado que el servicio JSON de Yahoo proporciona parámetros de devolución de llamada, pasamos nuestra devolución de llamada personalizada para aceptar datos. El código de ensamblaje de cadena de consulta específico es el siguiente:
La copia del código es la siguiente:
var http = {
Makerequest: function (IDS, Callback) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id donde ids en ("%id%")',
format = "format = json",
handler = "Callback =" + Callback,
script = document.createElement ('script');
sql = sql.replace ('%id%', id.Join ('","'));
sql = encodeuricomponent (sql);
url + = sql + '&' + formato + '&' + manejador;
script.src = url;
document.body.appendChild (script);
}
};
El objeto proxy es el siguiente:
La copia del código es la siguiente:
var proxy = {
IDS: [],
Retraso: 50,
Tiempo de espera: NULL,
devolución de llamada: nulo,
contexto: nulo,
// Establezca la identificación solicitada y la devolución de llamada para activar la devolución de llamada durante la reproducción
makerequest: function (id, devolución de llamada, contexto) {
// Agregar a la cola dd a la cola
this.ids.push (id);
this.callback = Callback;
this.context = context;
// establecer el tiempo de espera
if (! this.timeout) {
this.timeout = setTimeOut (function () {
proxy.flush ();
}, this.delay);
}
},
// activar la solicitud, y http.makerequest se llamó utilizando responsabilidades de proxy
flush: functer () {
// proxy.handler es la devolución de llamada al solicitar Yahoo
http.makerequest (this.ids, 'proxy.handler');
// Después de solicitar datos, ejecute el método proxy.handler (hay otra devolución de llamada establecida dentro)
// Borrar tiempo de espera y cola
this.timeout = null;
this.ids = [];
},
Handler: function (data) {
var i, max;
// llamada de devolución de llamada para un solo video
if (parseInt (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
devolver;
}
// Llamadas de devolución de llamada para múltiples videos
para (i = 0, max = data.query.results.video.length; i <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
El módulo de procesamiento de video tiene principalmente tres subfunciones: obtener información, mostrar información y reproducir videos:
La copia del código es la siguiente:
videos var = {
// Inicializa el código del reproductor y comienza a jugar
getPlayer: function (id) {
regresar '' +
'<Object id = "uvp_fop "itodfullScreen =" true ">' +
'<param name = "Movie" 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" ///>' +
'<incrustar' +
'Height = "255"' +
'Width = "400"' +
'id = "UVP_FOP"' +
'permitislfullscreen = "verdadero"' +
'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"' +
'///' +
'<// objeto>';
},
// emplome la información para mostrar el contenido, y luego mostrarla en la parte inferior de la anexión a Li
updateList: function (data) {
VAR ID,
html = '',
información;
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> Álbum:' + 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 (información);
},
// Obtener información y mostrarla
getInfo: function (id) {
Var info = $ ('info' + id);
if (! info) {
proxy.makerequest (id, videos.updateList, videos); // Ejecutar las responsabilidades de proxy y pasar en la función de devolución de llamada de videos.
devolver;
}
if (info.style.display === "ninguno") {
info.style.display = '';
} demás {
info.style.display = 'Ninguno';
}
}
};
Ahora podemos manejar el código para los eventos de clic. Dado que hay muchas conexiones, si cada conexión une el evento, obviamente habrá un problema con el rendimiento. Por lo tanto, unimos el evento al elemento <Ol> y luego detectamos si la conexión haciendo clic es una conexión A. Si eso significa que el hecho es la dirección de video, y luego se puede reproducir:
La copia del código es la siguiente:
$ ('vids'). onClick = function (e) {
var src, id;
E = E || Window.event;
src = e.target || E.Sracelement;
// Si no es una conexión, no continuaré procesando
if (src.nodename.touppercase ()! == "a") {
devolver;
}
// Stop Bubble
if (typeof E.PreventDefault === "función") {
E.PreventDefault ();
}
e.returnValue = false;
id = src.href.split ('-') [1];
// Si hace clic en la reproducción de enlaces en el área de información de video que se ha producido, la reproducción comenzará
// Entonces la devolución no continuará
if (src.classname === "Play") {
src.parentnode.innerhtml = videos.getPlayer (id);
devolver;
}
src.parentnode.id = "v" + id;
videos.getInfo (id); // Este es el código de procesamiento para mostrar información de video al hacer clic por primera vez
};
Los códigos para elegir todo y elegir son similares, por lo que no explicaremos:
La copia del código es la siguiente:
$ ('toggle-all'). onClick = function (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). getElementsBytagName ('a');
para (i = 0, max = hrefs.length; i <max; i += 1) {
// ignora la conexión de juego
if (hrefs [i] .classname === "Play") {
continuar;
}
// Ignorar los elementos que no están seleccionados
if (! hrefs [i] .parentnode.firstchild.ecked) {
continuar;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentnode.id = "v" + id;
videos.getInfo (id);
}
};
Resumir
El modo proxy es generalmente adecuado para las siguientes situaciones:
1. Proxy remoto, es decir, proporcionar representaciones locales para un objeto en diferentes espacios de direcciones, de modo que el hecho de que exista un objeto en diferentes espacios de dirección pueda estar oculto, al igual que la clase proxy en el servicio web.
2. Los agentes virtuales crean objetos con alta sobrecarga según sea necesario, y los usan para almacenar objetos reales que tardan mucho tiempo en instanciarse. Por ejemplo, al representar el navegador, el problema se puede mostrar primero, y la imagen se puede mostrar lentamente (es decir, el agente virtual reemplaza la imagen real. En este momento, el agente virtual guarda la ruta y el tamaño de la imagen real.
3. Agente de seguridad, utilizado para controlar los permisos al acceder a objetos reales. En general, los objetos deben tener diferentes permisos de acceso.
4. Guía inteligente, solo cuando se llama el objeto real, el agente maneja otras cosas. Por ejemplo, la recolección de basura en C# tendrá referencias cuando use un objeto. Si el objeto no tiene referencias, GC puede reciclarlo.
Referencia: "Patrón de diseño de gran charla"