Share
Vamos con un enfoque práctico hoy. Vamos a escribir un pequeño fragmento de código en jQuery y luego transferirlo a varias bibliotecas diferentes. Fuera de ese fragmento, veremos cómo implementar alguna funcionalidad básica y necesaria en cada una de estas bibliotecas. ¿Suena divertido? Vamos a bucear en!
Los marcos de JavaScript son una gran ayuda cuando tiene muchas ideas para convertir en código limpio y funcional. Y con el aumento meteórico de las aplicaciones web que utilizan la tecnología AJAX, se necesitan marcos como jQuery para reducir el tiempo que dedica a implementar la funcionalidad requerida. Y mirando a su alrededor, ve jQuery this y jQuery that con poca o ninguna mención de otros marcos. El hecho es que hay muchos otros marcos que son tan elegantes como jQuery. Hoy vamos a echar un vistazo a dos marcos que prometen facilitar la escritura de código. Tenga en cuenta que uso la biblioteca de palabras, el marco y el kit de herramientas de forma intercambiable. No voy a entrar en semántica y tú tampoco deberías. Cada una de estas bibliotecas intenta lograr cosas diferentes. Solo vamos a ver las partes donde se superponen las funcionalidades previstas..
Fuera de las aplicaciones esotéricas y / o dedicadas, el código JavaScript de la mayoría de las personas se puede dividir en partes que se ocupan de la siguiente funcionalidad:
Un desarrollador de JavaScript se encuentra con este problema, tarde o temprano: su código original no se ejecutará. Él ha depurado el código una y otra vez, pero sin éxito. El problema es que el código se coloca en la parte superior de la página. Cuando se ejecuta el script, los elementos a los que se refiere en su código ni siquiera existen en el DOM que lleva a estos errores.
Recuerde, las llamadas de script son sincrónicas. Esto significa que cuando un navegador ve una etiqueta de secuencia de comandos, deja de cargar todo lo demás hasta que se cargan las secuencias de comandos. Esto está en marcado contraste con su mecanismo de carga general donde otros objetos se cargan a menudo de forma asíncrona.
Siempre se puede evitar esto simplemente colocando el código en la parte inferior de la página, pero nunca se sabe. Con esto en mente, la mayoría de las bibliotecas proporcionan una función lista para DOM para asegurarse de que el código solo se ejecute después de que el DOM esté listo para bloquear n 'load pero antes de que las imágenes se carguen completamente.
Con JavaScript en bruto, estarías mirando algo como esto.
window.onload = someFunction;
Obviamente quieres acceder a elementos específicos y manipularlos de alguna manera. Desafortunadamente, IE es bastante delicado y puede romper tu código. Para permitir que los desarrolladores escriban mejor código, cada biblioteca proporciona un método de navegador cruzado que le permite acceder a un elemento específico. La mayoría de las bibliotecas utilizan selectores de estilo CSS para concentrarse en sus elementos de destino para acortar la curva de aprendizaje y, lo que es más importante, un código de aspecto más limpio.
Sin un marco, tendrías que hacer esto:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('input'); Por supuesto, una vez que hayas obtenido el elemento, querrías realizar alguna operación. Esto incluye agregar o eliminar una clase, alternar su visibilidad, cambiar sus dimensiones, editar sus contenidos, etc. Como siempre, escribir todo esto en JavaScript en bruto puede ser doloroso. Cada una de estas bibliotecas proporciona funciones de envoltorio para realizar todo el trabajo mencionado anteriormente y mucho más.
Con JavaScript en bruto, su código se vería así:
document.getElementById ("title"). innerHTML = "Title"; A menudo, usted querría cambiar directamente los nodos en el DOM. Es posible que desee crear un nuevo objeto envoltorio en el que desea colocar su estado reciente de Twitter o puede que desee eliminar un elemento div para una aplicación de correo electrónico que está escribiendo. En cada uno de estos casos, querría manipular el DOM de manera eficiente y todas estas bibliotecas proporcionan métodos para hacerlo de manera limpia.
Anexar un elemento tomaría tanto código con JS en bruto.
var myElement = document.createElement ("Algún texto"); document.all.myBody.appendChild (myElement); Los eventos son los componentes básicos de cualquier aplicación y una de las partes más pesadas de las secuencias de comandos en varios navegadores. La cosa es que W3C define una forma e IE hace su propia cosa. Para superar esto, todas estas bibliotecas proporcionan formas de adjuntar o desasociar controladores incluso a eventos específicos del elemento.
Conectando eventos en JavaScript en bruto.
element.addEventListener ('clic', doSomething, false) JavaScript nativo que usa el objeto XHR es tedioso para escribir y depurar. Para que los desarrolladores puedan escribir código con mayor facilidad, cada uno de estos marcos de trabajo resume los tediosos detalles de la implementación de una solicitud AJAX detrás de una llamada a función simple con métodos para llamar cuando la solicitud es exitosa o falla.
Ni siquiera voy a intentar publicar algún código para realizar una solicitud AJAX con JS en bruto. En su lugar, deberías mirar el excelente screencast de Jeffrey. En breve, veremos cómo un marco reduce drásticamente tu código.
Nada realmente lujoso; Vamos a construir una demostración simple. El marcado se ve así:
Net Tuts Esta es una muestra aleatorio texto. Haga clic en la palabra aleatorio para modificar el DOM creando un nuevo elemento y agregándolo al contenido actual.
Tenemos algún texto dentro de un elemento p. Tenemos la palabra aleatorio Envuelto en un elemento span con un ID de maintrigger. Cada vez que se hace clic en un elemento, el elemento con un ID de maintrigger, se debe agregar un nuevo elemento div al elemento de párrafo que contiene el texto "pulsado". Esta sencilla demostración toca todos los requisitos básicos de funcionalidad, incluido el acceso a elementos, la conexión de eventos y la adición de elementos, excepto el de la abstracción AJAX, y nos permitirá conocer cada biblioteca..
Antes de ver las otras bibliotecas, es mejor que veamos cómo jQuery nos permite hacer cada una de ellas..
Ah, todos los que impregnan jQuery. Ha sido la comidilla de la ciudad entre los desarrolladores web durante un tiempo, lo sé y con razón. jQuery no trata de hacer demasiadas cosas. No va a encontrar una docena de widgets con la compilación base o las formas de admitir clases u objetos basados en clases. jQuery se enfoca principalmente en el DOM y creo que han hecho un excelente trabajo.
Si su trabajo está relacionado principalmente con DOM, jQuery es el camino a seguir. La sintaxis es una de las más fáciles y muchas veces se siente como leer un pseudocódigo que un código de trabajo real. La comunidad es grande y amigable y hay una gran cantidad de complementos que puedes incluir para agregar funcionalidad. Además, existe la biblioteca de UI si desea agregar algunos widgets comunes a su sitio.
La base de usuarios de jQuery incluye:
Extremadamente impresionante si me preguntas..
Ahora, veremos cómo jQuery nos permite reducir el tiempo que gastamos en la codificación antes de ver los otros marcos..
$ (documento) .ready (función () // Tus cosas aquí);
Al escribir su código jQuery es imperativo que coloque su código dentro de esta sección. Aquí pedimos que el código se ejecute cuando el DOM esté listo para ser manipulado. Puede pasar un nombre de funciones o simplemente escribir todo su código dentro de una función anónima como en el ejemplo anterior.
contenedor var = $ ("# main"); var posts = $ (". post"); encabezados var = $ ("h1"); Tan simple como se pone. Primero creamos una variable para mantener una referencia al nodo DOM ya que no queremos buscarla una y otra vez. $ es un alias de la jQuery espacio de nombres. Solo pasamos el id, la clase o la etiqueta del elemento tal como lo harías si estuvieras escribiendo una declaración CSS. Pasar en los selectores de CSS funciona de la manera que usted esperaría. Ejemplos como el siguiente trabajo también.
$ ("span: has (a)"). doSomething (); $ ("ul li: nth-child (3)"). doSomething (); $ ("p: oculto"). doSomething (); $ ("div"). attr ("class", "clicked"); $ ("div"). html ("Hola"); $ (" span "). addClass (" current "); Cambiar los atributos de un elemento, su contenido o las clases que tiene son bastante triviales. Simplemente accedemos al elemento requerido y llamamos a la función necesaria. los attr método nos permite cambiar un atributo específico de un elemento, el html método nos permite especificar el contenido HTML y addClass el método no necesita explicación.
$ ("# post"). después de ("Comentarios"); $ (" p "). wrap (""); $ (". comment "). append ("publicado por"); Agregar elementos después del elemento especificado, agregar contenido dentro de un elemento o envolver el elemento pasado con otro es igual de fácil. Obtenemos el elemento y luego llamamos a la función que mejor se adapte a nuestras necesidades..
// Uso de las funciones anónimas $ ("# submit"). Bind ("click", function (e) // Su código aquí); // Pasando un nombre de funciones $ ("# submit"). Bind ("click", evHandler); Conectar eventos es igualmente fácil. Obtenemos el elemento y luego llamamos a la función de enlace. El primer argumento es el tipo de evento y el segundo es el código que se ejecuta cuando se activa el evento. Puede pasar el nombre de la función o simplemente crear una función anónima y colocar todo su código dentro de esa función..
$ .ajax (type: "GET", url: "test.html", success: function (xhr) // Algún código aquí, error: function (xhr) // Algún código aquí $ .ajax ( type: "POST", url: "test.php", success: function (xhr) // Some code here, error: function (xhr) // Some code here);
Solo necesitas 3 líneas para hacer una llamada AJAX barebones. Especifique el tipo de solicitud, la URL y listo. Las funciones de éxito y error se pueden definir para especificar qué sucede si se producen sus nombres..
Para lograr la funcionalidad deseada mencionada anteriormente, su código jQuery se verá así:
$ ("# maintrigger"). haga clic en (función () $ ("p"). después de ("Hecho clic");); 3 líneas es todo lo que se necesita. Seleccionamos los elementos necesarios, llamamos a la función de clic, creamos una función anónima y añadimos un elemento div. Suena mucho más complicado de lo que realmente es.
Ahora que hemos visto el código jQuery, podemos explorar las otras bibliotecas.
Prototype es el gran padre de los frameworks de JavaScript. Proporciona todas las sutilezas que esperaría de un marco maduro y luego agrega un poco más. También proporciona una serie de funciones de biblioteca para ayudarlo a escribir código bien orientado a objetos, resumido..
La base de usuarios de prototipo incluye:
Muchos nombres de nivel superior bien conocidos allí. Como dije, Prototype solía ser el marco de referencia durante mucho tiempo antes de que entrara jQuery..
Ahora que las presentaciones están listas, veamos cómo Prototype puede ayudarte a escribir mejor JavaScript..
document.observe ("dom: loaded", function () // Su código aquí); La anterior es la versión de Prototype de DOM lista. Parece raro al principio si vienes de jQuery pero es igual de simple. los observar La función escucha el evento pasado durante la vida útil del documento. Solo pasamos el evento necesario y envolvemos todo nuestro código dentro de una función anónima al igual que con jQuery.
// Acceder a un elemento con un id de post $ ('post'); // Usar el motor selector de CSS $$ ('. Comment'); $ proporciona un alias para el document.getElementById método. Te permite encontrar elementos con el valor de ID pasado.
$$ le permite utilizar selectores de CSS en su lugar. Toma como argumentos cualquier cantidad de selectores de CSS y devuelve el elemento específico o una matriz de ellos. Al igual que con el motor de selección de jQuery, puede utilizar todo tipo de selectores de CSS3 nefarios, incluyendo selectores de niños, selectores de atributos e incluso pseudo clases.
$ ('post'). addClassName ('author'); $ ('contenedor'). getWidth (); $ ('post'). hide (); Prototype proporciona varios métodos potentes para trabajar con el elemento devuelto. Recuerda, necesitas acceder a esto a través del objeto $. Lo que significa que primero debe guardar la referencia antes de poder manipular el elemento de la forma que considere más adecuada.
Manipular un elemento es tan simple como obtener una referencia al elemento y llamar a la función necesaria. Puedes hacer muchas cosas desde la configuración de atributos hasta ocultar el elemento..
$ ('post'). wrap ('div', 'id': 'container'); $ ('publicar'). actualizar ('Algun texto al azar
'); $ ('post'). insertar ('div', 'Algun texto al azar
'); El primer método envuelve el elemento pasado con un elemento descrito configurando sus diversas propiedades en el proceso. Las funciones de actualización reemplazan el contenido del elemento pasado por el que queremos. Insertar inserta texto sin formato o fragmentos de código HTML en la parte superior, inferior, antes o después del elemento. En lugar de utilizar métodos separados como adjuntar y después como en jQuery, solo necesitamos especificar la posición y hemos terminado.
// Uso de las funciones anónimas $ (btn) .observe ('clic', función (evento) // Su código aquí); // Pasando el nombre de una función $ (btn) .observe ('click', doSomething); Como mencioné antes, la observar La función te permite conectar eventos a sus controladores de eventos. Primero obtenemos una referencia al elemento y luego llamamos al observar Método que pasa en el nombre del evento y la función como parámetros. Si no desea crear una función separada solo para esto, siempre es libre de crear una función anónima y poner todo su código allí..
new Ajax.Request ("test.html", method: 'get', onSuccess: function (transport) // Some code here, onFailure: function (transport) // Some code here); new Ajax.Request ("test.php", method: 'post', onSuccess: function (transport) // Some code here, onFailure: function (transport) // Some code here); Prototype proporciona amplias funciones de envoltorio para realizar una solicitud AJAX. He mostrado las solicitudes de POST y GET de AJAX de nivel más bajo aquí. Hay un montón de otros métodos especializados para solicitudes AJAX incluyendo un actualizador automático.
Para lograr la funcionalidad deseada mencionada anteriormente, su código se vería así aproximadamente:
$ ("maintrigger"). observe ('clic', función (evento) $ ("texto"). inserte ('Hecho clic'); ); Sigue siendo un 3-liner. Lo que estamos haciendo es similar al código jQuery, la sintaxis es diferente. Usamos el observar Función para adjuntar el evento de clic al código que creamos en una función anónima. Simplemente insertamos un texto para indicar que el proceso fue un éxito..
Verá que generalmente estamos haciendo lo mismo que jQuery, solo que con una sintaxis diferente y algunas diferencias. Cuando su trabajo no está centrado en DOM y necesita objetos adecuados para aprovechar sus ideas, Prototype es el marco para elegir.
Mootools no pretende ser un marco fácil de aprender. Afrontémoslo, su página web dice que es un marco de aplicación web para desarrolladores web intermedios y avanzados. No dejes que te engañen. Es un marco extremadamente elegante que le permite crear JavaScript extremadamente elegante. Se enfoca en JavaScript como un todo en lugar de solo el DOM. Con eso en mente, proporciona una serie de funciones para acelerar su flujo de trabajo y también extiende el DOM siempre que sea posible. Y al igual que Prototype, contiene un sistema de creación y herencia de clases que debería hacer que aquellos que vienen de C # o Java se sientan más cómodos con JavaScript..
Las empresas que utilizan MooTools incluyen:
Otro framework con una base de usuarios muy impresionante..
Veamos ahora cómo MooTools hace que tu vida como desarrollador de JavaScript sea más fácil..
window.addEvent ('domready', function () // Su código aquí); Puede parecer complicado pero no te preocupes. Simplemente se ve diferente. Adjuntamos el evento domready de las ventanas a la función anónima. los Añadir evento Nos permite adjuntar eventos a sus manejadores. MooTools define el evento domready que utilizamos aquí. Como de costumbre, envolvemos todo nuestro código en una función anónima y lo colocamos dentro. ¡Ahí! Eso no fue tan difícil, ¿verdad??
// Usa la función $ $ ('someElement'); // Usar los selectores de CSS $$ ("# main"); $$ (". post"); $$ ("h1"); Al igual que con Prototype, puede usar la función $ como alias para la recuperación directa o usar la función $$ para usar selectores de CSS mucho más intuitivos..
Cada uno de estos métodos devuelve un elemento DOM o una matriz dependiendo de lo que use.
$ ('someElement) .hasClass (' clicked '); // Devuelve verdadero si el elemento tiene esa clase $ ("someElement"). SetProperty ('class', 'clicked'); $ ("someElement"). empty (); // Vacía el elemento de todos sus hijos. MooTools proporciona una serie de métodos para manipular un elemento específico, incluido el establecimiento de sus atributos, el cambio de contenido, etc. Si está interesado, debe consultar la documentación de MooTools aquí.
var someElement = new Element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Inyecta el contenido de someElement dentro de someOtherElement $ ("someElement"). Destroy (); // Elimina el elemento y todos sus hijos del DOM $ ('someElement'). Clone (). // Hace una copia del elemento Al igual que la mayoría de las bibliotecas, MooTools proporciona una gran cantidad de funciones que nos permiten modificar el DOM. Se incluye todo, desde agregar contenido hasta eliminar completamente un nodo del DOM.
// Uso de las funciones anónimas $ ('myElement'). AddEvent ('click', function () // Some code); // Pasando el nombre de las funciones $ ('myElement'). AddEvent ('click', doSomething); Como señalé anteriormente, usamos el Añadir evento Método para adjuntar el evento a su manejador. Pasamos el nombre del evento a la función y, como de costumbre, podemos elegir entre crear una función independiente o anónima para poner nuestro código en.
// Una solicitud GET var myRequest = new Request (method: 'get', url: 'test.html'); myRequest.send (); // Una solicitud POST var myRequest = nueva solicitud (url: 'test.html'); myRequest.send (someData);
Configurar una solicitud AJAX es igualmente fácil. MooTools proporciona un robusto Solicitud clase que permite usar make POST o GET AJAX peticiones. El método predeterminado es POST, por lo que no es necesario especificar si está realizando una solicitud.
Al igual que otros marcos, la clase de solicitud admite devoluciones de llamada para el éxito, error y finalización.
Para lograr la funcionalidad deseada mencionada anteriormente, su código se vería así aproximadamente:
$$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = new Element ('div'); someElement.appendText ("Clicked!"). inyectar (elem, "después de");); Un poco más detallado que las otras 2 implementaciones, pero aquí creamos un nodo div desde cero y luego lo agregamos. También almacenamos una referencia al propio elemento de párrafo. Después de eso, simplemente agregamos el texto necesario al elemento recién creado y luego lo agregamos al DOM.
¿Más verboso? Sí. ¿Más difícil? Definitivamente no. Es solo un estilo diferente de codificación..
$ ("# maintrigger"). haga clic en (función () $ ("p"). después de ("Hecho clic");); $ ("maintrigger"). observe ('clic', función (evento) $ ("texto"). inserte ('Hecho clic'); ); $$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = new Element ('div'); someElement.appendText ("Clicked!"). inyectar (elem, "después de");); Todos estos fragmentos de código esencialmente hacen lo mismo. Solo en diferentes estilos y con diferentes cantidades de control.
Este artículo no tenía la intención de comparar estos marcos. En su lugar, quería llamar la atención del lector sobre las otras soluciones viables disponibles fuera de jQuery. No es que jQuery sea mala. Me encanta jQuery, es un marco maravilloso, pero se enfoca principalmente en el DOM y el DOM solo. Si está buscando escribir una aplicación web o un renderizador o alguna otra cosa interesante, crear un código limpio y extensible es una prioridad. Es para este tipo de escenarios cuando tiene más sentido recurrir a otro marco..
Pude elegir solo dos marcos en este artículo debido a limitaciones de espacio. Hay una serie de otros marcos, igual de potentes, incluyendo Dojo, YUI, Rico y GWT que también merecen su atención.
Esperemos que haya despertado su interés en marcos de JavaScript alternativos hoy y realmente espero que experimente con otros marcos. Háganos saber cómo va la experimentación en los comentarios. Feliz codificacion!
