SlideShare uma empresa Scribd logo
Escrevendo Plugins jQuery
Por Marcelo Fraga
@marcelofraga




                    #zigottolabs
Por que jQuery?
 Compatibilidade

 Manipulação de eventos

 Manipulação DOM

 Animações

 Interações Ajax




                          #zigottolabs
JavaScript
        var addEvent = function(type, el, func) {
          if (el.addEventListener) {
            el.addEventListener(type, func, false);
          } else {
            el.attachEvent('on' + type, func);
          }
        };

        var link = document.getElementById('link');

        addEvent('click', link, function() {
          // código
        });

                                                      #zigottolabs
jQuery


         $('#link').click(function() {
           // código
         });




                                         #zigottolabs
Por que criar um plugin jQuery?
 Evita colisões usando namespaces

 Fácil de criar

 Organiza códigos complexos

 Reutilização




                                    #zigottolabs
Como criar um plugin jQuery

          jQuery.fn.pluginName = function() {
            // código
          };

          $(‘div’).pluginName();




                                                #zigottolabs
Proteja o jQuery
 Auto-invocando função anônima

 Passando jQuery para o $, evitando colisões com outras bibliotecas




                            (function($) {
                              $.fn.pluginName = function() {
                                // código
                              };
                            })(jQuery);




                                                                      #zigottolabs
