Creare un semplicissimo plug-in Jquery


Il nostro plug-in - che chiameremo wikiIt() - aggiunge un link alla wikipedia italiana al selettore $() passato prendendo il testo dall'elemento html selezionato

lo script è di uso didattico (non c'è nessun controllo sulla reale esistenza dei link).

per prima cosa scriviamo il codice dello script normalmente, ho cercato di commentare tutti i passaggi

// questo script jQuery prende i testi di classe w e ci aggiunge automaticamente un link
 
// variabili
// colori e stile del bottoncino
var colore = '#fff';
var sfondo = '#000';
var stile = 'color:'+colore+';background-color:'+sfondo+
        ';font-size:0.6em;text-decoration:none;padding:1px;border:1px solid blue;';
 
// al caricamento completo della pagina parte la funzione
$(document).ready(function(){
 
    // per ciascuno degli elementi di classe w...
    $('.w').each(function() {
    // prendiamo il corpo del testo per creare il link
    var collegamento = 'http://it.wikipedia.org/wiki/'+$(this).text();
        // aggiungiamo il collegamento con un bottoncino con una W in apice
        // notare l'uso di 'this'
    $(this).append(' <sup><a href="'+collegamento+'" style="'+stile+'">W</a></sup>');
    });
 
});

per procedere a realizzare il plug-in dobbiamo inglobare il nostro script in una funzione jQuery

la scrittura seguente è corretta ma sconsigliata dalla documentazione ufficiale ( vedi http://docs.jquery.com/Plugins/Authoring )

jQuery.fn.wikiIt = function() {
 
  //codice qui
 
};

viene invece consigliata la IIFE (espressione di funzione immediatamente invocata) ( vedi http://benalman.com/news/2010/11/immediately-invoked-function-expression/ ) che ci riporta ad usare il consueto simbolo del dollaro per la chiamata jQuery.


(function( $ ) {
  $.fn.wikiIt = function() {
 
    // qui il codice
 
  };
})( jQuery );


ed ecco quindi la prima versione del nostro plug-in

(function( $ ) {
  $.fn.wikiIt = function() {
 
      // variabili
     var colore = '#fff';
     var sfondo = '#000';
     var stile = 'color:'+colore+';background-color:'+sfondo+
               ';font-size:0.6em;text-decoration:none;padding:1px;border:1px solid blue;';
 
      // corpo
      // notare l'uso di this e non $(this)
      this.each(function() {
              var collegamento = 'http://it.wikipedia.org/wiki/'+$(this).text();
              $(this).append(' <sup><a href="'+collegamento+'" style="'+stile+'">W</a></sup>');
               });
 
    };
})( jQuery );

nella seconda versione consentiamo di passare le variabili del colore di sfondo e di testo del bottone, impostiamo inoltre l'oggetto riportato dalla funzione con il return questo consentirà di mantenere la concatenabilità delle funzioni

(function( $ ) {
  $.fn.wikiIt = function(colore,sfondo) {
 
      // variabili
     var stile = 'color:'+colore+';background-color:'+sfondo+
               ';font-size:0.6em;text-decoration:none;padding:1px;border:1px solid blue;';
 
      // corpo
      // la funzione ritorna i suoi valori
      return this.each(function() {
              var collegamento = 'http://it.wikipedia.org/wiki/'+$(this).text();
              $(this).append(' <sup><a href="'+collegamento+'" style="'+stile+'">W</a></sup>');
               });
 
    };
})( jQuery );



a questo punto il plug-in sarà applicabile (dopo essere stato incluso ad esempio come un file esterno javascript) come una normale funzione jQuery




// alla partenza della pagina
$(document).ready(function(){
               // aggiungiamo i link a tutti gli elementi di classe w
               // e a tutti gli elementi u (underline)
               // colore bianco e sfondo nero
               // in più cambiamo il font in grassetto
        $('.w,u').wikiIt('#fff','#000').css('font-weight','bold');
        });




approfondimenti


funzioni in javascript
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope