Ent\u00e3o quer dizer que voc\u00ea anda brincando com jQuery. Volta e meia utiliza uns plugins que mais parecem m\u00e1gica e se duvidar at\u00e9 se aventurou em criar o seu pr\u00f3prio, acertei?<\/p>\n
Acontece que, caso voc\u00ea j\u00e1 saiba desenvolver os seus, talvez possam existir melhores formas de escrev\u00ea-lo. Ser\u00e1 que voc\u00ea est\u00e1 seguindo as melhores pr\u00e1ticas? Ser\u00e1 que realmente entende o que est\u00e1 acontecendo por tr\u00e1s de cada linha?<\/p>\n
<\/p>\n
Hoje vou tentar responder as d\u00favidas mais frequentes, explorando as melhores pr\u00e1ticas para se construir um plugin. E no fim lhe mostrar um padr\u00e3o interessante que voc\u00ea pode seguir agora que j\u00e1 entendeu os conceitos.<\/p>\n
A ideia aqui n\u00e3o \u00e9 simplesmente mostrar como criar um plugin, mas sim como criar direito, explorando tudo o que o jQuery tem de melhor para nos oferecer.<\/p>\n
Encapsulamento e reaproveitamento de c\u00f3digo, essas s\u00e3o as palavras-chave. Se voc\u00ea est\u00e1 codificando algo que talvez sirva para futuros projetos, pode ser uma boa encapsular tudo isso em um plugin.<\/p>\n
Existem diversas formas, mas vamos come\u00e7ar com essa: Por mais trivial que isso possa parecer, muita gente n\u00e3o entende o que est\u00e1 acontecendo por tr\u00e1s disso exatamente. Portanto, antes de evoluirmos esse padr\u00e3o, vamos recorrer ao\u00a0c\u00f3digo fonte da biblioteca<\/a>, na sua vers\u00e3o mais recente, para entender de verdade esse pequeno trecho de c\u00f3digo.<\/p>\n O famoso\u00a0$<\/strong>\u00a0nada mais \u00e9 do que um \u201capelido\u201d para o objeto\u00a0jQuery<\/strong>. Pr\u00f3ximo ao fim doc\u00f3digo fonte da biblioteca<\/a>\u00a0encontramos a seguinte defini\u00e7\u00e3o: Possivelmente voc\u00ea j\u00e1 se deparou com plugins que n\u00e3o utilizavam a propriedade\u00a0.fn<\/strong>. Mas afinal, por que eu deveria utilizar o\u00a0.fn<\/strong>? Por que n\u00e3o apenas\u00a0$.meuPlugin<\/strong>\u00a0ao inv\u00e9s de\u00a0$.fn.meuPlugin<\/strong>?<\/p>\n Novamente, ao nos aventurarmos no\u00a0c\u00f3digo fonte<\/a>\u00a0percebemos, logo nas primeiras linhas, como o objeto\u00a0jQuery<\/strong>\u00a0\u00e9 definido. Dito isso, voltamos ao\u00a0c\u00f3digo fonte<\/a>\u00a0e veremos que\u00a0jQuery.fn<\/strong>\u00a0\u00e9 a mesma coisa que dizer\u00a0jQuery.prototype<\/strong>. Isso \u00e9 importante, pois quando voc\u00ea invoca a fun\u00e7\u00e3o\u00a0$()<\/strong>, como em\u00a0$(\u201c#algumID\u201d)<\/strong>, uma nova inst\u00e2ncia \u00e9 criada nessa linha: Logo, v\u00e1 de\u00a0.fn<\/strong>.<\/p>\n Sabia que existem outras bibliotecas Javascript que tamb\u00e9m utilizam o s\u00edmbolo cifr\u00e3o para referenciar seus objetos? Pois \u00e9, isso pode lhe causar uma baita dor de cabe\u00e7a se utilizar apenas aquele primeiro padr\u00e3o proposto.<\/p>\n Logo, uma boa pr\u00e1tica seria encapsular a l\u00f3gica do plugin em uma fun\u00e7\u00e3o an\u00f4nima. Assim, garantimos que n\u00e3o ir\u00e1 haver conflito entre o\u00a0$<\/strong>\u00a0do jQuery com o\u00a0$<\/strong>\u00a0de outras bibliotecas. Ent\u00e3o, voc\u00ea j\u00e1 entendeu como funcionam algumas coisas, vamos criar nosso primeiro plugin! Come\u00e7aremos com o cl\u00e1ssico exemplo de um Tooltip (aquelas caixinhas que aparecem no mouseover).<\/p>\n Criamos ent\u00e3o a chamada para o plugin a partir de determinado seletor: Na verdade n\u00e3o, pois dessa forma estamos ferindo um dos princ\u00edpios importantes que diferem os plugins bons dos ruins, e esse princ\u00edpio se chama encadeamento.<\/p>\n No jQuery \u00e9 muito comum vermos declara\u00e7\u00f5es do tipo: E que tal se evolu\u00edssemos nosso plugin e resolvessemos passar como par\u00e2metro a cor de fundo do nosso elemento. Portanto, n\u00e3o podemos nos esquecer de que precisamos nos preparar para receber esse conjunto de op\u00e7\u00f5es e assegurar que, caso n\u00e3o seja passado nenhum valor como par\u00e2metro, n\u00f3s possamos lidar com valores padr\u00e3o. var defaults = { var settings = $.extend( {}, defaults, options );<\/p>\n return this.each(function() { }; Esse \u00e9 s\u00f3 o come\u00e7o para voc\u00ea que deseja se aprofundar um pouquinho mais nessa arte de criar plugins, para entender mais visite o\u00a0guia oficial<\/a>.<\/p>\n Mesmo que a ideia de se formar um padr\u00e3o \u00fanico para criar plugins seja ut\u00f3pico, sugiro fortemente que d\u00ea uma olhadinha no\u00a0jQuery Boilerplate<\/a>, l\u00e1 voc\u00ea vai encontrar um padr\u00e3o bem s\u00f3lido para iniciar seus projetos, sem contar que a vers\u00e3o traduzida para portugu\u00eas foi lan\u00e7ada hoje!<\/p>\n Mas se o buraco for mais em baixo e voc\u00ea for lidar com plugins\u00a0stateful<\/a>\u00a0que controlam o estado dos objetos, confira o\u00a0jQuery UI Widget Factory<\/a>.<\/p>\n Lembre-se que o jQuery n\u00e3o \u00e9 apenas uma caixa preta que faz m\u00e1gicas pra voc\u00ea. Aventure-se no c\u00f3digo fonte e ver\u00e1 que n\u00e3o \u00e9 nada muito diferente do que voc\u00ea j\u00e1 faz com JavaScript puro.<\/p>\n E \u00e9 isso, espero que depois desse artigo, voc\u00ea tenha evoluido de um simples \u201cmanipulador de plugins\u201d para um criador de fato. At\u00e9 a pr\u00f3xima!<\/p>\n —————–<\/p>\n
\n[cc lang=”js”]$.fn.meuPlugin = function() {
\n\/\/ aqui vem a l\u00f3gica
\n};[\/cc]
\nEsse \u00e9 o m\u00ednimo que voc\u00ea precisa para iniciar o desenvolvimento de um plugin, basta adicionar uma propriedade ao\u00a0$.fn<\/strong>.<\/p>\nO que significa o cifr\u00e3o ($) ?<\/h2>\n
\n[cc lang=”js”]window.jQuery = window.$ = jQuery;[\/cc]
\nIsso significa que o mesmo objeto em mem\u00f3ria pode ser referenciado de diversas formas:\u00a0window.jQuery<\/strong>,\u00a0window.$<\/strong>,\u00a0jQuery<\/strong>\u00a0ou simplesmente\u00a0$<\/strong>.<\/p>\nQual a diferen\u00e7a entre $.meuPlugin e $.fn.meuPlugin?<\/h2>\n
\n[cc lang=”js”]var jQuery = function( selector, context ) {
\nreturn new jQuery.fn.init( selector, context, rootjQuery );
\n}[\/cc]
\nNote que\u00a0jQuery<\/strong>\u00a0\u00e9 uma fun\u00e7\u00e3o e no Javascript uma fun\u00e7\u00e3o \u00e9 tamb\u00e9m um objeto do tipo\u00a0Function<\/strong>. Por isso\u00a0jQuery.meuPlugin<\/strong>\u00a0(ou\u00a0$.meuPlugin<\/strong>) ir\u00e1 atribuir\u00a0meuPlugin<\/strong>para o objeto jQuery do tipo\u00a0Function<\/strong>.<\/p>\n
\n[cc lang=”js”]jQuery.fn = jQuery.prototype;[\/cc]
\nPortanto, a cada vez que voc\u00ea atribuir uma fun\u00e7\u00e3o (ou propriedade) para\u00a0jQuery.fn<\/strong>, como em\u00a0$.fn.meuPlugin<\/strong>, a fun\u00e7\u00e3o estar\u00e1 dispon\u00edvel para todas as inst\u00e2ncias desse objeto.<\/p>\n
\n[cc lang=”js”]return new jQuery.fn.init( selector, context );[\/cc]
\nE essa inst\u00e2ncia ter\u00e1 todos os m\u00e9todos que atribuirmos ao\u00a0prototype<\/strong>, mas n\u00e3o todos os m\u00e9todos que foram atribu\u00eddos direto ao objeto\u00a0Function<\/strong>.<\/p>\nEvite conflitos<\/h2>\n
\n[cc lang=”js”](function( $ ){
\n$.fn.meuPlugin = function() {
\n\/\/ aqui vem a l\u00f3gica
\n};
\n})( jQuery );[\/cc]
\nDessa forma mapeamos o\u00a0$<\/strong>\u00a0para que n\u00e3o seja afetado por nada fora desse escopo.<\/p>\nN\u00e3o quebre a corrente<\/h2>\n
\n[cc lang=”js”]$(function() {
\n$(\u201c.BlaBlaBla\u201d).tooltip();
\n});[\/cc]
\nE c\u00f3digo do nosso plugin ficar\u00e1 definido assim:
\n[cc lang=”js”](function( $ ){
\n$.fn.tooltip = function() {
\nthis.css({ background: \u2018yellow\u2019 });
\n};
\n})( jQuery );[\/cc]
\nAparentemente tudo certo, j\u00e1 que o plugin funciona direitinho, certo?<\/p>\n
\n[cc lang=”js”]$(\u2018div\u2019).show().addClass(\u2018BlaBlaBla\u2019).fadeIn();[\/cc]
\nIsso, porque \u00e9 poss\u00edvel encadear diversas chamadas, a um mesmo seletor. E uma excelente pr\u00e1tica por sinal, j\u00e1 que n\u00e3o criamos diversas inst\u00e2ncias como em:
\n[cc lang=”js”]$(\u2018div\u2019).show();
\n$(\u2018div\u2019).addClass(\u2018BlaBlaBla\u2019);
\n$(\u2018div\u2019).fadeIn();[\/cc]
\nPara permitirmos comportamento similar com nosso plugin basta retornar o\u00a0this<\/strong>.
\n[cc lang=”js”](function( $ ){
\n$.fn.tooltip = function() {
\nreturn this.each (function() {
\n$(this).css({ background: \u2018yellow\u2019 });
\n});
\n};
\n})( jQuery );[\/cc]
\nAssim, al\u00e9m de garantirmos o encadeamento, tamb\u00e9m manipulamos a cole\u00e7\u00e3o passada para o plugin atrav\u00e9s do m\u00e9todo\u00a0each<\/strong>, muito similar a um loop com\u00a0for<\/strong>\u00a0por exemplo.<\/p>\nComo passar par\u00e2metros e lidar com eles depois?<\/h2>\n
\n[cc lang=”js”]$(function() {
\n$(\u201c.BlaBlaBla\u201d).tooltip({
\n\u2018corDeFundo\u2019 : \u2018blue\u2019
\n});
\n}); [\/cc]
\nAgora preparamos nosso plugin para receber os par\u00e2metros atrav\u00e9s da vari\u00e1veloptions<\/strong>\u00a0e aplicamos a propriedade\u00a0corDeFundo<\/strong>\u00a0no\u00a0background<\/strong>.
\n[cc lang=”js”](function( $ ){
\n$.fn.tooltip = function(options) {
\nreturn this.each (function() {
\n$(this).css({ background: options.corDeFundo });
\n});
\n};
\n})( jQuery );[\/cc]
\nMaravilha, funcionou! Mas o que acontece se voc\u00ea resolve mais tarde n\u00e3o passar como par\u00e2metro a cor de fundo? Nosso plugin quebra.<\/p>\n
\n[cc lang=”js”](function( $ ){
\n$.fn.tooltip = function(options) {<\/p>\n
\n\u2018corDeFundo\u2019 : \u2018yellow\u2019
\n};<\/p>\n
\n$(this).css({ background: settings.corDeFundo });
\n});<\/p>\n
\n})( jQuery );[\/cc]
\nPara isso recorremos a fun\u00e7\u00e3o\u00a0$.extend<\/a>\u00a0que ir\u00e1 buscar os valores passados pela vari\u00e1vel\u00a0options<\/strong>\u00a0e mesclar com os valores definidos na vari\u00e1vel\u00a0defaults<\/strong>, armazenando em outra vari\u00e1vel chamada\u00a0settings<\/strong>.<\/p>\nA procura da batida perfeita<\/h2>\n