JavaScript sin dolor usando Prototype (2da parte) - Painless JavaScript Using Prototype

Artículo de Balú - 09 de Agosto de 2006

Temas Relacionados: JavaScript

2. Painless JavaScript Using Prototype

« Anterior | Inicio | Siguiente »

Prototype es una librería JavaScript Orientada a Objetos (escrita por Sam Stephenson y amigos) que hace a JavaScript divertido. Esto lo dice su sitio de todas las formas. Aquellos que estén familiarizados con el último y mayor marco de aplicaciones Open Source, Rails, pueden reconocer a Prototype como la espina dorsal del asistente JavaScript de Rails. Sin embargo, Prototype se puede utilizar independientemente de Rails para ayudar a la codificación de muchas aplicaciones de la Web 2.0.

Personalmente, yo tengo un juicio aparte en el conjunto de cosas divertidas del JavaScript, pero Protoype es una librería realmente buena que, aunque la situación ha estado mejorando últimamente, ha tenido escasa documentación. Este artículo proporciona un viaje relámpago pero completo de la librería. A lo que apuntamos con esto, es proporcionar ejemplos y recursos para poder empezar a incluir a Prototype en sus proyectos DOM Scripting.

Primero, examinaremos los componentes básicos de Prototype: Las funciones $, Las adiciones a los Strings, Números, Arrays y Funciones de objetos. En otro artículo veremos sus bondades en el manejo de formularios y las funciones de DOM, seguiremos observando a los ayudantes de Ajax. Y finalmente, terminaremos con una breve discusión de otros proyectos interesantes que están basados en Prototype.

Me gustaría notar que la versión estable de Prototype al momento de escribir este artículo es la 1.4.0. Tengo el presentimiento, que la librería se actualizará muy rápidamente, en respuesta al ciclo de desarrollo veloz de Rails, entonces las cosas cambiarán. Finalmente, lo que malogra la nota es que en estos momentos, es que Prototype sólo soporta a los navegadores más recientes. Puede visitar el sitio de Prototype, para más información sobre el soporte de navegadores.

Primeros Pasos

La anterior versión de Prototype puede ser descargada del sitio oficial de prototype. Simplemente descargue prototype.js y enlácelo en sus páginas con la etiqueta <script>.

Si esta utilizando Rails, no necesita descargar Prototype: La librería viene incluido en la distribución. Usted puede incluirlo en sus páginas poniendo dentro de las etiquetas <head>:

<%= javascript_include_tag 'prototype' %>

Ahora, vamos al fondo del tema!

Pequeñas ayudas de Prototype

Una de las cosas realmente agradables sobre la utilización de Prototype son las sencillas funciones de ayuda que proporciona para las tareas comunes de scripting. Las funciones $ ya han conseguido algo de atención. Denle uno o vario elementos ID y le devolverán referencias a ellos:

// reference to the element with the ID 'nav'
$("nav")
// an array of element references
$("img1", "img2", "img3")

Es como una superposición de document.getElementById y es asombroso cuanto conviene esta codificación cuando usted la utiliza.

Otra función increíblemente útil es document.getElementsByClassName, que hace lo que dice la lata: Toma un nombre de clase CSS y devuelve una lista de todos los elementos con dicha clase:

// todos los elementos con la clase 'navlink'
document.getElementsByClassName("navlink")
// todos los elementos con la clase navlink y detrás el elemento con ID 'nav'
document.getElementByClassName("navlink", $("nav"))

Por cierto, cuando este artículo fue escrito, la versión 1.5.0_rc0 de Prototye ganó la poderosa función $$, que permite seleccionar elementos usando una sintaxis estándar del selector CSS:

// un array de todos los elementos input detras de 'commentform'
$$("#commentform input")
// un array de todos los links con la clase 'external'
$$("a.external")

Por favor, tenga presente que, a la hora de escribir, a menos que usted descargue la versión más reciente de Prototype, esta función no estará disponible para usted.

$F toma un ID y devuelve el valor de cualquier campo de formulario, por ejemplo, un menú select como este:

<select name="country" id="country">
<option selected="selected" value="UK">United Kingdom</option>
<option value="FR">France</option>
...
</select>

$F('country') // 'UK'

Haciendo que JavaScript aspire menos

Oops, he robado la etiqueta de otra librería JavaScript. Los desarrolladores de la librería JavaScript no pueden dejar de intentar que JavaScript se parezca a otra lengua. Los individuos de Mochikit quisieran que JavaScript fuera como Python, incontables programadores han intentado hacer a JavaScript como Java y ahora, los intentos de Prototype para hacerlo a gusto de Ruby. Por tanto, Prototype extiende la base de JavaScript, que puede (si usted elige utilizarlo) tener un efecto dramático en su acercamiento a la codificación JavaScript. Dependiendo de su experiencia y de la manera en que proyecta sus trabajos, la librería puede, o no, ser de su ayuda.

OO la manera Ruby(ista): Class.create y Object.extend

