Prototype JavaScript Framework es un framework 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 llamado . 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. A marzo de 2021 , según w3techs, Prototype es utilizado por el 0,6% de todos los sitios web. [1]prototype.js[actualizar]
Prototype ofrece varias funciones para desarrollar aplicaciones JavaScript. Las características van desde atajos de programación hasta funciones importantes para trabajar con 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_del_elemento" ). estilo . color = "#ffffff" ; La función $() reduce el código a:
$ ( "id_del_elemento" ) .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 = document . getElementById ( "id_of_element" ); // Referencia de objeto habitual devuelta var prototipoEnhancedDomElement = $ ( domElement ); // Referencia de objeto extendida del prototipo _), este $carácter es un "carácter de palabra" legal en los identificadores de JavaScript y no tiene ningún otro significado en el lenguaje. Se agregó al lenguaje al mismo tiempo que se agregó soporte para expresiones regulares , de modo que se pudieran emular las variables coincidentes similares a las de Perl , como $`y $'.Basándose 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 de "selección", la función devolverá el valor seleccionado actualmente.
$F ( "id_del_elemento_de_entrada" )La función dólar dólar es el motor de selección 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 "pulsate", debe utilizar lo siguiente:
$$ ( "a.pulsar" )Esto devuelve una colección de elementos. Si está utilizando la extensión script.aculo.us de la biblioteca principal 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 procesar de una llamada AJAX, mientras que Ajax.Updaterinyectará el retorno dentro de un objeto DOM especificado. El Ajax.Requestsiguiente busca los valores actuales de dos elementos de entrada de 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" ) }, en caso de éxito : mostrarRespuesta , en caso de error : mostrarError }); 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 le asigna una clase prototypeque actúa como modelo para las instancias de la clase.
var FirstClass = Class . create ( { // El método initialize sirve como constructor initialize : function () { this . data = "Hola Mundo" ; } }); Extendiendo otra clase:
Ajax . Request = Class . create ( Ajax . Base , { // Anula el método initialize initialize : function ( url , options ) { this . transport = Ajax . getTransport (); this . setOptions ( options ); this . request ( url ); }, // ...se agregan más métodos ... }); La función framework Object.extend(dest, src)toma dos objetos como parámetros y copia las propiedades del segundo objeto al primero simulando la herencia. El objeto combinado también se devuelve como resultado de la función. Como en el ejemplo anterior, el primer parámetro generalmente crea el objeto base, mientras que el segundo es un objeto anónimo que se utiliza únicamente para definir propiedades adicionales. La declaración completa de la subclase se realiza 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ó en detalle los problemas que pueden surgir de la aplicación de nuevos métodos y propiedades en los objetos definidos por el DOM del W3C. [3] Estas ideas reflejan las ideas publicadas en marzo de 2010 por el desarrollador de Yahoo! Nicholas C. Zakas [4] y 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, como element.hide(), la solución a estos problemas es proporcionar objetos contenedor alrededor de estos objetos host e implementar los nuevos métodos en estos. jQueryes un objeto contenedor de este tipo en la biblioteca de ese nombre. [3]
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}