Em JavaSRIPT, proxy e delegado geralmente aparecem.
Então, em que circunstâncias ele realmente usa? Qual é o seu princípio?
Aqui, apresentamos o uso e os princípios do Delegado Javascript, bem como a interface do Delegado em estruturas como Dojo, JQuery, etc.
Proxy de evento JavaScript
A proxy de eventos é uma característica muito útil e interessante no mundo JS. Quando precisamos adicionar eventos a muitos elementos, podemos acionar a função de processamento adicionando eventos ao nó dos pais e delegando eventos ao nó pai.
Isso se deve principalmente ao mecanismo de bolhas de eventos do navegador. Vamos dar um exemplo específico para explicar como usar esse recurso.
Este exemplo é retirado principalmente dos artigos relacionados de David Walsh (como a delegação de eventos JavaScript funciona).
Suponha que exista um nó da UL que contém muitos filhos de 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>
Quando nosso mouse se move para LI, precisamos obter informações relevantes sobre isso e flutuar da janela flutuante para exibir informações detalhadas ou quando um LI é clicado, o evento de processamento correspondente precisa ser acionado.
Nossa maneira usual de escrever é adicionar algum monitoramento de eventos, como o OnMouseOver ou OnClick a cada LI.
função addListenersli (lielement) {lieLement.OnClick = function clickHandler () {// TODO}; liElement.onMouseOver = function mouseOverHandler () {// TODO}} window.onload = function () {var ulexlement = document.getElementById ("list"); var lielements = uLELEMENT.GETELEMENTBYTAGNAME ("LI"); for (var i = liElements.Length-1; i> = 0; i--) {addListenersli (LIELEMENTOS [i]); }}Se os elementos infantis LI neste UL serão adicionados ou excluídos com frequência, precisamos chamar o método Addlistenersli sempre que adicionarmos Li para adicionar funções de manuseio de eventos para cada nó Li.
Isso pode criar complexidade e possibilidade de erros no processo de adição ou remoção.
A solução para o problema é usar o mecanismo de proxy do evento. Quando o evento é jogado para o nó pai do nível superior, julgamos e obtemos a fonte do evento Li, verificando o objeto de destino do evento.
O código a seguir pode atingir o efeito desejado:
/ Get the parent node and add a click event to it document.getElementById("list").addEventListener("click",function(e) { // Check whether the event source e.targe is Li if(e.target && e.target.nodeName.toUpperCase == "LI") { // //TODO console.log("List item ",e.target.id," was clicou! ");}});Adicione um evento de clique no nó pai. Quando o nó infantil é clicado, o evento de cliques borbulha para cima do nó filho. Depois que o nó pai captura o evento, ele determina se é o nó que precisamos processar julgando o e.Target.Nodename. E o nó Li clicado foi obtido através do E.Target. Portanto, as informações correspondentes podem ser obtidas e processadas.
Bubble e captura de eventos
O mecanismo de bolhas de eventos do navegador, diferentes fabricantes de navegador têm diferentes mecanismos de processamento para a captura e manuseio de eventos. Aqui, apresentamos os eventos padrão definidos pelo W3C para DOM2.0.
O modelo DOM2.0 divide o processo de processamento de eventos em três estágios:
1. Estágio de captura de eventos,
2. Estágio de destino do evento,
3. O estágio borbulhante do evento.
Como mostrado na figura abaixo:
Captura de eventos: Quando um elemento aciona um evento (como o OnClick), o documento de objeto de nível superior emite um fluxo de eventos, fluindo para o nó do elemento de destino com o nó da árvore DOM até que o elemento de destino onde o evento realmente ocorra seja atingido. Nesse processo, a função de escuta correspondente do evento não será acionada.
Alvo de eventos: após o alcance do elemento de destino, a função de processamento correspondente do evento do elemento de destino é executada. Se não houver função do ouvinte encadernado, ela não será executada.
Bolhas de eventos: comece com o elemento de destino e se propagam para o elemento superior. Se um nó ligar a função de manuseio de eventos correspondente a caminho, essas funções serão acionadas de uma só vez. Se você deseja impedir que o evento buble, pode usar o e.stopPropagation () (Firefox) ou e.cancelbubble = true (ou seja) para organizar a propagação da bolha do evento.
Função delegada em jQuery e dojo
Vamos dar uma olhada em como usar as interfaces proxy de eventos fornecidas no Dojo e no JQuery.
jQuery:
$ ("#LIST"). Delegate ("Li", "Clique", function () {// "$ (this)" é o nó que foi clicado console.log ("Você clicou em um link!", $ (this));});O método JQuery Delegate requer três parâmetros, um seletor, um nome de tempo e um manipulador de eventos.
A semelhança de Dojo com o jQuery é apenas a diferença nos estilos de programação entre os dois:
requer (["dojo/consulta", "dojox/nodelist/delegate"], function (consulta, delegado) {query ("#list"). delegate ("li", "onclick", function (event) {// "this.node" é o nó que foi clicado °.Log ("O módulo Delegate do Dojo está no DOJOX.Nodelist, e a interface fornecida é a mesma que o jQuery e os parâmetros são os mesmos.
Através da delegação, você pode apreciar os vários benefícios do uso da delegação de eventos no desenvolvimento:
1. Existem menos funções gerenciadas. Não há necessidade de adicionar uma função do ouvinte para cada elemento. Para elementos filhos semelhantes no mesmo nó pai, os eventos podem ser tratados através de uma função de escuta delegada ao elemento pai.
2. É fácil adicionar e modificar elementos dinamicamente, e não há necessidade de modificar a ligação de eventos devido a alterações de elemento.
3. A correlação entre os nós JavaScript e DOM é reduzida, o que reduz a probabilidade de vazamentos de memória causados por referências circulares.
Usando proxy na programação JavaScript
O acima introduz o uso do mecanismo de bolha do navegador para adicionar proxy de eventos aos elementos DOM ao processar eventos DOM. De fato, na programação pura do JS, também podemos usar esse padrão de programação para criar objetos proxy para operar objetos de destino.
var delegate = function (client, clientMethod) {return function () {return clientmethod.apply (cliente, argumentos); }} var Apple = function () {var _color = "Red"; return {getColor: function () {console.log ("color:" + _color); }, setColor: function (color) {_color = color; }}; }; var a = new Apple (); var b = new Apple (); A.GetColor (); A.setColor ("verde"); A.GetColor (); // chamando proxy var d = delegado (a, a.setColor); d ("azul"); // proxy de execução a.getColor (); //b.getColor ();No exemplo acima, a modificação de A é operada chamando a função proxy D criada pela função delegate ().
Embora esse método usa se aplique (a chamada também pode ser usada) para transferir o objeto de chamada, ele implementa a ocultação de determinados objetos do modo de programação, que podem proteger esses objetos de serem acessados e modificados à vontade.
O conceito de delegado é referenciado em muitas estruturas para especificar o escopo da operação de um método.
Exemplos típicos são dojo.hitch (escopo, método) e crioulegate (obj, args) de extjs.
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.