Rozšiřujeme jQueryaneb proč si nenapsat plugin?

Bohdan GanickýFront-end Web Developer

http://twitter.com/bganickyhttp://atomicant.co.uk

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

Základní implementace - $.fn.myPlugin

$.fn.check = function() {this.attr('checked', 'checked');

};

$('input:checkbox').check();

Ukázka

Proměnná this je v tomto kontextu jQuery objekts veškerou svojí funkcionalitou.

Řetězení – kde se stala chyba?$('input:checkbox').check().hide(); // ERROR

Ukázka

Řetězení

$.fn.check = function() {return this.attr('checked', 'checked');

};

Pro zachování řetězení metod musíme zevnitř pluginu vrátit upravený jQuery objekt.

Ukázka

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>

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>');

}});

};

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

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>');

}});

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

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]'

};

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

Uzávěra (closure)

(function($) {$.fn.unobfuscate = function(userOptions) {

function gimmeMail(str, at, dot) {...

}return this.each(function() {

...});

};...

})(jQuery);

● 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!

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);

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);

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

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

Co ještě?

● Dokumentace (jsDoc)● Komprimace (YUI Compressor,

Google Closure Compiler)● Kooperace (GitHub)

Kam dál?

● http://docs.jquery.com/Plugins/Authoring● http://learningjquery.com● http://github.com/malsup● http://benalman.com/projects/jquery/

Otázky?

Díky za pozornost!

Bohdan GanickýFront-end Web Developer

http://twitter.com/bganickyhttp://atomicant.co.uk