Agora que entendemos os fundamentos do desenvolvimento de plug-ins, podemos nos aprofundar um pouco mais. Como, em última análise, um plugin é uma função, ele nos fornece o escopo que precisamos organizar. Lembra quando colocamos nossa casa em ordem quando estávamos aprendendo sobre modelagem? Podemos usar alguns desses mesmos conceitos em um plugin.
Mas, primeiro, acho que a arquitetura do plugin jQuery pode se beneficiar de algum código clichê. Talvez você esteja familiarizado com o HTML5 Boilerplate, que fornece vários padrões inteligentes. Um boilerplate do plugin jQuery é o mesmo tipo de coisa. Economiza um pouco de digitação e leva você a um caminho de desenvolvimento inteligente.
Me deparei com um projeto literalmente chamado jQuery Boilerplate, que eu acho que é bom. Mas eu não cavei muito nisso. Em vez disso, gosto bastante de Starter de Doug Neiner. Você fornece um nome, alguns padrões e algumas opções e isso irá gerar essa estrutura clichê para você.
Decidimos fazer um controle deslizante denominado lodgeSlider com um parâmetro de velocidade simples e terminar com este código:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Muito disso deve parecer familiar. Existe um IIFE envolvendo o plugin para segurança. Existe uma função criada a partir do objeto jQuery. Existe uma função init chamada imediatamente. Existe um método criado a partir do objeto jQuery que retorna um objeto jQuery. Existem variáveis criadas com referências de cache que provavelmente usaremos novamente. Principalmente coisas que vimos antes.
Talvez duas coisas novas. Um é o objeto de opções lá. Você pode ver o valor 300 codificado. Mas também veja a linha com $.extend(). Essa é uma função jQuery para combinar dois objetos em um, com um tendo precedência sobre o outro. Quando chamamos o plugin, talvez assim:
$("#slider-1").lodgeslider();Não estamos transmitindo opções e esse objeto vazio é combinado com nosso objeto embutido em código, e os valores padrão estão disponíveis dentro do plug-in. Mas poderíamos chamá-lo assim também:
$("#slider-1").lodgeslider(( speed: 500 ));Estamos passando um objeto como parâmetro ali. Esse objeto é combinado com nosso objeto embutido em código, tem precedência e o valor que passamos se torna o valor disponível no plugin. Muito legal.
A outra coisa nova é aquela parte estranha com .data(). Criamos a variável base para fazer referência à própria função, que é criada novamente para cada elemento que o plugin é chamado. Por exemplo, digamos que ativamos o plug-in $(".slider")- pode haver dois elementos na página com o nome de classe slider. Cada loop é executado e duas instâncias da função lodgeSlider são feitas. Em cada um, anexamos uma referência a ele ao próprio elemento. Dessa forma, podemos chamar métodos de plugin internos a partir de qualquer referência que tivermos desse elemento.
Como talvez:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Apenas nos dá uma boa maneira de usar métodos de plug-in, se necessário.
Não fomos muito longe nesta aventura de construção de plug-in:
Veja a Caneta Construindo um Slider a partir do zero, de Chris Coyier (@chriscoyier) no CodePen
Honestamente, o mundo provavelmente não precisa de outro plugin de controle deslizante. Mas você pode ver como eles podem ficar complexos. Estas são apenas algumas idéias:
- Pode haver funções de retorno de chamada (ou eventos personalizados) para antes e depois das alterações do slide, depois que o controle deslizante é configurado, depois de ser derrubado, etc.
- As larguras podem ser baseadas em porcentagem e recalcular quando a janela do navegador muda.
- A navegação pode ser construída dinamicamente em vez de ser exigida na marcação.
- Os IDs e #hash hrefs também podem ser criados dinamicamente.
- Eventos de toque, como deslizar o dedo, podem ser adicionados para tornar o controle deslizante mais amigável (pequenos pontos não são amigáveis ao toque).
Quanto mais dessas coisas você fizer, maior será o tamanho do plugin. É por isso que atingir esse equilíbrio entre recursos, praticidade, desempenho e tamanho é tão complicado e onde existem tantos plug-ins diferentes que, em última análise, fazem a mesma coisa.