Yahoo! Blog User Interface (YUIBlog)

No 3 YUI Gallery: Módulo Caridy Patiño Mayea da Binder evento oferece suporte para o evento ligação antecipada e orientada a eventos Carregando Módulo

Este artigo apresenta o meu módulo Binder evento , foi lançado recentemente no 3 º YUI Galeria.

YUI 3 está ficando boa tração na comunidade de desenvolvedores, com a adoção significativa da mais recente versão 3.1.1 e uma enorme infusão de novos projectos inovadores no 3 Galeria YUI . Muitos desenvolvedores estão recebendo as suas cabeças em torno da natureza on-demand de YUI 3 e começar a aproveitar esses recursos em seus projetos. Esta abordagem tem grandes vantagens, mas também pode apresentar alguns desafios.

Um desses desafios é captar as interações do usuário cedo. Mesmo quando o navegador é iniciado processar a página, nós queremos que o usuário seja capaz de começar a interagir com os elementos da página. Em muitos casos, essas interações podem acontecer antes que o processo de inicialização JavaScript (incluindo o anexo de ouvintes de evento) foi concluída.

Em muitos casos você pode otimizar seu código de inicialização, definindo apenas ouvintes do seu evento e, em seguida, adicionar a lógica para carregar as peças que você precisa para cada interação do usuário. Recentemente, os engenheiros do Facebook falou sobre uma abordagem semelhante para melhorar o processo de carregamento - veja a entrevista do Rey Bango em JSConf. Aqui está um exemplo de como essa técnica pode funcionar em YUI 3:

  <Script src = "& http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js
 
	 3.1.1/build/oop/oop-min.js e 3.1.1/build/event-custom/event-custom-base-min.js e
	 3.1.1/build/event/event-base-min.js e 3.1.1/build/dom/dom-base-min.js e
	 3.1.1/build/dom/selector-native-min.js e 3.1.1/build/dom/selector-css2-min.js e
	 3.1.1/build/node/node-base-min.js "> </ script>
 
 YUI (). Usar ("evento-base ', function (Y) {
     / / Espera até que o usuário se concentra em um elemento de entrada para iniciar o carregamento ativos
     Y.on ("click", function (e) {
 
       Y.use ('anim', 'io', function () {
           / / Carregar um conteúdo remoto e exibi-lo usando uma animação aqui
       });
 
       e.halt () / / parar a propagação
     }, "Demo #");
 }); 

Isto introduz alguma complexidade no seu código, porque não só os ouvintes têm de lidar com a interação do usuário, mas também com alguma lógica de carregamento. Outra desvantagem desta abordagem é que você ainda tem que carregar um código JavaScript no topo (neste caso, YUI semente, o Utilitário de evento, e algumas dependências), a fim de definir pelo menos o ouvinte ea lógica de carregamento para pegar as ações iniciais. Então, vamos considerar isso como dois distintos casos de uso:

• Capturar as interações do usuário primeiros
• Facilitar a natureza on-demand de algumas interações com o usuário

Para atender a essas necessidades que eu criei um novo módulo para YUI 3 . Meu foco principal tem sido a de criar um componente que funciona sem afetar a lógica do aplicativo. Este novo módulo é chamado de " galeria de evento para encadernação "e está agora disponível através do carregador de YUI.

Capturar as interações do usuário primeiros

O principal objetivo desse recurso é para garantir que as interações do usuário estão na fila até que os ouvintes de eventos são inicializados.

Vamos ver um exemplo aglutinante evento :

 YUI ({/ / Galeria última compilação desta galeria módulo: 'galeria de 2010/06/07-17-52'}) uso ('galeria evento pasta', 'evento', function (Y) {Y.on (. 'click', function (e) {/ / faz as suas coisas aqui e.halt () / / parar a propagação do evento se você quiser ...}, '# demo') / / descarga cedo usuário Y.EventBinder interações . flush ('click');}); 

Neste exemplo, YUI carregador tentará carregar as gallery-event-binder e event módulos on-demand, e uma vez que ambos estão prontos junto com suas dependências, o código dentro da função de callback (terceiro argumento) será executado. Durante a execução, um ouvinte é definido para um elemento com id=demo . O truque aqui é que uma vez Y.EventBinder.flush('click') é chamado, o sistema irá liberar alguns dos eventos de clique que poderia ter acontecido antes deste código de inicialização é executado.

A configuração