El método Class.create permite definir clases de un modo muy parecido a Ruby, aunque sea puramente estético es esencial para inicializar el método que define el constructor.

var DOMTable = Class.create();
DOMTable.prototype = {
initialize : function(el) {
this.el = el;
},
...
}

Sin embargo, mucho más potente es el método simple pero eficaz de Object.extend. Todo lo que lo hace es copiar las propiedades y métodos de un objeto a otro objeto, pero sus aplicaciones son muchas. Aquí un test rápido:

// make a (shallow) copy of obj1
var obj2 = Object.extend({}, obj1);

var options = {
method : "post",
args :

}; merges in the given options object to the default options object opciones implícitas Object.extend(options, { args : "data=454", onComplete : function() { alert("done!"); } }); options.method "post" options.args "ata=454" options.onComplete function() { alert("done!"); } Esto es lo más es usado para "mezclar" métodos de un objeto con otro. Por ejemplo, usted podría crear un juego de funciones que hacen seguros los elementos de DOM Sortable: var Sortable = { sortBy : function(func) { ... }, sortByReversed : function(func) { ... }, reset : function() { ... } }; Luego, si queremos hacer nuestro DOMTable desde Sortable, podríamos mezclar en estos métodos al objeto de DOMTable: var myTable = new DOMTable("table-id"); Object.extend(myTable, Sortable); Ahora podemos llamar estos elementos en una tabla. sort the table using the given function myTable.sortBy(function (itemA, itemB) { ... }); Función Binding Prototype también añade a la función objeto dos métodos realmente útiles: bind y bindAsEventListener. Estos son usados muchas veces para atar una función a un objeto particular de modo que la palabra clave apunte a ese objeto. Esto es increíblemente útil cuando usted está fijando funciones. Imagínese que usted intenta algo como esto: var myObject = new Object(); myObject.message = "Hello!"; myObject.eventHandler = function() { alert(this.message); } $("mydiv").onmouseover = myObject.eventHandler; Tradicionalmente, usted conseguiría un error, porque, cuando el evento llama a la función handler, esta se refiere al elemento mydiv, no a myObject, entonces this.message es indefinido. Usted puede solucionar este problema con: $("mydiv").onmouseover = myObject.eventHandler.bind(myObject); Ahora todo trabaja muy bien, porque la palabra clave está limitada a myObject. Siguiendo esto, el bindAsEventListener hace lo mismo, aunque pasa el objeto del evento a través de su función de una manera compatible de cross-browser, así que usted no tiene ninguna necesidad de preocuparse del window.event en IE. Trate esto: myObject.eventHandler = function(event) { alert(event.srcElement.nodeName); } $("mydiv").onmouseover = myObject.eventHandler.bindAsEventListener(myObject); Ahora nuestra función de eventHandler tiene el acceso al objeto del evento. Mayores detalles de estos dos métodos están disponibles en <A href="http://www.brockman.se/writing/method-references.html.utf8∞" target=_blank>el sitio de su creador</A>. Nuevos Métodos de String y Números Prototype ha añadido un enorme número de métodos útiles al construir objetos String. Aquí tiene una mirada rápida de lo mejor. "backgroundColor" "background-color".camelize() camelize devuelve strings que uno puede trabajar con propiedades CSS. "I am a piece of HTML" "I am a piece of HTML".striptTags()  {a : 10, b: "thing"} "a=10&b=thing".toQueryParams() También Prototype añade un gran método para Numerar. ¡Diga adiós a los loops!. alerts "1", "2", "3" ... "50" 50.times(function(n) { alert(n); }}; Aquí, el método de “times” toma una función que llamará a un número dado de veces y pasa en la corriente interacción de los números como un argumento. Este empleo de una función de interacción es común usando Enumerable, del cual hablamos a continuación. Interacción a la manera de Ruby: Enumerable y Hash Unas de las gemas ocultas de Prototype es Enumerable y el objeto Hash, que han sido usurpados directamente de ruby. Si usted no esta familiarizado con ruby, no se preocupe. Lo explicaré todo aquí. Comenzaremos con Enumerable. En breve cuando sumamos Enumerable a un objeto que usa Object.extend, le da al objeto en cuestión, muchas funciones realmente útiles para trabajar con sus propiedades. Enumerable ha sido agregado Prototype Arrays, entonces cualquier array tiene estos métodos nuevos. Aquí están unos ejemplos de lo que usted puede hacer con los nuevos arrays "enumerados": alerts "a is at 0" then "b is at 1" then "c is at 2" ["a", "b", "c"].each(function(item, index) { alert(item + " is at " + index); }); [80,50] [1, 80, 3, 50].select(function(item) { return (item > 20); }); Select crea un nuevo Array que contiene sólo los elementos que hacen que la función devuelva true. ["A", "B", "C"] ["a", "b", "c"].invoke("toUpperCase"); Invoque llamadas al especificar el método de cada elemento del Array y devuelve el arrray resultante. ["cat", "rat"] ["cat", "dog", "rat", "mouse",].grep(/at/); Grep devuelve todos los elementos que emparejan la expresión regular dada. Enumerables ofrece un inmenso número de funciones increíblemente poderosas que pueden hacer el desarrollo, del tedioso DOM scripting, en una tris. Por ello, sugiero que usted de una buena mirada a los métodos de Enumerable en los <A href="http://www.sergiopereira.com/articles/prototype.js.html#Reference.Enumerable%3Cbr%20/%3E∞" target=_blank>útiles apuntes de desarrollador, de Sergio Pereira</A>. Hay un pequeño problema aquí, aunque en JavaScript, usted puede encontrar por casualidad muchos tipos de objetos que, a efectos prácticos, actúan como arrays, pero no son objetos de arrays. Los objetos como DOM NodeLists y argumentos de función no tendrán a Enumerable disponible automáticamente. Esto es fácil de rectificar, aunque; para agregar las funciones Enumerables a cualquier objeto parecido a un Array debe usar $A: add Enumerable to childNodes var children = $A($("mydiv").childNodes); sets class="highlighted" for all child nodes of "mydiv" children.each(function(child) { child.setAttribute("class", "highlighted"); }); Para crear un Hash, llame a la función mágica $H en cualquier objeto. Esto gira todas las propiedades del objeto en un juego de pares de valor clave con Enumerable. Vamos a tomar Hash para dar una vuelta: create a hash by feeding an object to $H var contact = $H({ name : "Dan Webb", email : "dan@danwebb.net", address : "None of your Business, London", postcode : "a111111" }); ["name", "email", "address", "postcode"] contact.keys()  ["Dan Webb", "dan@danwebb.net","None of your Business, London", "a111111"] contact.values() "name=Dan Webb&email=..." contact.toQueryString() Hash extiende a Enumerable, entonces todos aquellos métodos útiles están también disponibles. alerts "name contains Dan Webb" and so on contact.each(function(item) { alert(item.key + " contains " + item.value); }); ¡Al principio, si usted no es un Rubyista, Enumerable y el Hash pueden parecer un poco tediosos; pero puedo asegurarle, una vez que usted comience a usarlos, usted se preguntará por qué alguna vez se molestó en conseguir un RSI que escriba todos aquellos loops! Cuando usa a uno o varios de ellos juntos, comprenderá el poder masivo de estos nuevos métodos. Usted puede leer sobre Enumerable y el Hash más detalladamente en <A href="http://encytemedia.com/blog/articles/2005/12/07/prototype-meets-ruby-a-look-at-enumerable-array-and-hash%3Cbr%20/%3E∞" target=_blank>Encyte Media</A>. El objeto Event ayuda a proveer, lo que a muchos, es el Santo Grial del JavaScript: Simple, Cross-browser event handling: function eventHandlerFunction(e) { the element that triggered the event var element = Event.element(e);  gets the mouse position var mouseX = Event.pointerX(e), mouseY = Event.pointerY(e); stop default behaviour and event propagation Event.stop(e); }  register eventHandlerFunction to the onclick of myObject Event.observe(myObject, "click", eventHandlerFunction, false); removes the event handler Event.stopObserving(myObject, "click", eventHandlerFunction, false); De un modo bastante agradable, Prototype trata de evitar aquellos escapes de memoria indeseados en IE automáticamente, quitando a cada observador cuando la página se descarga. En mi opinión, la solución en este momento es un sub-desarrollo del manejo del evento, por lo que podría valer la pena pensar en usar algo un poco más rico como <A href="http://dean.edwards.name/my/events.js∞" target=_blank>addEvent del Decano Edwards</A>, por el momento. <DIV id=tags><A id=post-category title=dhtml href="http://www.baluart.net/categoria/dhtml"><FONT∞ color=#333333></A> </DIV>""

« Anterior | Inicio | Siguiente »

Tabla de contenidos

Autor y licencia de 'JavaScript sin dolor usando Prototype (2da parte) - Painless JavaScript Using Prototype'

Balú Extraído de: http://www.baluart.net/articulo/426/javascript-sin-dolor-usando-prototype-2da-parte.php

Esta obra está bajo una licencia de Creative Commons.

This News is licensed under a Creative Commons. (Sólo algunos reservados)

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.

Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.

Wikis relacionados con 'JavaScript sin dolor usando Prototype (2da parte) - Painless JavaScript Using Prototype'

JavaScript: clases predeterminadas

Completo y ameno contenido sobre Javascript

Usando Samba

Si has oído hablar de Samba y deseas ver qué es lo que puede hacer... Más »

Medicamentos sin receta: ¿cuál es el adecuado?

Los botiquines de los estadounidenses contienen una selección cada vez mayor de medicamentos sin receta... Más »

Sin noticias de Gurb, la paradoja corrosiva

Sin noticias de Gurb es una novela escrita en forma de diario de un extraterrestre... Más »

El Control de Gestión en organizaciones sin ánimo de lucro

En entidades sin ánimo de lucro, las decisiones tomadas por los directivos se encaminan a... Más »