8.4. Escribir extensiones (Fundamentos de jQuery)

A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.

La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).

A continuación se muestra un ejemplo:

Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover

// definición de la extensión
(function($){
    $.fn.hoverClass = function(c) {
        return this.hover(
            function() { $(this).toggleClass(c); }
        );
    };
})(jQuery);

// utilizar la extensión
$('li').hoverClass('hover');

Para más información sobre el desarrollo de extensiones, puede consultar el artículo (en inglés) A Plugin Development Pattern de Mike Alsup. En dicho artículo, se desarrolla una extensión llamada $.fn.hilight, la cual provee soporte para la extensión metadata (en caso de estar presente) y provee un método descentralizado para establecer opciones globales o de instancias de la extensión.

El patrón de desarrollo de extensiones para jQuery explicado por Mike Alsup

//
// crear una clausura
//
(function($) {
  //
  // definición de la extensión
  //
  $.fn.hilight = function(options) {
    debug(this);
    // generación de las opciones principales antes de interactuar
    var opts = $.extend({}, $.fn.hilight.defaults, options);

    // se iteractua y formatea cada elemento
    return this.each(function() {
      $this = $(this);
      // generación de las opciones especificas de cada elemento
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      // actualización de los estilos de cada elemento
      $this.css({
        backgroundColor: o.background,
        color: o.foreground
      });

      var markup = $this.html();

      // se llama a la función de formateo
      markup = $.fn.hilight.format(markup);
      $this.html(markup);
    });
  };

  //
  // función privada para realizar depuración
  //
  function debug($obj) {
    if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };

  //
  // definir y exponer la función de formateo
  //
  $.fn.hilight.format = function(txt) {
    return '<strong>' + txt + '</strong>';
  };

  //
  // opciones predeterminadas
  //
  $.fn.hilight.defaults = {
    foreground: 'red',
    background: 'yellow'
  };

//
// fin de la clausura
//
})(jQuery);