Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Escrevendo plugins JQuery

2.561 visualizaciones

Publicado el

ZigottoLabs em 25 de Março de 2011
Por Marcelo Fraga

Publicado en: Tecnología
  • Sé el primero en comentar

Escrevendo plugins JQuery

  1. 1. Escrevendo Plugins jQueryPor Marcelo Fraga@marcelofraga #zigottolabs
  2. 2. Por que jQuery? Compatibilidade Manipulação de eventos Manipulação DOM Animações Interações Ajax #zigottolabs
  3. 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. 4. jQuery $(#link).click(function() { // código }); #zigottolabs
  5. 5. Por que criar um plugin jQuery? Evita colisões usando namespaces Fácil de criar Organiza códigos complexos Reutilização #zigottolabs
  6. 6. Como criar um plugin jQuery jQuery.fn.pluginName = function() { // código }; $(‘div’).pluginName(); #zigottolabs
  7. 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. 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. 9. Mantenha o encadeamentoRetorna o “this”, mantendo o encadeamento para poder continuar a ser manipulado por métodosjQuery, 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. 10. Extendendo as opcõesExtend é 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. 11. Plugin MétodosUm ú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. 12. Errado!E qual o jeito certo?
  13. 13. Plugin MétodosEncapsulando os métodos em um objeto literal , sendo chamado pelo nome do método e em seguidaquaisquer 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. 14. DadosAjuda a manter o controle de variáveis e estado entre chamadas de métodos a partir do seu pluginUsando 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. 15. DadosQuando 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. 16. EventosUma boa prática é criar um namespace para o eventoQuando precisar desvincular o evento, pode fazê-lo sem interferir com outros eventos que poderiam tersido 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
  17. 17. #zigottolabs
  18. 18. Fontehttp://docs.jquery.com/Plugins/Authoring

×