escrevendo plugins jquery

18
Escrevendo Plugins jQuery Por Marcelo Fraga @marcelofraga #zigottolabs

Upload: zigotto-tecnologia

Post on 25-Jun-2015

2.257 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Escrevendo plugins JQuery

Escrevendo Plugins jQueryPor Marcelo Fraga@marcelofraga

#zigottolabs

Page 2: Escrevendo plugins JQuery

Por que jQuery?

Compatibilidade

Manipulação de eventos

Manipulação DOM

Animações

Interações Ajax

#zigottolabs

Page 3: Escrevendo plugins JQuery

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

Page 4: Escrevendo plugins JQuery

jQuery

$('#link').click(function() {// código

});

#zigottolabs

Page 5: Escrevendo plugins JQuery

Por que criar um plugin jQuery?

Evita colisões usando namespaces

Fácil de criar

Organiza códigos complexos

Reutilização

#zigottolabs

Page 6: Escrevendo plugins JQuery

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

};

$(‘div’).pluginName();

Como criar um plugin jQuery

#zigottolabs

Page 7: Escrevendo plugins JQuery

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

Page 8: Escrevendo plugins JQuery

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

Page 9: Escrevendo plugins JQuery

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

Page 10: Escrevendo plugins JQuery

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

Page 11: Escrevendo plugins JQuery

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

Page 12: Escrevendo plugins JQuery

Errado!E qual o jeito certo?

Page 13: Escrevendo plugins JQuery

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

Page 14: Escrevendo plugins JQuery

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

Page 15: Escrevendo plugins JQuery

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

Page 16: Escrevendo plugins JQuery

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

Page 17: Escrevendo plugins JQuery

#zigottolabs

Page 18: Escrevendo plugins JQuery

Fonte

http://docs.jquery.com/Plugins/Authoring