Escrevendo plugins JQuery

Escrevendo Plugins jQueryPor Marcelo Fraga@marcelofraga

#zigottolabs

Por que jQuery?

Compatibilidade

Manipulação de eventos

Manipulação DOM

Animações

Interações Ajax

#zigottolabs

JavaScriptvar 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

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

};

$(‘div’).pluginName();

Como criar um plugin jQuery

#zigottolabs

Proteja o jQueryAuto-invocando função anônima

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

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

};})(jQuery);

#zigottolabs

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

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().

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

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

Errado!E qual o jeito certo?

Plugin MétodosEncapsulando 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

(...)

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

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

EventosUma 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