Slidy z přednášky na Barcampu 2010 ve Vsetíně.

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>

7. Výchozí stav
$.fn.unobfuscate = function() {
function gimmeMail(str, at, dot) {
return str.replace(at, '@', 'g').replace(dot, '.', 'g');
}
return this.each(function() {
var $elemToUnobfuscate = $(this);
var address = gimmeMail($elemToUnobfuscate.text(), "[at-sign]", "[dot-sign]");
$elemToUnobfuscate.text(address);
if ($elemToUnobfuscate.is('a')) {
$elemToUnobfuscate.attr('href', gimmeMail($elemToUnobfuscate.attr('href'),
"[at-sign]", "[dot-sign]"));
}
else {
$elemToUnobfuscate.html('<a href="mailto:' + address + '">' + address +
'</a>');
}
});
};

8. HTML a inicializace
<ul>
<li><span class="no-spam">john.doe[at-sign]email[dot-sign]com</span></li>
<li><a href="mailto:john.doe[at-sign]email[dot-sign]com" class="no-
spam">contact</a></li>
<li><a href="mailto:joh.doe[at-sign]email[dot-sign]com" class="no-spam">john.doe[at-
sign]email[dot-sign]com</a></li>
</ul>
<script type="text/javascript">
$('.no-spam').unobfuscate();
</script>
Ukázka

9. Nastavení možností uživatelem
$.fn.unobfuscate = function (userOptions ) {
...
var defaultOptions = {
atString: '[at-sign]' ,
dotString: '[dot-sign]'
}
var options = $.extend (defaultOptions, userOptions);
return this .each( function () {
...
var address = gimmeMail($elemToUnobfuscate.text(), options.atString,
options.dotString );
$elemToUnobfuscate.text(address);
if ($elemToUnobfuscate.is('a')) {
$elemToUnobfuscate.attr('href', gimmeMail($elemToUnobfuscate.attr('href'),
options.atString, options.dotString ));
}
else {
$elemToUnobfuscate.html('<a href="mailto:' + address + '">' + address + '</
a>');
}
});

10. Nastavení možností uživatelem
<ul>
<li><span class="no-spam">john.doeATemailDOTcom</span></li>
<li><a href="mailto:john.doeATemailDOTcom" class="no-spam">contact</a></li>
<li><a href="mailto:john.doeATemailDOTcom" class="no-
spam">john.doeATemailDOTcom</a></li>
</ul>
<script type="text/javascript">
$('.no-spam').unobfuscate({
atString: 'AT',
dotString: 'DOT'
});
</script>
Ukázka

11. Nastav. výchozích možností uživatelem
$.fn.unobfuscate = function(userOptions) {
...
var options = $.extend({}, $.fn.unobfuscate.defaultOptions, userOptions);
return this.each(function() {
...
});
};
$.fn.unobfuscate.defaultOptions = {
atString: '[at-sign]',
dotString: '[dot-sign]'
};

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)

19. Kam dál?
● http://docs.jquery.com/Plugins/Authoring
● http://learningjquery.com
● http://github.com/malsup
● http://benalman.com/projects/jquery/

20. Otázky?

21. Díky za pozornost!
Bohdan Ganický
Front-end Web Developer
http://twitter.com/bganicky
http://atomicant.co.uk