Hispanopedia WikiEl 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, generalmente 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 partir de marzo de 2021prototype.jsSegún w3techs, Prototype es utilizado por el 0,6% de todos los sitios web. [ 1 ]
Características
Prototype proporciona diversas funciones para el desarrollo de aplicaciones JavaScript. Las características abarcan desde atajos de programación hasta funciones principales 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 de trabajo Prototype no debe confundirse con esta característica del lenguaje.
Ejemplos de funciones de utilidad
La función $()
La función del dólar , $(), se puede usar como abreviatura de la función getElementById . Para referirse a un elemento en el Modelo de Objetos del Documento (DOM) de una página HTML , la función habitual que identifica un elemento es:
document.getElementById ( " id_of_element" ) . style.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 objeto extendido prototipo.
var domElement = document.getElementById ( "id_of_element" ); // Referencia de objeto habitual devuelta var prototypeEnhancedDomElement = $ ( domElement ); // Referencia de objeto extendida del prototipo- Nota : Al igual que el guion bajo (
_), el$carácter es un "carácter de palabra" válido en los identificadores de JavaScript y no tiene ningún otro significado en el lenguaje. Se añadió al lenguaje al mismo tiempo que la compatibilidad con expresiones regulares , para que se pudieran emular las variables de coincidencia similares a las de Perl , como$`y$'.
La función $F()
Basándonos en la $()función, $F()esta devuelve el valor del elemento del formulario solicitado. Para un campo de texto, la función devolverá los datos que contiene. Para un campo de selección, la función devolverá el valor seleccionado actualmente.
$F ( "id_of_input_element" )La función $$()
La función `dollar dollar` 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 estilos CSS. Por ejemplo, si quieres obtener todos los elementos con la clase "pulsate", usarías lo siguiente:<a>
$$ ( "a.pulsate" )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 "pulsate" (parpadeo) de la siguiente manera:
$$ ( "a.pulsar" ). cada uno ( Efecto . Pulsar );El objeto Ajax
Con el fin de reducir la cantidad de código necesario para ejecutar una XMLHttpRequestfunción compatible con diferentes navegadores, Prototype proporciona el Ajaxobjeto para abstraer los distintos navegadores. Tiene dos métodos principales: Ajax.Request()y Ajax.Updater(). Existen 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 código encuentra los valores actuales de dos elementos de entrada de formulario HTML, realiza una solicitud HTTP POST al servidor con esos pares nombre/valor de elemento y ejecuta una función personalizada (llamada showResponsea continuación) cuando se recibe la respuesta HTTP del servidor:
nuevo Ajax.Request ( "http://localhost/server_script" , { parameters : { value1 : $F ( "form_element_id_1" ), value2 : $F ( " form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError }) ;Programación orientada a objetos
Prototype también añade soporte para la programación orientada a objetos más tradicional. El Class.create()método se utiliza para crear una nueva clase. A continuación, se le asigna a la clase un prototypeidentificador que actúa como plantilla para las instancias de la misma.
var FirstClass = Class . create ( { // El método initialize sirve como constructor initialize : function () { this . data = "Hello World" ; } });Ampliando otra clase:
Ajax.Request = Class.create ( Ajax.Base , { // Sobrescribe el método initialize initialize : function ( url , options ) { this.transport = Ajax.getTransport ( ) ; this.setOptions ( options ) ; this.request ( url ) ; } , // ... más métodos agregar ... } ) ;La función del framework Object.extend(dest, src)recibe dos objetos como parámetros y copia las propiedades del segundo objeto al primero, simulando así la herencia. El objeto resultante también se devuelve como resultado de la función. Como en el ejemplo anterior, el primer parámetro suele crear 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.
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 bloguero Juriy 'kangax' Zaytsev (de Prototype Core) describió extensamente los problemas que pueden surgir al modificar nuevos métodos y propiedades en los objetos definidos por el DOM del W3C. [ 3 ] Estas ideas se hacen eco de pensamientos publicados en marzo de 2010 por el desarrollador de Yahoo! Nicholas C. Zakas [ 4 ] Se han resumido de la siguiente manera [ 5 ]
- Problemas de compatibilidad entre navegadores: los objetos anfitriones no están sujetos a reglas, comportamiento del DOM de Internet Explorer que no cumple con las normas, etc.
- Probabilidad de colisiones de nombres
- Rendimiento superior
Para 2008, ya se estaban documentando problemas específicos con el uso de métodos de extensión DOM en versiones antiguas de Prototype, combinados con versiones más recientes de los navegadores actuales. [ 6 ] En lugar de agregar nuevos métodos y propiedades a objetos DOM 'anfitriones' preexistentes como Element, como element.hide(), la solución a estos problemas es proporcionar objetos envoltorio alrededor de estos objetos anfitriones e implementar los nuevos métodos en ellos. jQueryes un objeto envoltorio de ese tipo en la biblioteca del mismo nombre. [ 3 ]
Véase también
Referencias
- ↑ "Estadísticas de uso y cuota de mercado de las 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 .
- 1 2 3 kangax (5 de abril de 2010). "¿Qué tiene de malo extender el DOM?" . Recuperado el 6 de abril de 2010 .
- ↑ Zakas, Nicholas C. (2 de marzo de 2010). "JavaScript mantenible: No modifiques objetos que no te pertenecen" . Recuperado el 6 de abril de 2010 .
- ↑ Almaer, Dion (6 de abril de 2010). "Prototype 2.0 no extenderá el DOM" . Recuperado el 6 de abril de 2010 .
- ↑ Resig, John (26 de marzo de 2008). "getElementsByClassName pre Prototype 1.6" . Recuperado el 6 de abril de 2010 .
Bibliografía
- Orchard, Leslie M.; Pehlivanian, Ara; Koon, Scott; Jones, Harley (31 de agosto de 2009). Marcos de trabajo profesionales de JavaScript: Prototype, YUI, ExtJS, Dojo y MooTools (1.ª ed.). Wrox Press . pág. 888. ISBN 978-0-470-38459-6.
Enlaces externos
- Sitio web oficial
- Bibliotecas de JavaScript
- Ajax (programación)
- Software que utiliza la licencia MIT.