Esta técnica requer alguma configuração extra, especificamente a definição de YUI_config como uma variável global para ajustar a execução YUI. Não se preocupe, é muito simples. Vamos ver um exemplo em detalhes:

 
 YUI_config = {
     / / Configuração padrão YUI_config
     combinar: true,
     filtro: 'min',
 
     / Configuração ligante / evento começa aqui
     eventbinder: {
         / Manipulador / Evento para armazenar eventos que você deseja para reexpedição.
         fn: function (e) {
             var aglutinante = YUI_config.eventbinder,
                 filter = / yui3-evento-ligante /,
                 recipiente = (e.target | | e.srcElement),
                 info = {
                     alvo: container,
                     Tipo: e.type
                 };
 
             / Olhar / para um elemento com a classe yui3-evento-ligante
             while (&& contentores! filter.test (container.className)) {
                 container = container.parentNode;
             }
 
             if (container) {
                 (Binder.q = binder.q | | []) push (informações).;
 
                 / / Evitar a ação navegador padrão para este evento
                 if (e.preventDefault) {
                     e.preventDefault ();
                 }
                 retorno (e.returnValue = false);
             }
         },
         / Interface / ouvir para eventos específicos
         listenFor: function (type) {
             var d = document;
             / / Antes de as cargas da biblioteca, temos de lidar com inconsistências navegador
             if (d.addEventListener) {
                 d.addEventListener (tipo, this.fn, false);
             Else {}
                 d.attachEvent ('on' + tipo, this.fn);
             }
 
             envie este;
         }
     }
 };
 / / Adiciona eventos ao processo de acompanhamento
 YUI_config.eventbinder.listenFor ('click');

Este código deve ser incluído no topo da página. Será apenas algumas mordidas depois de apoucar este objeto de configuração. Eu recomendo usar um arquivo (externo) cacheable para a produção e incluindo-a na seção de cabeça em suas páginas. Você pode ler mais sobre YUI_config e as diferentes configurações que você pode ajustar através desse objeto na documentação da API oficial .

Você pode modificar esta configuração para servi-lo melhor, e definir os eventos que você se preocupa também. No exemplo acima, adicionamos 'click' para a lista de monitoramento (última linha). Você pode adicionar vários eventos para a lista de monitoramento usando encadeamento:

  YUI_config.eventbinder.listenFor ('click') listenFor ('keyup') listenFor ('mouseover')..; 

Como funciona este recurso?

Uma vez que a configuração (isto é, YUI_config lógica) é executada, juntamente com a chamada para YUI_config.eventbinder.listenFor , um ouvinte para um tipo de evento específico será definido. Somente eventos que se bolha vai ser monitorados como o ouvinte será definido para o document elemento. Quando uma interação com o usuário é pego a este nível, que serão analisados, especificamente verificar se o elemento de destino ou de qualquer de seus ancestrais tem classname yui3-event-binder . Se assim for, o evento vai ser adicionado a uma fila e o comportamento padrão para que o evento será impedido. Esta técnica oferece uma maneira fácil de monitorar tipos específicos de interação em áreas específicas da página.

Quando esse código é executado, os ouvintes para eventos do tipo especificado ou tipos são adicionados ao document , então quando esses eventos ocorrem e borbulhar (estes eventos apenas monitores que bolhas), que será interrompido e suas informações armazenadas em uma fila de processamento . Mais tarde, em seu use() de retorno de chamada quando a inicialização estiver concluída, basta ligar para Y.EventBinder.flush a reexpedição todos os eventos clique armazenados como se tivessem acontecido só depois de cortesia do módulo de simulação de eventos.

Facilitar a natureza on-demand de algumas interações com o usuário

O principal objetivo desse recurso é ajudar os desenvolvedores a definir a lógica de carregamento com base em interações do usuário.

Aqui está outro exemplo aglutinante evento :

 
 YUI ({
   módulos: {
     "My-módulo personalizado": {
       fullpath: '. / my-custom-module.js'
     }
   }
 }). Usar ('galeria evento pasta', 'nó', function (Y) {
 
   / / Definir um ouvinte para '# demo' e confiar em "minha-module-custom ' 
   / / Para lidar com esse evento em particular.
   Y.EventBinder.on ('click', 'meu-module-costume', '# demo');
 
   / / Definir um ouvinte delegado para todas as âncoras em uma lista e confiar  
   / / Em "my-custom-módulo 'e' meu-outro módulo 'para lidar com esses eventos particulares
   Y.EventBinder.delegate ('click', ['meu-outro módulo'], '# mylist', 'li a');
 
 });

Aqui usamos Y.EventBinder.on e Y.EventBinder.delegate para definir alguns ouvintes. Estes dois métodos envoltório Y.on e Y.delegate dirigir lógica de carga através de uma interação do usuário. Isso nos permite adiar o carregamento de uma funcionalidade específica de uma página até que o usuário tenta usar um recurso específico.

