Tworzenie pluginów jQuery – wprowadzenie

learning

Poziom średnio-zaawansowany

jQuery to bardzo popularny framework. Korzystając z niego, bardzo często korzystamy także z pluginów, których jest naprawdę sporo. I można powiedzieć że stanowią one jedną z najsilniejszych cech tej biblioteki.

Tutorial: tworzenie pluginów jQuery

Dobrym pomysłem zatem jest opanowanie sztuki tworzenia pluginów jQuery, czym się teraz zajmiemy.

Plugin jest eleganckim i praktycznym rozwiązaniem do implementacji kodu bazującego na bibliotece jQuery, który będzie wielokrotnie wykorzystywany.

Implementujemy takie rozszerzenie jQuery, które będzie operować na obiektach dokumentu do niego przekazanych.

Przykładem takiej metody może być fadeOut(), która operuje na określonych elementach:

$('#my_element').fadeOut();

Implementacja prostego pluginu

Ogólna postać, którą można potraktować jako szablon, może wyglądać następująco:

(function($) {
  $.fn.extend({
    myplugin: function(options) {
      this.defaultOptions = {};

      var settings = $.extend({}, this.defaultOptions, options);

      return this.each(function() {
        var $this = $(this);
      });
    }
  });
})(jQuery);

Przy okazji, taki rodzaj „opakowania” został szerzej opisany w artykule o funkcjach anonimowych i domknięciach.

Przejdźmy jednak do naszego przykładu praktycznego.

Stwórzmy plik jq_plugin_dev_1.js, w którym umieścimy podstawowy kod:

(function($) {
    var myApp = {};
    
    $.extend(myApp, {
        name: 'jQuery plugin demo',
        version: '0.1',
        
        init: function() {
            alert(this.name + " v. " + this.version);
        }
    });
    
    // init / run
    $(function() {
        myApp.init();
    });
    
})(jQuery);

Tym samym stworzyliśmy nowy typ (myApp), reprezentujący naszą prostą „aplikację”, a następnie rozszerzyliśmy o nowe dane (właściwości) i zachowania (metody). Całość została „spakowana” w plugin jQuery.

Wystarczy dołączyć ten plik .js do strony HTML, a kod zostanie uruchomiony automatycznie. Wynikiem będzie w tym przypadku: „jQuery plugin demo v. 0.1”.

Plugin powinien mieć określone parametry działania, które użytkownik (programista) może nadpisać własnymi wartościami.

Przykładowo zamieńmy kod:

...
  $(function() {
    myApp.init();
  });
...

na następujący:

...
  $(function() {
    myApp.name = 'Changed name';
    myApp.version = '0.3';
    myApp.init();
  });
...

a wynikiem działania będzie „Changed name v. 0.3”, co oznacza że domyślne wartości zostały nadpisane.

Przykład do pobrania:

http://directcode.eu/samples/jquery_plugins_dev/jquery_plugins_dev.zip

Parametry te zostały zdefiniowane początkowo wewnątrz wywołania metody $.extend. Może ona rozszerzać parametry naszego pluginu, tak jak w kolejnym przykładzie:

(function($) {
    $.fn.mycarousel = function(options) {
        
        options = $.extend({
            display_elems    : 5,
            animation_speed  : 100,
            pause_time       : 1500,
            onScroll         : function() { 
                                   alert('Scrolling ...'); 
                               }
        }, options);
        
        return this.each(function() {
            var $t = $(this);
            // operacje ...

        });
    }
})(jQuery);

W powyższym przykładzie zdefiniowaliśmy domyślne parametry pod nazwą options. Może być ona dowolna – to tylko obiekt, który rozszerzamy.

Użytkownik może wywołać nasz plugin, podając własne parametry, np.:

$('myPhotoList').mycarousel({ display_elem : 10 });

Następną częścią kodu jest:

return this.each(function() {
    // ...
});

odpowiedzialna za przechodzenie po wszystkich elementach, które zostały przekazane do pluginu. Dla każdego z tych elementów zostanie zastosowany odpowiedni kod pluginu.

Przykładowe wywołanie – załóżmy że mamy listę (ul/li) zawierającą zdjęcia:

$(document).ready(function() {
  $('.our_li_items').mycarousel();
});

Takie wywołanie zastosuje plugin dla pozycji listy posiadających klasę CSS ‚our_li_items’, a kod z wnętrza this.each(function() … zostanie wykonany dla każdej z nich.

A na koniec chciałbym zaprezentować prosty i praktyczny przykład kodu usuwającego tagi HTML z ciągu, zaimplementowany jako rozszerzenie jQuery.

Przykład pochodzi ze strony:

http://www.prodevtips.com/2009/12/05/html-stripping-jquery-plugin/

jQuery.fn.stripHTML = function() { 
  return this.each(function() {
    var me = jQuery(this);
    var html = me.html();

    me.html(html.replace(/<[^>]+>/g, "").replace(/<\/[^>]+>/g, ""));
  });
}

Przykładowe wywołanie:

$(".article_title").decHTML().stripHTML();

Funkcja decHTML() dekoduje ewentualny kod, co opisano tutaj.

A dla dociekliwych dodatkowy artykuł o podstawowych zagadnieniach tworzenia pluginów jQuery:

http://learn.jquery.com/plugins/basic-plugin-creation/

Podsumowanie

Pluginy jQuery są jednym z ważniejszych czynników stanowiących o mocy tego frameworku.

Tworzenie pluginów jQuery jest względnie proste – tworzymy kod realizujący jakieś zadania i „opakowujemy” go do postaci wtyczki, którą łatwo jest później zastosować.

W następnym artykule przeanalizujemy więcej przykładów i napiszemy własny, konkretny plugin jQuery.

Dziękuje za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.