Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Escrevendo plugins JQuery

2.562 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×