El Marco de JavaScript Prototype es un JavaScript marco creado por Sam Stephenson en febrero de 2005 como parte de la base para el Ajax de apoyo en Ruby on Rails . Se implementa como un solo archivo de código JavaScript, generalmente llamado prototype.js . 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, el 0,6% de todos los sitios web utiliza Prototype. [1]
Autor (es) original (es) | Sam Stephenson |
---|---|
Desarrollador (es) | Equipo principal de prototipos |
Versión inicial | Febrero de 2005 |
Lanzamiento estable | 1.7.3 / 22 de septiembre de 2015 |
Repositorio | |
Escrito en | JavaScript |
Tipo | Biblioteca de JavaScript |
Licencia | Licencia MIT |
Sitio web | prototypejs |
Características
Prototype proporciona varias funciones para desarrollar aplicaciones JavaScript. Las características van desde atajos de programación hasta funciones principales para tratar 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 propiedad de prototipo , y cualquier objeto asignado a esa propiedad se utilizará como prototipo de los objetos creados con esa función. El marco de Prototype no debe confundirse con esta característica del lenguaje.
Funciones de utilidad de muestra
La función $ ()
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 prototypeEnhancedDomElement = $ ( domElement ); // Prototipo de referencia de objeto extendido
- Nota : Al igual que el guión bajo (
_
), el$
carácter es un "carácter de palabra" legal en los identificadores de JavaScript y no tiene otro significado en el idioma. Se agregó al lenguaje al mismo tiempo como soporte para expresiones regulares , de modo que las variables coincidentes similares a Perl pudieran ser emuladas, como$`
y$'
.
La función $ F ()
Sobre la base de 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 'seleccionar', la función devolverá el valor seleccionado actualmente.
$ F ( "id_of_input_element" )
La función $$ ()
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 los elementos con la clase "pulsar", debe utilizar lo siguiente:
$$ ( "a.pulsate" )
Esto devuelve una colección de elementos. Si está utilizando la extensión script.aculo.us de la biblioteca principal de prototipos, puede aplicar el efecto "pulsate" (parpadeo) de la siguiente manera:
$$ ( "a.pulsate" ). cada uno ( Efecto . Pulsación );
El objeto Ajax
En un esfuerzo por reducir la cantidad de código necesario para ejecutar una XMLHttpRequest
función entre navegadores , Prototype proporciona el Ajax
objeto para abstraer los diferentes navegadores. Tiene dos métodos principales: Ajax.Request()
y Ajax.Updater()
. Hay dos formas del Ajax
objeto. Ajax.Request
devuelve la salida XML sin procesar de una llamada AJAX, mientras Ajax.Updater
que inyectará la devolución dentro de un objeto DOM especificado. A Ajax.Request
continuación, se encuentran 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 a showResponse
continuación) cuando se recibe la respuesta HTTP del servidor:
nuevo Ajax . Request ( "http: // localhost / server_script" , { parámetros : { value1 : $ F ( "form_element_id_1" ), value2 : $ F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError });
Programación orientada a objetos
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. A continuación, se asigna una clase prototype
que actúa como modelo para las instancias de la clase.
var FirstClass = Clase . create ( { // El método initialize sirve como constructor initialize : function () { this . data = "Hello World" ; } });
Ampliando otra clase:
Ajax . Solicitud = Clase . create ( Ajax . Base , { // Anula el método de inicialización initialize : function ( url , options ) { this . transport = Ajax . getTransport (); this . setOptions ( options ); this . request ( url ); }, // ... más métodos agregan ... });
La función de marco 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 usa únicamente para definir propiedades adicionales. Toda la declaración de la subclase ocurre entre paréntesis de la llamada a la función.
Problemas
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 de que el mono parchee nuevos métodos y propiedades en los objetos definidos por el DOM de W3C. [3] Estas ideas se hacen eco de los pensamientos publicados en marzo de 2010 por Yahoo! desarrollador Nicholas C. Zakas [4] Se han resumido de la siguiente manera [5]
- Problemas entre navegadores: los objetos de host no están sujetos a reglas, comportamiento de DOM de IE no compatible, etc.
- Posibilidad de colisiones de nombres
- Sobrecarga de rendimiento
Para 2008, ya se estaban documentando problemas específicos con el uso de métodos de extensión DOM en versiones anteriores de Prototype, combinados con versiones más nuevas de los navegadores actuales. [6] En lugar de agregar nuevos métodos y propiedades a los objetos DOM 'host' preexistentes, como Element
, por ejemplo element.hide()
, la solución a estos problemas es proporcionar objetos de envoltura alrededor de estos objetos host e implementar los nuevos métodos en estos. jQuery
es un objeto contenedor en la biblioteca de ese nombre. [3]
Ahora se espera ampliamente que la mayoría de estas ideas y problemas se aborden en el lanzamiento de Prototype 2.0, pero los desarrolladores de Prototype tendrán que aprender a trabajar con una sintaxis alterada y gran parte del código de Prototype existente quedará desactualizado. [5]
Ver también
- Ajax (programación)
- Comparación de marcos de JavaScript
- script.aculo.us
- Marco de JavaScript de Mootools
- jQuery
Referencias
- ^ "Estadísticas de uso y cuota de mercado de bibliotecas JavaScript para sitios web, marzo de 2021" . w3techs.com . Consultado el 27 de marzo de 2021 .
- ^ "Prototype JavaScript Framework | Definición de clases y herencia" . prototypejs.org . Consultado el 5 de junio de 2020 .
- ^ a b c kangax (5 de abril de 2010). "¿Qué hay de malo en extender el DOM?" . Consultado el 6 de abril de 2010 .
- ^ Zakas, Nicholas C. (2 de marzo de 2010). "JavaScript mantenible: no modifique los objetos que no le pertenecen" . Consultado el 6 de abril de 2010 .
- ^ a b Almaer, Dion (6 de abril de 2010). "Prototype 2.0 no ampliará el DOM" . Consultado el 6 de abril de 2010 .
- ^ Resig, John (26 de marzo de 2008). "getElementsByClassName pre Prototype 1.6" . Consultado el 6 de abril de 2010 .
Bibliografía
- Orchard, Leslie M .; Pehlivanian, Ara; Koon, Scott; Jones, Harley (31 de agosto de 2009). Frameworks profesionales de JavaScript: Prototype, YUI, ExtJS, Dojo y MooTools (1ª ed.). Prensa Wrox . pag. 888. ISBN 978-0-470-38459-6.
enlaces externos
- Página web oficial
- Documentación oficial de la API de prototipos
- Ejemplos de prototipos