Blog Gonow

Marcos Sousa é programador Ruby na Globo.com e um dos seus interesses como desenvolvedor é estudar os diferentes tipos de usos do JQuery. Para ele, dominar JQuery vai muito além de fazer um simples find, um bind ou um delegate de um componente HTML. Em sua palestra no BeagaJS, Marcos apresentou um passo-a-passo para quem deseja aprofundar-se no assunto e criar seu próprio widget com JQuery.

Abaixo um resumo dos tópicos e referências abordados na apresentação:

- Seletores JQuery
- Criando custom selectors
- Criando elementos
- Definindo eventos ao elemento
- Eventos personalizados
- Evitando comportamentos padrão
- Interrompendo programação de eventos
- Carregando diretamente conteúdo
- Filtrando requests
- Customizando widgets existentes
- Usando templates em plugins

Widgets UI x Widget Factory

Algumas dificuldades no gerenciamento de plugins:

- Reverter ao estado inicial
- Permitir os usuários interagir com eventos gerados
- Alterar configurações após ser chamado
- Evitar múltiplas instâncias para um mesmo elemento
- Encapsular tarefas comuns

Marcos Sousa explica que controlar o estado de um objeto não é tarefa fácil, pois exige atenção ao gerenciamento de detalhes como, por exemplo, instâncias de um mesmo plugin para o mesmo elemento. É aí que entra em cena a Widget Factory, usada para criar diferentes objetos por meio de uma interface genérica: o jQuery UI Widget Factory cria, com base em nome e objeto, um plugin jQuery e uma “classe” para encapsular as funcionalidades.

Algumas conveniências do $.widget:

- Cria um namespace (jQuery.gcom)
- Encapsula a classe (jQuery.com.foo.prototype)
- Extende o plugin do jQuery (jQuery.fn.foo)
- Estrutura para setup, teardown e alterar opções
- Fácil de chamar callbacks: .trigger(“evento”)
- Métodos acessíveis via: .foo(“metodo”) ou .metodo()
- Permite métodos “privados”

Acesse o “Capitalize demo” em: https://github.com/marcossousa/bhjs-examples/tree/demo3

Métodos “privados”

Métodos privados com underscore (_foo : function(){}) não são acessíveis pela API, ou seja:
$(“#results”).table(“_hover”):          // não funciona
$(“#results”).data(“table”)._hover():  //funciona

Assim, fica fácil trabalhar com eventos para o usuário do plugin:

- callbackname: Nome do evento que deseja lançar
- eventObject: mock do evento original
- userObject: objeto contendo propriedades úteis

O que fará do seu plugin um sucesso?

1. Qualidade. Faça um código bem escrito.
2. Compatibilidade. Ele é compatível com versões mais novas?
3. Confiança. Bem testado, com suite confiável, CI (QUnit, Jasmine etc)
4. Performance. Consumir o mínimo de recurso possível.
5. Documentação sucinta e concisa: facilite a vida de quem for usá-lo.
6. Manutenção. Responda dúvidas, corrija bugs e aprimore-o sempre.

Assista ao vídeo com a íntegra da palestra de Marcos Sousa no BeagaJS:

Referências:

Plugins/Authoring

JQuery-Plugin-Patterns

JQuery Code Style Guidelines

Creating Highly Configurable jQuery Plugins

Tags:BeagaJS, BHJS, gonow tecnologia, JQuery, plugins, widgets

Categorias: JQuery