Iterando
 Não há necessidade de usar o $(this) porque “this” já é um objeto jQuery

                (function($) {
                  $.fn.maxHeight = function() {
                     var max = 0;

                     this.each(function() {
                        max = Math.max(max, $(this).height());
                     };

                     return max;
                  };
                })(jQuery);

                $(‘div’).maxHeight();
                // ==> retorna a altura da div mais alta da página


                                                                            #zigottolabs
Mantenha o encadeamento
Retorna o “this”, mantendo o encadeamento para poder continuar a ser manipulado por métodos
jQuery, tais como .css().

                     (function($) {
                       $.fn.lockDimensions = function(type) {
                          return this.each(function() {
                            var $this = $(this);

                            if (!type || type == ‘width’) {
                              $this.width($this.width());
                            }

                            if (!type || type == ‘height’) {
                              $this.height($this.height());
                            }
                          });
                       };
                     })(jQuery);

                     $(‘div’).lockDimensions(‘width’).css(‘color’, ‘#f00’);
                                                                              #zigottolabs
Extendendo as opcões
Extend é similar ao método merge do Ruby, entre outras linguagens

                              (function($) {
                                $.fn.tooltip = function(options) {
                                   var settings = $.extend({
                                     location: ‘top’,
                                     background: ‘#ccc’
                                   }, options);

                                   return this.each(function() {
                                      // código
                                   };
                                };
                              })(jQuery);

                              $(‘div’).tooltip({
                                location: ‘left’
                              });
                                                                     #zigottolabs
Plugin Métodos
Um único plugin não deve ter mais de um namespace no objeto jQuery.fn

                          (function($) {
                            $.fn.tooltip = function(options) {
                               // código
                            };

                             $.fn.tooltipShow = function() {
                                // código
                             };

                             $.fn.tooltipHide = function() {
                                // código
                             };

                            $.fn.tooltipUpdate = function(content) {
                               // código
                            };
                          })(jQuery);
                                                                        #zigottolabs
Errado!
E qual o jeito certo?
Plugin Métodos
Encapsulando os métodos em um objeto literal , sendo chamado pelo nome do método e em seguida
quaisquer parâmetros adicionais
 (function($) {
   var methods = {
      init: function(options) { // código },
      show: function() { // código },
      hide: function() { // código },
      update: function(content) { // código }
   };

   $.fn.tooltip = function(method) {
      if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
      } else if (typeof method === ‘object’ || !method) {
        return methods.init.apply(this, arguments);
      } else {
        $.error(‘Method ‘ + method + ‘ does not exists on jQuery.tooltip’);
      }
   };
 })(jQuery);
                                                                             #zigottolabs
Dados
Ajuda a manter o controle de variáveis e estado entre chamadas de métodos a partir do seu plugin

Usando em um objeto literal, torna o acesso mais fácil a todas as propriedades
                  (...)

                  init: function(options) {
                    return this.each(function() {
                       var $this   = $(this),
                           data    = $this.data(‘tooltip’),
                           tooltip = $(‘<div/>’, { text: $this.attr(‘title’) });

                         if (!data) {
                           $this.data(‘tooltip’, {
                              target: $this,
                              tooltip: tooltip
                           });
                         }
                       });
                  };

                  (...)                                                          #zigottolabs
Dados
Quando necessário, permite a remoção dos dados


                           (...)

                           destroy: function(options) {
                             return this.each(function() {
                                var $this = $(this),
                                    data = $this.data(‘tooltip’);

                                  data.tooltip.remove();
                                  $this.removeData(‘tooltip’);
                                });
                           };

                           (...)




                                                                    #zigottolabs
Eventos
Uma boa prática é criar um namespace para o evento

Quando precisar desvincular o evento, pode fazê-lo sem interferir com outros eventos que poderiam ter
sido vinculados ao mesmo tipo de evento

                             (...)

                             init: function(options) {
                                return this.each(function() {
                                  $(window).bind(‘resize.tooltip’, function() {
                                     // código
                                  }
                                });
                             };

                             destroy: function(options) {
                                return this.each(function() {
                                  $(window).unbind(‘resize.tooltip’);
                                });
                             };

                             (...)                                                #zigottolabs
#zigottolabs
Fonte
http://docs.jquery.com/Plugins/Authoring

Mais conteúdo relacionado

Mais procurados

PHPubSP Object Calisthenics aplicado ao PHP
PHPubSP Object Calisthenics aplicado ao PHPPHPubSP Object Calisthenics aplicado ao PHP
PHPubSP Object Calisthenics aplicado ao PHP
Guilherme Blanco
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object Calisthenics
Guilherme Blanco
 
Segunda Apresentação jQuery
Segunda Apresentação jQuerySegunda Apresentação jQuery
Segunda Apresentação jQuery
douglasgrava
 
Curso de PHP - Objetos
Curso de PHP - ObjetosCurso de PHP - Objetos
Curso de PHP - Objetos
Fabio Moura Pereira
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
Sérgio Santos
 
PHP ao Extremo
PHP ao ExtremoPHP ao Extremo
PHP ao Extremo
Thiago Rigo
 
Do REST ao GraphQL com PHP
Do REST ao GraphQL com PHPDo REST ao GraphQL com PHP
Do REST ao GraphQL com PHP
Bruno Neves Menezes
 
PHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHPPHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHP
Bruno Neves Menezes
 
Python para quem sabe Python (aula 2)
Python para quem sabe Python (aula 2)Python para quem sabe Python (aula 2)
Python para quem sabe Python (aula 2)
Luciano Ramalho
 
Object Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simplesObject Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simples
Otávio Calaça Xavier
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScript
Jean Carlo Emer
 
Java6
Java6Java6
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamento
Ricardo Valeriano
 
Aula5
Aula5Aula5
Aula5
softeam
 
Interface grafica
Interface graficaInterface grafica
Interface grafica
Ialis Cavalcante
 
Java: Composicao e Array List
Java: Composicao e Array ListJava: Composicao e Array List
Java: Composicao e Array List
Arthur Emanuel
 
Aula 12 Relatório - Tabelas
Aula 12   Relatório - TabelasAula 12   Relatório - Tabelas
Aula 12 Relatório - Tabelas
Dalton Martins
 
Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2
Jeison Barros
 
Java8
Java8Java8

Mais procurados (20)

PHPubSP Object Calisthenics aplicado ao PHP
PHPubSP Object Calisthenics aplicado ao PHPPHPubSP Object Calisthenics aplicado ao PHP
PHPubSP Object Calisthenics aplicado ao PHP
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object Calisthenics
 
Segunda Apresentação jQuery
Segunda Apresentação jQuerySegunda Apresentação jQuery
Segunda Apresentação jQuery
 
Curso de PHP - Objetos
Curso de PHP - ObjetosCurso de PHP - Objetos
Curso de PHP - Objetos
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
 
PHP ao Extremo
PHP ao ExtremoPHP ao Extremo
PHP ao Extremo
 
Do REST ao GraphQL com PHP
Do REST ao GraphQL com PHPDo REST ao GraphQL com PHP
Do REST ao GraphQL com PHP
 
PHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHPPHP Community Summit - Do REST ao GraphQL com PHP
PHP Community Summit - Do REST ao GraphQL com PHP
 
Python para quem sabe Python (aula 2)
Python para quem sabe Python (aula 2)Python para quem sabe Python (aula 2)
Python para quem sabe Python (aula 2)
 
Object Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simplesObject Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simples
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScript
 
Java6
Java6Java6
Java6
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamento
 
Aula5
Aula5Aula5
Aula5
 
Interface grafica
Interface graficaInterface grafica
Interface grafica
 
Java: Composicao e Array List
Java: Composicao e Array ListJava: Composicao e Array List
Java: Composicao e Array List
 
Aula 12 Relatório - Tabelas
Aula 12   Relatório - TabelasAula 12   Relatório - Tabelas
Aula 12 Relatório - Tabelas
 
Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2
 
Java8
Java8Java8
Java8
 

Destaque

Sinatra - Primeiros Passos
Sinatra - Primeiros PassosSinatra - Primeiros Passos
Sinatra - Primeiros Passos
Zigotto Tecnologia
 
Open Source - DevInVale 2011
Open Source - DevInVale 2011Open Source - DevInVale 2011
Open Source - DevInVale 2011
Zigotto Tecnologia
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
Zigotto Tecnologia
 
Testes de aceitação com Steak e Capybara
Testes de aceitação com Steak e CapybaraTestes de aceitação com Steak e Capybara
Testes de aceitação com Steak e Capybara
Zigotto Tecnologia
 
HTML5
HTML5HTML5
Usando QUnit para testes unitários em JavaScript
Usando QUnit para testes unitários em JavaScriptUsando QUnit para testes unitários em JavaScript
Usando QUnit para testes unitários em JavaScript
Zigotto Tecnologia
 
Apresentação Padawan
Apresentação PadawanApresentação Padawan
Apresentação Padawan
Zigotto Tecnologia
 

Destaque (7)

Sinatra - Primeiros Passos
Sinatra - Primeiros PassosSinatra - Primeiros Passos
Sinatra - Primeiros Passos
 
Open Source - DevInVale 2011
Open Source - DevInVale 2011Open Source - DevInVale 2011
Open Source - DevInVale 2011
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
 
Testes de aceitação com Steak e Capybara
Testes de aceitação com Steak e CapybaraTestes de aceitação com Steak e Capybara
Testes de aceitação com Steak e Capybara
 
HTML5
HTML5HTML5
HTML5
 
Usando QUnit para testes unitários em JavaScript
Usando QUnit para testes unitários em JavaScriptUsando QUnit para testes unitários em JavaScript
Usando QUnit para testes unitários em JavaScript
 
Apresentação Padawan
Apresentação PadawanApresentação Padawan
Apresentação Padawan
 

Semelhante a Escrevendo plugins JQuery

Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
Michel Ribeiro
 
jQuery básico (parte 3)
jQuery básico (parte 3)jQuery básico (parte 3)
jQuery básico (parte 3)
Luís Cobucci
 
JQuery
JQuery JQuery
Programação web ii aulas 06 e 07
Programação web ii   aulas 06 e 07Programação web ii   aulas 06 e 07
Programação web ii aulas 06 e 07
Yuri Bispo
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
André Willik Valenti
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
Bruno Abrantes
 
Javascript avançado
Javascript avançadoJavascript avançado
Javascript avançado
Ricardo Cavalcanti
 
Php5 e a orientação a objetos
Php5 e a orientação a objetosPhp5 e a orientação a objetos
Php5 e a orientação a objetos
xbacon
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?
Arthur Xavier
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
Luciano Borges
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
Victor Hugo Germano
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
Cristiano Pires Martins
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com Kotlin
Nelson Glauber Leal
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
Caue Fajoli
 
JS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript FuncionalJS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript Funcional
iMasters
 
Aula actionscript basico
Aula actionscript basicoAula actionscript basico
Aula actionscript basico
Wemerson Silva
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Michael Castillo Granados
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Impacta Eventos
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
Sérgio Souza Costa
 

Semelhante a Escrevendo plugins JQuery (20)

Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
jQuery básico (parte 3)
jQuery básico (parte 3)jQuery básico (parte 3)
jQuery básico (parte 3)
 
JQuery
JQuery JQuery
JQuery
 
Programação web ii aulas 06 e 07
Programação web ii   aulas 06 e 07Programação web ii   aulas 06 e 07
Programação web ii aulas 06 e 07
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
 
Javascript avançado
Javascript avançadoJavascript avançado
Javascript avançado
 
Php5 e a orientação a objetos
Php5 e a orientação a objetosPhp5 e a orientação a objetos
Php5 e a orientação a objetos
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com Kotlin
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
JS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript FuncionalJS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript Funcional
 
Aula actionscript basico
Aula actionscript basicoAula actionscript basico
Aula actionscript basico
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 

Mais de Zigotto Tecnologia

Engine on Rails
Engine on RailsEngine on Rails
Engine on Rails
Zigotto Tecnologia
 
Nova API do Google Maps e Possíveis Aplicações
Nova API do Google Maps e Possíveis AplicaçõesNova API do Google Maps e Possíveis Aplicações
Nova API do Google Maps e Possíveis Aplicações
Zigotto Tecnologia
 
Apps para SmartPhones usando PhoneGap
Apps para SmartPhones usando PhoneGapApps para SmartPhones usando PhoneGap
Apps para SmartPhones usando PhoneGap
Zigotto Tecnologia
 
Um pouco de Agile
Um pouco de AgileUm pouco de Agile
Um pouco de Agile
Zigotto Tecnologia
 
Ilustrações, técnicas e formas
Ilustrações, técnicas e formasIlustrações, técnicas e formas
Ilustrações, técnicas e formas
Zigotto Tecnologia
 
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQueryJAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
Zigotto Tecnologia
 
Desvendando a Web - Ponto de vista de um Zigottiano
Desvendando a Web - Ponto de vista de um ZigottianoDesvendando a Web - Ponto de vista de um Zigottiano
Desvendando a Web - Ponto de vista de um Zigottiano
Zigotto Tecnologia
 

Mais de Zigotto Tecnologia (7)

Engine on Rails
Engine on RailsEngine on Rails
Engine on Rails
 
Nova API do Google Maps e Possíveis Aplicações
Nova API do Google Maps e Possíveis AplicaçõesNova API do Google Maps e Possíveis Aplicações
Nova API do Google Maps e Possíveis Aplicações
 
Apps para SmartPhones usando PhoneGap
Apps para SmartPhones usando PhoneGapApps para SmartPhones usando PhoneGap
Apps para SmartPhones usando PhoneGap
 
Um pouco de Agile
Um pouco de AgileUm pouco de Agile
Um pouco de Agile
 
Ilustrações, técnicas e formas
Ilustrações, técnicas e formasIlustrações, técnicas e formas
Ilustrações, técnicas e formas
 
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQueryJAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
 
Desvendando a Web - Ponto de vista de um Zigottiano
Desvendando a Web - Ponto de vista de um ZigottianoDesvendando a Web - Ponto de vista de um Zigottiano
Desvendando a Web - Ponto de vista de um Zigottiano
 

Último

PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptxREDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
IranyGarcia
 

Último (6)

PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptxREDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
REDE_DE_COMPUTADORES_TECNOLOGIA_TIPOS.pptx
 

Escrevendo plugins JQuery

  • 1. Escrevendo Plugins jQuery Por Marcelo Fraga @marcelofraga #zigottolabs
  • 2. Por que jQuery? Compatibilidade Manipulação de eventos Manipulação DOM Animações Interações Ajax #zigottolabs
  • 3. JavaScript var addEvent = function(type, el, func) { if (el.addEventListener) { el.addEventListener(type, func, false); } else { el.attachEvent('on' + type, func); } }; var link = document.getElementById('link'); addEvent('click', link, function() { // código }); #zigottolabs
  • 4. jQuery $('#link').click(function() { // código }); #zigottolabs
  • 5. Por que criar um plugin jQuery? Evita colisões usando namespaces Fácil de criar Organiza códigos complexos Reutilização #zigottolabs
  • 6. Como criar um plugin jQuery jQuery.fn.pluginName = function() { // código }; $(‘div’).pluginName(); #zigottolabs
  • 7. Proteja o jQuery Auto-invocando função anônima Passando jQuery para o $, evitando colisões com outras bibliotecas (function($) { $.fn.pluginName = function() { // código }; })(jQuery); #zigottolabs
  • 8. Iterando Não há necessidade de usar o $(this) porque “this” já é um objeto jQuery (function($) { $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max(max, $(this).height()); }; return max; }; })(jQuery); $(‘div’).maxHeight(); // ==> retorna a altura da div mais alta da página #zigottolabs
  • 9. Mantenha o encadeamento Retorna o “this”, mantendo o encadeamento para poder continuar a ser manipulado por métodos jQuery, tais como .css(). (function($) { $.fn.lockDimensions = function(type) { return this.each(function() { var $this = $(this); if (!type || type == ‘width’) { $this.width($this.width()); } if (!type || type == ‘height’) { $this.height($this.height()); } }); }; })(jQuery); $(‘div’).lockDimensions(‘width’).css(‘color’, ‘#f00’); #zigottolabs
  • 10. Extendendo as opcões Extend é similar ao método merge do Ruby, entre outras linguagens (function($) { $.fn.tooltip = function(options) { var settings = $.extend({ location: ‘top’, background: ‘#ccc’ }, options); return this.each(function() { // código }; }; })(jQuery); $(‘div’).tooltip({ location: ‘left’ }); #zigottolabs
  • 11. Plugin Métodos Um único plugin não deve ter mais de um namespace no objeto jQuery.fn (function($) { $.fn.tooltip = function(options) { // código }; $.fn.tooltipShow = function() { // código }; $.fn.tooltipHide = function() { // código }; $.fn.tooltipUpdate = function(content) { // código }; })(jQuery); #zigottolabs
  • 12. Errado! E qual o jeito certo?
  • 13. Plugin Métodos Encapsulando os métodos em um objeto literal , sendo chamado pelo nome do método e em seguida quaisquer parâmetros adicionais (function($) { var methods = { init: function(options) { // código }, show: function() { // código }, hide: function() { // código }, update: function(content) { // código } }; $.fn.tooltip = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === ‘object’ || !method) { return methods.init.apply(this, arguments); } else { $.error(‘Method ‘ + method + ‘ does not exists on jQuery.tooltip’); } }; })(jQuery); #zigottolabs
  • 14. Dados Ajuda a manter o controle de variáveis e estado entre chamadas de métodos a partir do seu plugin Usando em um objeto literal, torna o acesso mais fácil a todas as propriedades (...) init: function(options) { return this.each(function() { var $this = $(this), data = $this.data(‘tooltip’), tooltip = $(‘<div/>’, { text: $this.attr(‘title’) }); if (!data) { $this.data(‘tooltip’, { target: $this, tooltip: tooltip }); } }); }; (...) #zigottolabs
  • 15. Dados Quando necessário, permite a remoção dos dados (...) destroy: function(options) { return this.each(function() { var $this = $(this), data = $this.data(‘tooltip’); data.tooltip.remove(); $this.removeData(‘tooltip’); }); }; (...) #zigottolabs
  • 16. Eventos Uma boa prática é criar um namespace para o evento Quando precisar desvincular o evento, pode fazê-lo sem interferir com outros eventos que poderiam ter sido vinculados ao mesmo tipo de evento (...) init: function(options) { return this.each(function() { $(window).bind(‘resize.tooltip’, function() { // código } }); }; destroy: function(options) { return this.each(function() { $(window).unbind(‘resize.tooltip’); }); }; (...) #zigottolabs