Date post: | 13-Jul-2015 |
Category: |
Technology |
Upload: | bohdan-ganicky |
View: | 2,283 times |
Download: | 0 times |
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