1. Rozšiřujeme jQuery
aneb proč si nenapsat plugin?
Bohdan Ganický
Front-end Web Developer
http://twitter.com/bganicky
http://atomicant.co.uk
2. Co je to jQuery plugin?
Rozšíření standardní sady metod, kterou nám jQuery
dodává ve výchozím stavu
Použití:
$('p').myPlugin();
3. Základní implementace - $.fn.myPlugin
$.fn.check = function() {
this.attr('checked', 'checked');
};
$('input:checkbox').check();
Proměnná this je v tomto kontextu jQuery objekt
s veškerou svojí funkcionalitou.
Ukázka
4. Řetězení – kde se stala chyba?
$('input:checkbox').check().hide(); // ERROR
Ukázka
5. Řetězení
Pro zachování řetězení metod musíme zevnitř pluginu
vrátit upravený jQuery objekt.
$.fn.check = function() {
return this.attr('checked', 'checked');
};
Ukázka
6. Unobfuscate plugin
● Ze serveru dostaneme obfuskované emailové
adresy
● Plugin z nich udělá normální 'mailto:' odkazy
● Plugin akceptuje různé varianty obfuskace:
<span>bob[at-sign]mail[dot-sign]xy</span>
<a href="mailto:bob[at-sign]mail[dot-sign]xy">kontakt</a>
<a href="mailto:bob[at-sign]mail[dot-sign]xy">bob[at-sign]mail[dot-
sign]xy</a>
12. Nastav. výchozích možností uživatelem
// nastavení všech možností
$.fn.unobfuscate.defaultOptions = {
atString: 'AT',
dotString: 'DOT'
};
// nastavení jedné možnosti
$.fn.unobfuscate.defaultOptions.atString = 'AT';
// volání pluginu na domready
$(function() {
$('.no-spam').unobfuscate();
});
Ukázka
13. Uzávěra (closure)
● Umožňuje nastavení privátních funkcí, které se pustí
pouze jednou při načtení skriptu a následně jsou k
dispozici pouze uvnitř pluginu.
● Řeší problém s '$' – ne všichni používají stejný alias!
(function($) {
$.fn.unobfuscate = function(userOptions) {
function gimmeMail(str, at, dot) {
...
}
return this.each(function() {
...
});
};
...
})(jQuery);
14. Privátní prostor
● Uvnitř uzávěry (ale vně pluginu) můžeme definovat
privátní funkce/proměnné či konstanty, které budou
k dispozici pouze pro náš plugin a budou definovány
pouze jednou.
(function($) {
function gimmeMail(str, at, dot) {
return str.replace(at, '@', 'g').replace(dot, '.', 'g');
}
$.fn.unobfuscate = function(userOptions) {
...
};
$.fn.unobfuscate.defaultOptions = { ... };
})(jQuery);
15. Callback funkce
● Dejte uživateli možnost ovlivnit chování pluginu při
různých událostech.
(function($) {
...
$.fn.unobfuscate = function(userOptions) {
...
options.processed.call(this);
});
};
$.fn.unobfuscate.defaultOptions = {
atString: '[at-sign]',
dotString: '[dot-sign]',
processed: function(){}
};
})(jQuery);
16. Callback funkce - použití
$(function() {
var count = 0;
$('.no-spam').unobfuscate({
processed: function() {
$(this).after(' Zpracováno');
count++;
}
});
alert('Počet zpracovanych adres: ' + count);
});
Ukázka
17. Předejití vícenásobnému zpracování
(function($) {
...
$.fn.unobfuscate = function(userOptions) {
var options = $.extend({}, $.fn.unobfuscate.defaultOptions, userOptions);
var that = this.not('.unobfuscated');
return that.each(function() {
...
$elemToUnobfuscate.addClass('unobfuscated');
options.processed.call(this);
});
};
...
})(jQuery);
Ukázka
18. Co ještě?
● Dokumentace (jsDoc)
● Komprimace (YUI Compressor,
Google Closure Compiler)
● Kooperace (GitHub)