Framework JavaScript prototype

JavaScript Prototype est un framework créé par Sam Stephenson en février 2005 pour la prise en charge d'Ajax dans Ruby on Rails . Il est implémenté sous la forme d'un unique fichier de code JavaScript, généralement nommé `prototype.json` . Prototype est distribué de manière autonome, mais aussi intégré à des projets plus importants, tels que Ruby on Rails, script.aculo.us et Rico. prototype.jsXMLHttpRequest .

Prototype fournit également des fonctions de bibliothèque pour la prise en charge des classes et des objets dérivés de classes. En JavaScript, la création d'objets repose sur les prototypes : une fonction de création d'objet peut posséder une prototypepropriété, et tout objet assigné à cette propriété servira de prototype pour les objets créés par cette fonction. Il ne faut pas confondre le framework Prototype avec cette fonctionnalité du langage.

Exemples de fonctions utilitaires

La fonction $()

La fonction dollar , $(), peut être utilisée comme raccourci pour la fonction getElementById . Pour faire référence à un élément dans le modèle objet de document (DOM) d'une page HTML , la fonction habituelle d'identification d'un élément est :

" ) . style.color = " #ffffff " ;

La fonction $() réduit le code à :

). setStyle ({ color : '#ffffff' });

La fonction $() peut également recevoir un élément comme paramètre et renverra, comme dans l'exemple précédent, un objet étendu prototype.

id_of_element" ); // Référence d'objet classique renvoyée var prototypeEnhancedDomElement = $ ( domElement ); // Référence d' objet étendue du prototype

Remarque : Tout comme le trait de soulignement ( _), ce $caractère est un « caractère alphanumérique » autorisé dans les identificateurs JavaScript et n’a aucune autre signification dans le langage. Il a été ajouté au langage en même temps que la prise en charge des expressions régulières , afin que les variables de correspondance de type Perl puissent être émulées, telles que $`et $'.

La fonction $F()

Cette $()fonction $F()renvoie la valeur de l'élément de formulaire demandé. Pour un champ de type « texte », elle renvoie les données contenues dans l'élément. Pour un champ de type « select », elle renvoie la valeur actuellement sélectionnée.

)

La fonction $$()

La fonction `dollar` est le moteur de sélection CSS de Prototype . Elle renvoie tous les éléments correspondants, en suivant les mêmes règles qu'un sélecteur dans une feuille de style CSS. Par exemple, pour obtenir tous les éléments ayant la classe « pulsate », vous utiliserez le code suivant :<a>

)

Cette fonction renvoie une collection d'éléments. Si vous utilisez l'extension script.aculo.us de la bibliothèque Prototype de base, vous pouvez appliquer l'effet « pulsate » (clignotement) comme suit :

). chacun ( Effet . Pulsation );

L'objet Ajax

Afin de réduire la quantité de code nécessaire à l'exécution d'une XMLHttpRequestfonction multi-navigateurs, Prototype fournit l' Ajaxobjet permettant d'abstraire les différents navigateurs. Cet objet possède deux méthodes principales : ` Ajax.Request()get` et `return` Ajax.Updater(). Il existe deux formes de l' Ajaxobjet. Ajax.Request`get` renvoie la sortie XML brute d'un appel AJAX, tandis que ` Ajax.Updaterreturn` injecte la réponse dans un objet DOM spécifié. L' Ajax.Requestexemple ci-dessous récupère les valeurs actuelles de deux éléments d'entrée de formulaire HTML, envoie une requête HTTP POST au serveur avec ces paires nom/valeur, et exécute une fonction personnalisée (appelée showResponseci-dessous) à la réception de la réponse HTTP du serveur :

, { paramètres : { valeur1 : $F ( "form_element_id_1" ), valeur2 : $F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError } );

Programmation orientée objet

Prototype prend également en charge la programmation orientée objet plus traditionnelle. Cette Class.create()méthode permet de créer une nouvelle classe. On attribue ensuite à cette classe un prototypemodèle qui sert de plan pour ses instances.

Hello World" ; } } ) ;

Extension d'une autre classe :

jQuery , Prototype étend le DOM. Il est prévu de modifier cela dans la prochaine version majeure de la bibliothèque.

En avril 2010, le blogueur Juriy « kangax » Zaytsev (de Prototype Core) a décrit en détail les problèmes pouvant découler de l’ajout de nouvelles méthodes et propriétés aux objets définis par le DOM du W3C. Ces idées font écho aux réflexions publiées en mars 2010 par le développeur Yahoo! Nicholas C. Zakas Elles ont été résumées comme suit :

Problèmes de compatibilité entre navigateurs : les objets hôtes ne sont pas soumis aux règles, comportement DOM d’IE non conforme, etc.
Risque de collision de noms
Frais généraux de performance

Dès 2008, des problèmes spécifiques liés à l'utilisation des méthodes d'extension DOM dans les anciennes versions de Prototype, combinées aux versions plus récentes des navigateurs actuels, étaient documentés. [ que d'ajouter de nouvelles méthodes et propriétés aux objets DOM « hôtes » préexistants, tels que ` Element , element.hide()jQuery