O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Escrevendo plugins JQuery

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Jquery a technical overview
Jquery a technical overview
Carregando em…3
×

Confira estes a seguir

1 de 18 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Escrevendo plugins JQuery (20)

Anúncio

Mais recentes (20)

Escrevendo plugins JQuery

  1. 1. Escrevendo Plugins jQuery Por 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 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. 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. 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. 12. Errado! E qual o jeito certo?
  13. 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. 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. 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. 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
  17. 17. #zigottolabs
  18. 18. Fonte http://docs.jquery.com/Plugins/Authoring

×