En Javasript, a menudo aparecen proxy y delegado .
Entonces, ¿en qué circunstancias realmente usa? ¿Cuál es su principio?
Aquí presentamos el uso y los principios de JavaScript Delegate, así como la interfaz de delegado en marcos como Dojo, jQuery, etc.
Proxy de eventos JavaScript
El proxy de eventos es una característica muy útil e interesante en el mundo JS. Cuando necesitamos agregar eventos a muchos elementos, podemos activar la función de procesamiento agregando eventos a su nodo principal y delegar eventos al nodo principal.
Esto se debe principalmente al mecanismo de burbujas de eventos del navegador. Damos un ejemplo específico para explicar cómo usar esta función.
Este ejemplo se toma principalmente de los artículos relacionados de David Walsh (cómo funciona la delegación de eventos JavaScript).
Supongamos que hay un nodo principal UL que contiene muchos hijos LI:
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"> li 5 </li> </ul>
Cuando nuestro mouse se mueve a Li, necesitamos obtener información relevante sobre esta LI y flotar fuera de la ventana flotante para mostrar información detallada, o cuando se hace clic en un LI, el evento de procesamiento correspondiente debe activarse.
Nuestra forma habitual de escribir es agregar algún monitoreo de eventos como OnMouseOver o Onclick a cada LI.
function addListenersli (lielement) {liElement.OnClick = funcekingHandler () {// tODO}; LIELEMENT.ONMOUSEOVER = function mouseOverHandler () {// tODO}} window.onload = function () {var ulelement = document.getElementById ("list"); var lineLements = Ulelement.getElementBytagName ("li"); para (var i = lelements.length-1; i> = 0; i--) {addListeneRsli (lieLements [i]); }}Si los elementos infantiles LI en este UL se agregarán o eliminarán con frecuencia, debemos llamar al método AddListenersLi cada vez que agregamos LI para agregar funciones de manejo de eventos para cada nodo LI.
Esto puede crear complejidad y posibilidad de errores en el proceso de adición o eliminación.
La solución al problema es utilizar el mecanismo de proxy del evento. Cuando el evento se lanza al nodo principal del nivel superior, juzgamos y obtenemos la fuente del evento LI verificar el objeto objetivo del evento.
El siguiente código puede lograr el efecto deseado:
/Obtenga el nodo principal y agregue un evento de clic a él document.getElementById ("list"). AddEventListener ("haga clic", function (e) {// verifique si la fuente de eventos e.targe es li if (e.target && e.target.nodename.touppercase == "li") ¡Haga clic! ");}});Agregue un evento de clic al nodo principal. Cuando se hace clic en el nodo infantil, el evento de clics burbujará hacia arriba desde el nodo infantil. Después de que el nodo principal atrapa el evento, determina si es el nodo que necesitamos procesar juzgando e.target.nodeName. Y el nodo LI hecho hecho se obtuvo a través de E.Target. Por lo tanto, la información correspondiente se puede obtener y procesar.
Burbuja y captura de eventos
El mecanismo de burbujas de eventos del navegador, diferentes fabricantes de navegadores tienen diferentes mecanismos de procesamiento para la captura y manejo de eventos. Aquí presentamos los eventos estándar definidos por W3C para DOM2.0.
El modelo DOM2.0 divide el proceso de procesamiento de eventos en tres etapas:
1. Etapa de captura de eventos,
2. Event Target Stage,
3. La etapa burbujeante del evento.
Como se muestra en la figura a continuación:
Captura de eventos: cuando un elemento desencadena un evento (como OnClick), el documento de objeto de nivel superior emitirá una secuencia de eventos, que fluye al nodo del elemento de destino con el nodo del árbol DOM hasta que se alcanza el elemento objetivo donde se produce el evento. En este proceso, la función de escucha correspondiente del evento no se activará.
Objetivo de evento: después de alcanzar el elemento de destino, se ejecuta la función de procesamiento correspondiente del evento del elemento de destino. Si no hay una función de oyente limitada, entonces no se ejecutará.
Burbujas de eventos: comience con el elemento objetivo y propague al elemento superior. Si un nodo une la función de manejo de eventos correspondiente en el camino, estas funciones se activarán a la vez. Si desea evitar que el evento burbujee, puede usar E.StopPropagation () (Firefox) o E.CancelBubble = True (es decir) para organizar la propagación de burbujas del evento.
Función delegada en jQuery y dojo
Echemos un vistazo a cómo usar las interfaces proxy de eventos proporcionadas en Dojo y JQuery.
jQuery:
$ ("#list"). delegate ("li", "hacer clic", function () {// "$ (this)" es el nodo que se hizo clic en console.log ("¡Hiciste un enlace!", $ (this));});El método JQuery Delegate requiere tres parámetros, un selector, un nombre de tiempo y un controlador de eventos.
La similitud de Dojo con jQuery es solo la diferencia en los estilos de programación entre los dos:
requerir (["dojo/consulta", "dojox/nodelist/delegate"], function (query, delegate) {Query ("#list"). delegate ("li", "onClick", function (event) {// "this.node" es el nodo que se hizo clic.El módulo delegado de Dojo está en Dojox. Nodelista, y la interfaz proporcionada es la misma que jQuery y los parámetros son los mismos.
A través de la delegación, puede apreciar los diversos beneficios de usar la delegación de eventos para el desarrollo:
1. Hay menos funciones administradas. No hay necesidad de agregar una función de oyente para cada elemento. Para elementos infantiles similares bajo el mismo nodo principal, los eventos se pueden manejar a través de una función de escucha delegada al elemento principal.
2. Es fácil de agregar y modificar elementos dinámicamente, y no es necesario modificar la unión del evento debido a los cambios de elementos.
3. La correlación entre los nodos JavaScript y DOM se reduce, lo que reduce la probabilidad de fugas de memoria causadas por referencias circulares.
Uso de proxy en la programación de JavaScript
Lo anterior presenta el uso del mecanismo de burbuja del navegador para agregar proxy de eventos a los elementos DOM al procesar eventos DOM. De hecho, en la programación JS pura, también podemos usar este patrón de programación para crear objetos proxy para operar objetos de destino.
var delegate = function (client, clientMethod) {return function () {return clientMethod.apply (cliente, argumentos); }} var Apple = function () {var _color = "rojo"; return {getColor: function () {console.log ("color:" + _color); }, setColor: function (color) {_color = color; }}; }; var a = nuevo Apple (); var b = nuevo Apple (); a.getColor (); a.setColor ("verde"); a.getColor (); // llamar proxy var d = delegate (a, a.setColor); d ("azul"); // ejecución proxy a.getColor (); //b.getColor ();En el ejemplo anterior, la modificación de A se opera llamando a la función proxy d creada por la función delegate ().
Aunque este método usa Aplicar (también se puede usar la llamada) para transferir el objeto de llamada, implementa ocultar ciertos objetos del modo de programación, lo que puede proteger estos objetos de que se accedan y se modifiquen a voluntad.
El concepto de delegado se hace referencia en muchos marcos para especificar el alcance de la operación de un método.
Los ejemplos típicos son dojo. Hitch (alcance, método) y creationelegate (obj, args) de extjs.
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.