Escrevendo Plugins jQuery

Transcript

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. jQuery.fn.pluginName = function() { // código }; $(‘div’).pluginName(); Como criar um plugin jQuery #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 #zigottolabs 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
9. Mantenha o encadeamento (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 Retorna o “this”, mantendo o encadeamento para poder continuar a ser manipulado por métodos jQuery, tais como .css().
10. Extendendo as opcões (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 Extend é similar ao método merge do Ruby, entre outras linguagens
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 (...) 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 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
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
17. #zigottolabs
18. Fonte http://docs.jquery.com/Plugins/Authoring