Neste caso, quando um usuário clica em um dos elementos, nós carregamos um ou mais módulos personalizados YUI que implementam todos os recursos associados a esse clique particular. Uma vez que os módulos ficam disponíveis (e novos ouvintes são definidos), a pasta irá liberar o evento que estava em espera durante o processo de carregamento para preservar o estado da acção.

Este recurso não requer qualquer configuração inicial. Ambos de características de evento Binder pode ser usado ao mesmo tempo para cobrir precoces e on-demand utilizador interacções. Neste caso, você precisa definir a configuração, em seguida, defina os ouvintes on-demand, e, finalmente, liberar os primeiros eventos.

Aqui está um fim-de-final exemplo aglutinante evento :

 
 / Configuração /
 YUI_config = {/ * sua configuração evento fichário personalizado aqui * /};
 YUI_config.eventbinder.listenFor ('click')
 
 / Inicialização /
 YUI ({
   módulos: {
     "My-módulo personalizado": {
       fullpath: '. / my-custom-module.js'
     }
   }
 }). Uso ('galeria de evento para encadernação', function (Y) {
  
   Y.EventBinder.delegate ('click', ['meu-custom-módulo'], '# doc', 'yui3-evento-um aglutinante.');
   Y.EventBinder.flush ('click');
 
 });

Uma configuração mais avançada

Você pode modificar o fn função em sua configuração a ser mais seletivos sobre os eventos que a fila e você pode armazenar mais informações sobre os eventos. Além disso adiciona um yui3-waiting classe para o alvo clique que estilo CSS para exibir um spinner de carregamento:

 
 YUI_config = {
     / / Configuração padrão YUI_config
     combinar: true,
     filtro: 'min',
 
     / Configuração ligante / evento começa aqui
     eventbinder: {
         / / Conjunto de opções que devem ser preservadas para cada evento (todos opcionais)
         eventProperties: [
             "CtrlKey", "altKey",
             "ShiftKey", "metaKey",
             "KeyCode", "charCode",
             "ScreenX", "screenY",
             "ClientX", "clientY",
             "Botão",
             "RelatedTarget"
         ],
 
         / Função de retorno / ouvinte
         fn: function (e) {
             var aglutinante = YUI_config.eventbinder,
                 props = binder.eventProperties,
                 filter = / yui3-evento-ligante /,
                 alvo = (e.target | | e.srcElement),
                 target = recipiente,
                 info = {
                     alvo: alvo,
                     Tipo: e.type
                 },
                 i;
 
             if (target.nodeType === 3) {
                 / / Alvo é um nó de texto, então use seu elemento pai
                 target = target.parentNode;
             }
 
             / Olhar / para um elemento com a classe yui3-evento-ligante
             while (&& contentores! filter.test (container.className)) {
                 container = container.parentNode;
             }
 
             if (container) {
                 target.className + = 'yui3 de espera ";
 
                 / / Back-up das propriedades de evento para simular o evento mais tarde
                 for (i = props.length - 1; i> = 0; - i) {
                     info [props [i]] = e [props [i]];
                 }
 
                 (Binder.q = binder.q | | []) push (informações).;
 
                 / / Evitar a ação navegador padrão para este evento
                 if (e.preventDefault) {
                     e.preventDefault ();
                 }
                 retorno (e.returnValue = false);
             }
         },
 
         listenFor: function (type) {
             var d = document;
 
             if (d.addEventListener) {
                 d.addEventListener (tipo, this.fn, false);
             Else {}
                 d.attachEvent ('on' + tipo, this.fn);
             }
 
             envie este;
         }
     }
 };
 / / Adiciona eventos ao processo de acompanhamento
 YUI_config.eventbinder.listenFor ('click');

Confira este exemplo aglutinante evento para ver esta configuração avançada em ação.

Conclusão:

Para aplicações web de alta performance, é importante que as páginas carreguem mais rapidamente e tornar-se sensível. Para conseguir isso, temos que confiar em técnicas sob demanda de carga. Quando você começar a usá-los, é igualmente importante para controlar as interações do usuário que podem acontecer antes do código correspondente a uma ação se tornam disponíveis.

Evento Binder (galeria-evento-ligante) fornece APIs amigável para lidar com ambos os casos, o uso de sem você ter que mudar a lógica do aplicativo. Ele pode ser aplicado a qualquer 3 YUI aplicação sem introduzir complexidade extra ao seu código.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!