El Prototype JavaScript Framework es un marco de JavaScript creado por Sam Stephenson en febrero de 2005 como parte del soporte de Ajax en Ruby on Rails . Se implementa como un único archivo de código JavaScript, normalmente denominado . Prototype se distribuye de forma independiente, pero también como parte de proyectos más grandes, como Ruby on Rails, script.aculo.us y Rico. En marzo de 2021 , según w3techs, el 0,6% de todos los sitios web utilizan Prototype. [1]prototype.js[actualizar]
Prototype proporciona varias funciones para desarrollar aplicaciones JavaScript. Las características van desde atajos de programación hasta funciones principales para manejar XMLHttpRequest .
Prototype también proporciona funciones de biblioteca para admitir clases y objetos basados en clases. [2] En JavaScript, la creación de objetos se basa en prototipos : una función de creación de objetos puede tener una prototypepropiedad, y cualquier objeto asignado a esa propiedad se utilizará como prototipo para los objetos creados con esa función. El marco Prototype no debe confundirse con esta característica del lenguaje.
La función dólar , $(), se puede utilizar como abreviatura de la función getElementById . Para hacer referencia a un elemento en el Modelo de objetos de documento (DOM) de una página HTML , la función habitual que identifica un elemento es:
documento . getElementById ( "id_of_element" ). estilo . color = "#ffffff" ; La función $() reduce el código a:
$ ( "id_of_element" ). setStyle ({ color : '#ffffff' }); La función $() también puede recibir un elemento como parámetro y devolverá, como en el ejemplo anterior, un prototipo de objeto extendido.
var domElement = documento . getElementById ( "id_of_element" ); // Referencia de objeto habitual devuelta var prototipoEnhancedDomElement = $ ( domElement ); // Prototipo de referencia de objeto extendido _), el $carácter es un "carácter de palabra" legal en los identificadores de JavaScript y no tiene ningún otro significado en el idioma. Se agregó al lenguaje al mismo tiempo que admitía expresiones regulares , de modo que se pudieran emular variables coincidentes similares a Perl , como $`y $'.Basado en la $()función: la $F()función devuelve el valor del elemento de formulario solicitado. Para una entrada de 'texto', la función devolverá los datos contenidos en el elemento. Para un elemento de entrada 'seleccionado', la función devolverá el valor seleccionado actualmente.
$F ( "id_of_input_element" )La función dólar dólar es el motor selector CSS de Prototype . Devuelve todos los elementos coincidentes, siguiendo las mismas reglas que un selector en una hoja de estilo CSS. Por ejemplo, si desea obtener todos <a>los elementos con la clase "pulsar", utilizaría lo siguiente:
$$ ( "a.pulsar" )Esto devuelve una colección de elementos. Si está utilizando la extensión script.aculo.us de la biblioteca principal de Prototype, puede aplicar el efecto "pulsar" (parpadeo) de la siguiente manera:
$$ ( "a.pulsar" ). cada uno ( Efecto . Pulsar );En un esfuerzo por reducir la cantidad de código necesario para ejecutar una función entre navegadores XMLHttpRequest, Prototype proporciona el Ajaxobjeto para abstraer los diferentes navegadores. Tiene dos métodos principales: Ajax.Request()y Ajax.Updater(). Hay dos formas del Ajaxobjeto. Ajax.Requestdevuelve la salida XML sin formato de una llamada AJAX, mientras que Ajax.Updaterinyectará el retorno dentro de un objeto DOM específico. Lo Ajax.Requestsiguiente encuentra los valores actuales de dos elementos de entrada del formulario HTML, emite una solicitud HTTP POST al servidor con esos pares de nombre/valor de elemento y ejecuta una función personalizada (llamada showResponsea continuación) cuando se recibe la respuesta HTTP del servidor:
nuevo Ajax . Solicitud ( "http://localhost/server_script" , { parámetros : { valor1 : $F ( "form_element_id_1" ), valor2 : $F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError }); Prototype también agrega soporte para programación orientada a objetos más tradicional. El Class.create()método se utiliza para crear una nueva clase. Luego se asigna una clase prototypeque actúa como modelo para las instancias de la clase.
var PrimeraClase = Clase . crear ( { // El método de inicialización sirve como constructor inicializar : función () { this . data = "Hola mundo" ; } }); Ampliando otra clase:
Áyax . Solicitud = Clase . crear ( Ajax . Base , { // Anular el método de inicialización inicializar : función ( url , opciones ) { this . transport = Ajax . getTransport (); this . setOptions ( opciones ); this . request ( url ); }, // ...más métodos añaden... }); La función framework Object.extend(dest, src)toma dos objetos como parámetros y copia las propiedades del segundo objeto al primero simulando herencia. El objeto combinado también se devuelve como resultado de la función. Como en el ejemplo anterior, el primer parámetro normalmente crea el objeto base, mientras que el segundo es un objeto anónimo que se utiliza únicamente para definir propiedades adicionales. Toda la declaración de subclase ocurre dentro de los paréntesis de la llamada a la función.
A diferencia de otras bibliotecas de JavaScript como jQuery , Prototype extiende el DOM. Hay planes para cambiar esto en la próxima versión principal de la biblioteca. [3]
En abril de 2010, el blogger Juriy 'kangax' Zaytsev (de Prototype Core) describió detalladamente los problemas que pueden surgir cuando un mono parchea nuevos métodos y propiedades en los objetos definidos por el DOM del W3C. [3] Estas ideas hacen eco de pensamientos publicados en marzo de 2010 por Yahoo! desarrollador Nicholas C. Zakas [4] Se han resumido de la siguiente manera [5]
En 2008, ya se estaban documentando problemas específicos con el uso de métodos de extensión DOM en versiones anteriores de Prototype, combinadas con versiones más nuevas de los navegadores actuales. [6] En lugar de agregar nuevos métodos y propiedades a objetos DOM 'host' preexistentes como Element, like element.hide(), la solución a estos problemas es proporcionar objetos envolventes alrededor de estos objetos host e implementar los nuevos métodos en ellos. jQueryes un objeto contenedor en la biblioteca de ese nombre. [3]
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}