Rozšiřujeme jQuery
aneb proč si nenapsat plugin?


 Bohdan Ganický
 Front-end Web Developer

 http://twitter.com/bganicky
...
Co je to jQuery plugin?
Rozšíření standardní sady metod, kterou nám jQuery
dodává ve výchozím stavu


Použití:
$('p').myPl...
Základní implementace - $.fn.myPlugin

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

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




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

$.fn.check = function() {
 re...
Unobfuscate plugin
●   Ze serveru dostaneme obfuskované emailové
    adresy
●   Plugin z nich udělá normální 'mailto:' odk...
Výchozí stav
$.fn.unobfuscate = function() {
   function gimmeMail(str, at, dot) {
     return str.replace(at, '@', 'g').r...
HTML a inicializace
<ul>
  <li><span class="no-spam">john.doe[at-sign]email[dot-sign]com</span></li>
   <li><a href="mailt...
Nastavení možností uživatelem
$.fn.unobfuscate = function (userOptions ) {
   ...
   var defaultOptions = {
      atString...
Nastavení možností uživatelem
<ul>
  <li><span class="no-spam">john.doeATemailDOTcom</span></li>
  <li><a href="mailto:joh...
Nastav. výchozích možností uživatelem
$.fn.unobfuscate = function(userOptions) {
   ...
   var options = $.extend({}, $.fn...
Nastav. výchozích možností uživatelem
// nastavení všech možností
$.fn.unobfuscate.defaultOptions = {
   atString: 'AT',
 ...
Uzávěra (closure)
 ●   Umožňuje nastavení privátních funkcí, které se pustí
     pouze jednou při načtení skriptu a násled...
Privátní prostor
 ●    Uvnitř uzávěry (ale vně pluginu) můžeme definovat
      privátní funkce/proměnné či konstanty, kter...
Callback funkce
 ●   Dejte uživateli možnost ovlivnit chování pluginu při
     různých událostech.
(function($) {
  ...
  ...
Callback funkce - použití
$(function() {
   var count = 0;

  $('.no-spam').unobfuscate({
     processed: function() {
   ...
Předejití vícenásobnému zpracování
(function($) {
  ...
  $.fn.unobfuscate = function(userOptions) {
     var options = $....
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:...
Otázky?
Díky za pozornost!


Bohdan Ganický
Front-end Web Developer

http://twitter.com/bganicky
http://atomicant.co.uk
Upcoming SlideShare
Loading in...5
×

Rozšiřujeme jQuery aneb proč si nenapsat plugin?

2,288

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,288
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Rozšiřujeme jQuery aneb proč si nenapsat plugin?

  1. 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. 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. 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. 4. Řetězení – kde se stala chyba? $('input:checkbox').check().hide(); // ERROR Ukázka
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Co ještě? ● Dokumentace (jsDoc) ● Komprimace (YUI Compressor, Google Closure Compiler) ● Kooperace (GitHub)
  19. 19. Kam dál? ● http://docs.jquery.com/Plugins/Authoring ● http://learningjquery.com ● http://github.com/malsup ● http://benalman.com/projects/jquery/
  20. 20. Otázky?
  21. 21. Díky za pozornost! Bohdan Ganický Front-end Web Developer http://twitter.com/bganicky http://atomicant.co.uk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×