Prototype.js es una biblioteca JavaScript creada en 2005 como parte del soporte AJAX de Ruby on Rails. Proporciona funcionalidades como manipulación e inspección del DOM, gestión de eventos, extensiones a JavaScript y AJAX de alto nivel. Una de sus características diferenciadoras es que añade métodos al DOM para facilitar su manipulación. También incluye funcionalidades como iteradores funcionales, soporte para programación orientada a objetos e implementa un estilo de programación similar a Ruby.
2. Historia
● Creado en 2005 por Sam Stephenson como
parte del soporte AJAX de Ruby on Rails
● Proyecto externo a Rails pero muy vinculado a
él
● Muy usada por developers Rails
aitor.name
4. Principales funcionalidades
● Manipulación e inspección del DOM
● Gestión de eventos
● Extensiones a Javascript
● AJAX de alto nivel
aitor.name
5. DOM > Extensión
● Principal característica diferenciadora con otros
frameworks
● Añade métodos (funciones) extra a los nodos
del DOM
● Es automágica en navegadores que soportan
modificar el “prototype” de objetos nativos
| var obj = document.
| getElementById( “id”);
|
| obj.addClassName( “clase”);
aitor.name
6. DOM > Acceso a los elementos
● $(id) → document.getElementById()
| $( “flash”).hide();
● También extiende elementos
| // viejos navegadores (IE6)
| var e = document.
| getElementById( “flash”);
|
| e.hide(); // FAIL
| $( e).hide(); // WIN
aitor.name
7. DOM > Acceso a los elementos
● $$(sel) → document.querySelectorAll()
| // devuelve array de elementos
| var links = $$( “a.ugly”);
|
| for( link in links) {
| link.remove();
| }
aitor.name
10. DOM > Extensiones propias
● Extensión del DOM
| Element.addMethods( {
| bordea: function( element, color) {
| element.setStyle( {
| border: "10px solid " + color
| });
| return element; // para encadenar
| }
| });
|
| $( “id”).bordea( “pink”).show();
aitor.name
11. Eventos
● La gestión de eventos es lo más doloroso en el
soporte de múltiples navegadores
● Resumen: todo el mundo lo hace como manda
la W3C, e IE lo hace de otra forma totalmente
diferente (+ pierde memoria en algunos casos)
● Otros pequeños detalles entre navegadores
aitor.name
12. Eventos > Registro
● Event.observe() es la base de la gestión de
eventos
| function activar( event) {
| var element = event.element();
| element.addClassName( “activa”);
| }
|
| $( “bocina”).observe( “click”,
| activar
| );
aitor.name
13. Eventos > Desregistro
● Event.stopObserving() y sus múltiples
personalidades
| // un evento/handler concreto
| $( “buy”).stopObserving( “click”,
| notifica);
|
| // todos los handlers de un evento
| $( “buy”).stopObserving( “click”);
|
| // todos los eventos/handlers
| $( “buy”).stopObserving();
aitor.name
14. Eventos > Propagación
● Event.stop(): 2x1, previene la propagación
del evento y la realización de la acción por
defecto
| $( “comprar”).observe( “click”,
| function( evt) {
| Event.stop( evt);
| }
| });
● Evitamos los poco estéticos “#” al final de las
URLs (por los <a href=”#” ...>)
aitor.name
15. Javascript > Ruby.clone()
● Prototype nació con RoR, es natural que quiera
hacer Javascript lo más similar a Ruby
● Principales características
● Estilo funcional con los iteradores
● Programación OO
● Mejoras al sistema de funciones
aitor.name
16. Javascript > Iteradores
● Característica fundamental de Prototype
● Hace el lenguaje más “funcional” (tipo Lisp o
Haskell)
● Implementado por un “mixin” llamado
Enumerable
● “mixin”: conjunto de métodos (funciones) que
no se usan solos, si no que se incorporan a
otros objetos
● Usos principales: Array, Hash
aitor.name
20. Javascript > Iteradores
● Hay muchos iteradores que simplifican el
código (una vez aprendidos)
| // all, any, collect, detect, each,
| // eachSlice, entries, every,
| // filter, find, findAll, grep,
| // inGroupsOf, include, inject,
| // inspect, invoke, map, max, min,
| // parition, pluck, reject, select,
| // size, some, sortBy, zip
aitor.name
21. Javascript > OOP
● Javascript es un lenguaje OO basado en
prototipos
● Esto es muy útil, pero el resto del mundo usa
clases
● Prototype ofrece extensiones para implementar
algo que se parece a classes OOP
● Como todo en Prototype, con cierto sabor a
Ruby
aitor.name
24. Javascript > OOP > Mixins
| // base class
| var IceCream = Class.create( {...});
|
| // mixins
| var Cookie = {...},
| Cream = {...};
|
| var häagenDaz = Class.create(
| IceCream,
| Cookie, Cream, {
| }
| );
aitor.name
25. Javascript > function
● En Javascript las funciones son “first-class”:
son objetos en sí mismas
● Como tal tienen propiedades+métodos y se
pueden manejar como otros objetos
aitor.name
26. Javascript > function > bind
● Fija la función a un contexto de forma que al
ser llamada nos aseguramos de que “this” hace
referencia a ese contexto
● Puede parecer un poco complejo al principio
pero es muy útil
aitor.name
27. Javascript > function > bind
| function message() {
| return "Head and " + this;
| }
|
| var human = message.bind( "body");
| human(); // "Head and body"
|
| var mrPotato = message.bind("legs");
| mrPotato(); // "Head and legs"
aitor.name
28. Javascript > function > bind
● Especialmente útil en gestión de eventos
| var AlertOnClick = Class.create( {
| initialize: function( msg) {
| this.msg = msg;
| },
| handleClick: function( event) {
| alert( this.msg);
| }
| });
aitor.name
30. AJAX
● La clase Ajax.Request permite realizar
peticiones AJAX en una forma OO
| new Ajax.Request( "/your/url", {
| onSuccess: function( response) {
| // handle the response content...
| },
| onFailure: function( response) {
| // handle error
| }
| });
aitor.name
31. AJAX
● Hay diferentes tipos de callbacks
| // onCreate, onLoading, onLoaded,
| // onException, onComplete, on{XYZ}
| // ...
● Se puede configurar la petición
| // asynchronous, contentType,
| // method, parameters, postBody,
| // requestHeaders, sanitizeJSON ...
aitor.name
32. UI + FX
● Prototype se centra en las funcionalidades
“core” y no ofrece soporte para temas de
interfaz (widgets/efectos)
● Esta parte está implementada por la librería
Script.aculo.us, la cual hace uso de Prototype
● Script.aculo.us ofrece animaciones, soporte
drag & drop y algo de widgets
● La nueva versión 2.0 se llama Scripty2
(reescrita desde cero: muchas mejoras)
aitor.name
33. Otras funcionalidades
● Utilidades para trabajar con formularios
● Muchas extensiones a los tipos de datos
nativos de Javascript (Array, Hash, Number,
Object, String, RegExp...)
● Creación de nuevos “tipos de datos” como
ObjectRange
aitor.name
34. Futuro
● Extender el DOM parecía una buena idea
● La experiencia a demostrado que fue un error
● Hay muchos problemas con la extensión del
DOM
● Bajo rendimiento en navegadores con un DOM no
fácilmente extendible (IE6)
● El DOM de IE es un desastre
● Bugs en las implementaciones del DOM
● Colisiones con los nombres de métodos/atributos
(→ getElementByClassName)
aitor.name
35. Futuro
● Prototype 2.0 usará la misma técnica que
jQuery: wrappers de objetos
| // prototype
| [ 1, 2, 3].each( function( e) {
| console.log( e);
| });
| // jquery
| $.each( [ 1, 2, 3], function(i,e) {
| console.log( e);
| });
● Incompatibilidad total con Prototype 1 aitor.name