JQuery y Mootools en Joomla

Mootools es el framework por defecto de Joomla. Pero no todos los desarrolladores conocemos bien este framework, y tal vez nos sentimos más comodos con otro; por ejemplo JQuery.

Si vamos a hacer pequeñas cosas, conviene invertir un poco de tiempo en aprender lo básico de Mootools para no tener que incluir dos librerias.

Si aun así, vamos a realizar un componente avanzado, con uso intensivo de JavaScript, y creemos que merece la pena añadir Jquery a Joomla, no está todo perdido.

El mayor problema que nos vamos a encontrar al tener los dos Frameworks, en nuestra web, es el uso del símbolo $. Ambos frameworks, utilizan este símbolo, como una forma abreviada de acceder a funciones de la libreria.

En el caso de JQuery, el simbolo $ representa al propio JQuery. Sin embargo, sus creadores han pensado en que podían darse situaciones así, y han habilitado esta función para evitarlo:

jQuery.noConflict();

Llamando a esta función, JQuery no utiliza el simbolo del dolar como su alias. Asi que si además tenemos Mootools en nuestro Joomla, podríamos actuar de la siguiente manera:

jQuery.noConflict();
// Realizamos acciones sobre el DOM con JQuery
jQuery("#prueba").hide();
// Realizamos acciones sobre el DOM con Mootools 
$("prueba").setStyle('display','none');

También podemos utilizar la funcion ‘noConflict’, para elegir un nuevo alias para JQuery. Como vemos en el ejemplo, vamos a cambiar el ‘$’ por la ‘j’.

var j = jQuery.noConflict();
// Realizamos acciones sobre el DOM con JQuery
j("#prueba").hide();
// Realizamos acciones sobre el DOM con Mootools 
$("prueba").setStyle('display','none');

También hay que tener en cuenta, si vamos a utilizar algún plugin, que esté encapsulado en un ‘cierre’ de JavaScript. Es la manera recomendada por los creadores de JQuery, asi que casi todos los plugins están realizados así, pero hay que tenerlo presente.

Si incluimos nuestro código en un ‘clousure’, al que pasamos el framework como parámetro, podemos usar el alias ‘$’ como de costumbre. Sería algo así:

jQuery.noConflict();
(function($) { 
  //ya podemso usar el alias '$' para referirnos a jQuery, aun teniendo Mootools
})(jQuery);

Hemos visto como podemos tener las dos librerias simultaneamente en nuestro Joomla. Sin embargo insisto, en evitar situaciones así, a no ser que nos resulte inevitable. Cada uno de los FrameWorks, pesa unos 100kb (sin Gzip), que estaríamos enviando al cliente.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

2 respuestas a JQuery y Mootools en Joomla

  1. blas bekc dijo:

    Creo que la gente deberia pasar mas tiempo aprendiendo a usar mootools ya que este es un Framework y no una libreria como jQuery. La cuestion no es que la gente se siente mas comoda usando jQuery es que simplemente hay mas recursos y los “programadores” no quieren escribir sus propios scripts (o no pueden). En cuestiones de marketing jQuery trabajo muy bien y es por eso que miles de personas incluyen jQuery en sus paginas para cosas tan simples como usar selectores, en vez de usar por ejemplo var $ = function(neededID){ return document.getElementById(neededID); } cargan la libreria completa de jQuery.

    con mootools uno siente que programa en JavaScript. Con jQuery … uno manipula DOM con jQuery. si solamente se quiere manipular DOM, jQuery, si se quiere hacer aplicaciones… Mootools. que piensas?

    • todojoomla dijo:

      La verdad no soy un experto en Mootools, aunque cada dia me gusta más.
      Las dos ventajas claras que tiene JQuery, es que hay gran cantidad de Plugins ya hechos (lo que ahorra mucho tiempo) y su curva de aprendizaje es mas rápida. Y para la mayoria de webs que hay en internet esto es suficiente. Y más si es una web pequeña y te exigen precio ;)
      Desde luego, por lo poco que he visto, si tuviese que realizar una aplicación, como bien dices, eligiria Mootools.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s