JavaScript indolore utilisant le prototype

Si vous êtes sur Rails, vous n'avez pas besoin de télécharger le prototype: il est inclus dans la distribution. Vous pouvez l'inclure dans vos opinions en mettant cela dans la de vos pages:

<%= javascript_include_tag 'prototype' %>

Maintenant, allons-y!

Les petits aides du prototype

L'une des très belles choses sur l'utilisation du prototype est les fonctions d'assignes simples mortelles qu'elle fournit pour des tâches de script très courantes. La fonction $ a déjà attiré l'attention. Donnez-lui un ou plusieurs ID d'élément, et il y rendra des références:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

C'est comme un document gonflé.

Une autre fonction incroyablement utile est Document.

Aussi, comme cet article était en cours d'écriture, la version Prototype 1.5.0_RC0 a gagné la puissante fonction $$, qui vous permet de sélectionner des éléments en utilisant la syntaxe standard du sélecteur CSS:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Veuillez noter qu'au moment de la rédaction du moment de la rédaction, sauf si vous téléchargez la toute dernière version du prototype de Subversion, cette fonction ne sera pas disponible pour vous.

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Faire du javascript suce moins

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

oups, j’ai volé le slogan de la bibliothèque JavaScript. Les développeurs de bibliothèques JavaScript ne semblent pas empêcher d'essayer de faire en sorte que JavaScript soit comme une autre langue. Les gars mochikit veulent que JavaScript soit Python, d'innombrables programmeurs ont essayé de faire du javascript comme Java, et le prototype essaie de le faire comme Ruby. Le prototype fait des extensions au cœur de JavaScript qui peuvent (si vous choisissez de les utiliser) ont un effet dramatique sur votre approche pour coder JavaScript. Selon vos antécédents et le fonctionnement de votre cerveau, cela peut vous être utile ou non.

oo la façon Ruby (ish): class.create et object.extend

La méthode Class.Create vous permet de définir des classes de manière plus rubis, bien que cela soit purement esthétique car il appelle essentiellement la méthode initialisée que vous définissez comme le constructeur, plutôt que la prise de l'approche JavaScript traditionnelle de la création d'objets avec des fonctions de constructeur.

Cependant, beaucoup plus puissant est l'objet stupidement simple mais efficace. Tout ce qu'il fait est de copier les propriétés et les méthodes d'un objet à un autre objet, mais ses utilisations sont nombreuses. Voici un dégustateur rapide:

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

Il est le plus souvent utilisé pour «mélanger» les méthodes d'un objet avec un autre. Par exemple, vous pouvez créer un ensemble de fonctions qui rendent certains éléments DOM triables:

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

Ensuite, si nous voulions rendre notre Domtable par rapport à ce qui est triable, nous pourrions mélanger ces méthodes à l'objet Domtable:

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

<%= javascript_include_tag 'prototype' %>

Maintenant, nous pouvons appeler ces méthodes sur la table:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Fonction de liaison

Le prototype ajoute également à l'objet de fonction deux méthodes vraiment utiles: lier et bindaseventListener. Ceux-ci sont principalement utilisés pour lier une fonction à un objet particulier afin que ce mot clé pointe vers cet objet. Ceci est incroyablement utile lorsque vous définissez des fonctions de gestionnaire d'événements. Imaginez que vous essayez quelque chose comme ceci:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Traditionnellement, vous obtiendrez une erreur parce que, lorsque l'événement déclenche la fonction de gestionnaire, cela fait référence à l'élément MyDiv, pas myObject, donc ce.Message n'est pas défini. Vous pouvez résoudre ce problème en utilisant la méthode de liaison comme ainsi:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Maintenant, tout fonctionne bien, car le mot clé est lié à MyObject. En outre, BindaseventListener fait la même chose, bien qu'il passe l'objet événement à votre fonction de manière compatible entre le navigateur croisé, vous n'avez donc plus à vous soucier de Window.Event dans IE. Essayez ceci:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Maintenant, notre fonction EventHandler a accès à l'objet Event. Beaucoup plus de détails sur ces deux méthodes sont disponibles sur le site de leur créateur.

Nouvelles méthodes de chaîne et de numéro

Le prototype a ajouté un énorme nombre de méthodes utiles à l'objet String intégré. Jetons un coup d'œil à certains des meilleurs.

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

Le prototype ajoute également une excellente méthode à numéro. Dites au revoir à vos boucles pour vos boucles!

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

Ici, la méthode Times prend une fonction qui sera appelée le nombre de fois donné et passe dans le numéro d'itération actuel comme argument. Cette utilisation d'une fonction itérateur est courante lors de l'utilisation de l'énumérable, dont nous discuterons ensuite.

itération de la manière rubis: énumérable et hachage

L'un des joyaux cachés du prototype est le mélange énumérable et l'objet de hachage, qui a été braconné tout droit sorti de Ruby. Si vous ne connaissez pas Ruby, ne vous inquiétez pas. Je vais tout expliquer ici.

Nous allons commencer par énumérable. En bref, lorsque nous ajoutons Énumérable à un objet utilisant Object.extend, il donne à l'objet en question de nombreuses fonctions vraiment utiles pour travailler avec ses propriétés. L'énumérable a été ajouté au prototype de Array, de sorte que n'importe quel tableau a ces nouvelles méthodes. Voici quelques exemples de ce que vous pouvez faire avec les nouveaux tableaux «énumérés»:

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

var myObject = new Object();  <br>
myObject.message = "Hello!";  <br>
myObject.eventHandler = function() {  <br>
  alert(this.message);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler;

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

myObject.eventHandler = function(event) {  <br>
  alert(event.srcElement.nodeName);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler.bindAsEventListener(myObject);

// "backgroundColor"  <br>
"background-color".camelize()

camelize turns hyphenated strings to camel case strings that you can use to work with CSS properties.

// "I am a piece of HTML"  <br>
"I am a piece of <strong>HTML</strong>".striptTags()  <br>
  <br>
// {a : 10, b: "thing"}  <br>
"a=10&b=thing".toQueryParams()

Pour créer un hachage, appelez la fonction magique $ h sur n'importe quel objet. Cela transforme toutes les propriétés de l'objet en un ensemble de paires de valeurs clés avec un énumérable mélangé. Prenons des hachages pour un tour:

<%= javascript_include_tag 'prototype' %>

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Au début, si vous n'êtes pas un Rubyist, l'énumérable et le hachage peuvent sembler un peu des tracas, mais je peux vous assurer, une fois que vous commencerez à les utiliser, vous vous demanderez pourquoi vous avez déjà pris la peine d'obtenir RSI en écrivant tous ceux pour les boucles! Lorsque vous en utilisez un ou plusieurs ensemble, vous réaliserez la puissance massive de ces nouvelles méthodes. Tu peux "> Lire sur l'énumérable et le hachage plus en détail chez Encyte Media.

L'objet de l'événement aide à fournir ce que, à beaucoup, est le Saint Graal de JavaScript: Gestion des événements simples et cross-browser:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

D'une manière plutôt agréable, le prototype essaie d'éviter ces fuites de mémoire embêtantes dans IE en supprimant automatiquement chaque observateur lorsque la page décharge.

À mon avis, cependant, il s'agit d'une solution de gestion d'événements plutôt sous-développée en ce moment, donc cela pourrait être utile d'envisager d'utiliser quelque chose d'un peu plus riche comme l'addition de Dean Edwards pour le moment.

Formulaires de manipulation

Les objets de formulaire et de champ fournissent un certain nombre de fonctions simples mais pratiques pour travailler avec les formulaires et les champs d'entrée, ainsi que le code qui prend en charge l'implémentation AJAX du prototype.

L'objet de formulaire

Généralement, les méthodes de l'objet de formulaire prennent soit un ID ou une référence d'objet à un élément:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

L'objet de champ

L'objet de champ traite des éléments de forme individuels, et ses méthodes prennent généralement un ID ou une référence d'objet à l'élément d'une manière similaire à l'objet de forme:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

Forme de sérialisation

En termes prototypes, le sérialisation d'un formulaire signifie lire tous les éléments du formulaire et les transformer en une chaîne codée par URL (presque) identique à celle qui serait envoyée si vous soumettiez le formulaire. Par exemple, considérez ce formulaire:

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

Remarquez que le formulaire. Sérialise intelligemment lisse sur les différences entre les façons dont différents éléments de forme sont accessibles, de sorte que les entrées, sélectionnent, les cases à cocher et les boutons radio sont gérés correctement. Form.Serialize est utile pour plusieurs tâches, mais prend tout son sens lorsque nous travaillons avec Ajax, comme nous le verrons sous peu.

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

Ces observateurs vérifient chaque seconde si les données ont changé ou non et, si elles l'appellent, appellent MyCallBackFunction.

Le deuxième type d'observateur est basé sur des événements et effectuera le chèque lorsque les événements modifiés ou cliquez sont produits pour les éléments. Vous pouvez l'utiliser comme ceci:

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

Si tous les champs de la forme que vous observez soutiennent un gestionnaire d'événements, c'est un moyen beaucoup plus efficace d'observer la forme. Cependant, si vous souhaitez surveiller les changements d'éléments qui ne prennent pas en charge ces événements, utilisez les observateurs périodiques.

travailler le dom

Le prototype a 4 objets (élément, insertion, observateur et position) qui permettent diverses formes de manipulation DOM et lisse sur de nombreuses différences de navigateur qui font du traitement du DOM ainsi à l'écran exaspérant. Au lieu de jeter votre ordinateur par la fenêtre, jetez un coup d'œil à cette section.

L'objet élément

L'objet Element fonctionne dans la façon dont vous vous attendez probablement à ce point: la plupart des méthodes de l'élément prennent simplement un ID ou une référence d'objet à l'élément que vous souhaitez manipuler. Voici un aperçu de certaines des méthodes les plus utiles:

<%= javascript_include_tag 'prototype' %>

Voir la liste complète du site de Sergio Pereira.

L'objet d'insertion

Je sais ce que vous pensez: cela semble un peu bizarre, non? Eh bien, l'objet d'insertion ajoute des morceaux de HTML dans et autour d'un élément. Il existe 4 types d'insertion: avant, après, en haut et en bas. Voici comment vous ajouteriez du HTML avant un élément avec l'ID «Myelement»:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Ce diagramme montre où chaque type d'insertion supprimera votre contenu HTML par rapport à l'élément donné.

L'objet de position

L'objet de position offre un tas de méthodes qui peuvent vous parler d'un emplacement donné à l'écran et fournir des informations sur cet emplacement par rapport à d'autres éléments, d'une manière compatible entre les navigateurs. Cela devrait retirer une grande partie de la victime des animations, des effets et du code de glisser-déposer. Jetez un œil à la référence de position pour plus de détails.

Obtenez votre web 2.0 sur

"Enfin!" Vous pensez: "Il est parti à ce que nous voulons vraiment savoir." Oui, je l'ai laissé à la fin pour entrer dans les aides de l'Ajax de Prototype, car ils sont construits au-dessus de toutes les autres choses que nous avons vécues, et cela aide à comprendre la sérialisation de la forme du prototype, les observateurs et les insertions lorsque nous parlons de l'Ajax.

Ajax, au cas où vous avez été enterré dans un trou très profond au cours des deux dernières années, fait référence à l'utilisation de l'objet XMLHTTPRequest du navigateur (ou équivalent) pour communiquer avec le serveur sans recharger la page. Le prototype lisse sur la plupart des détails, mais il est toujours bon d'obtenir un peu d'arrière-plan sur XMLHTTPREQUEST, que vous trouverez dans cet article de Cameron Adams.

Donc, maintenant vous êtes tous pompés pour obtenir une action Web 2.0, regardons une demande Ajax très simple:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Le constructeur Ajax.request prend une URL et un objet Options. Dans ce cas, nous envoyons un paramètre (nom) à hello.php et alertant sa réponse (ou alertant une erreur si elle ne fonctionne pas). Il vaut la peine de prendre le temps de se familiariser avec les options disponibles; Voici un aperçu des options, ainsi que leurs valeurs par défaut:

Le prototype ajoute un en-tête HTTP personnalisé à toutes ses demandes AJAX afin que votre application de serveur puisse détecter qu'il s'agit d'un appel AJAX, plutôt qu'un appel normal. L'en-tête est:

<%= javascript_include_tag 'prototype' %>

Voici un exemple de fonction PHP utilisée pour détecter un appel ajax:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

En utilisant cette approche, vous pouvez écrire des applications AJAX qui fonctionnent même si l'utilisateur utilise un ancien navigateur ou a désactivé JavaScript, mais c'est un tout autre article…

Utilisation de Form.Serialize pour transmettre des données à ajax.request

Comme nous l'avons vu ci-dessus, l'option Paramètres est utilisée pour transmettre une chaîne de variables codées par URL. Si les données que vous devez envoyer sont définies par un formulaire, comme c'est le cas avec la plupart des applications AJAX, vous pouvez simplement utiliser Form.Serialize pour générer une chaîne codée par URL à partir de tous vos champs de formulaire et passer cela dans l'option Paramètres comme SO:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Écriture de gestionnaires d'événements ajax

Dans l'exemple ci-dessus, Onsuccess et Onfailure sont deux exemples de gestionnaires d'événements AJAX. Les fonctions de gestionnaire d'événements fournies dans l'objet Options d'un appel ajax.request reçoivent un argument, qui est l'objet XMLHTTPRequest pour cet appel ajax. J'appelle normalement cette réponse d'argument ou resp. Vous pouvez utiliser cet argument pour obtenir la réponse du serveur comme ainsi:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

N'oubliez pas, cependant, que REA est juste l'objet XMLHttpRequest, donc toutes ces propriétés sont disponibles.

Vous pouvez envoyer des données sous forme de JSON à partir de votre serveur en ajoutant les données JSON à l'en-tête de réponse X-JSON. Cela sera ensuite automatiquement évalué par prototype et envoyé comme deuxième argument.

L'Ajax.updater et ajax.periodicalupdater

De nombreuses opérations AJAX impliquent simplement la mise à jour de certains HTML sur votre page avec HTML renvoyé du serveur. L'objet ajax.updater enveloppe Ajax.request et simplifie ce cas d'utilisation commun pour nous. Voici un exemple simple:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Le extrait ci-dessus remplacerait simplement le contenu de l'élément dont l'ID était «MyDiv» par le contenu renvoyé du serveur. Ajax.periodicalupdater est similaire, mais fait l'appel ajax à plusieurs reprises à un intervalle que vous définissez:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

L'option de désintégration vous permet de donner une petite pause à votre serveur s'il renvoie de nombreuses réponses identiques. Essentiellement, chaque fois que ModicalUpDater fait une demande, il compare les résultats avec ce que le serveur a renvoyé la dernière fois. Si les valeurs sont les mêmes, il multiplie l'intervalle par la valeur de désintégration. Ainsi, pour l'exemple ci-dessus, il ferait la demande suivante deux secondes plus tard, puis quatre secondes plus tard, et ainsi de suite, jusqu'à ce qu'elle reçoive un résultat différent du serveur. À ce stade, l'intervalle serait réinitialisé à une seconde.

ajax avec les intervenants

Les répondeurs de l'AJAX vous permettent d'enregistrer les gestionnaires d'événements mondiaux qui sont déclenchés pour chaque demande Ajax qui se produit sur la page. Ils sont très utiles pour gérer les applications avec de grandes quantités d'activité AJAX. Par exemple, vous pouvez les utiliser pour afficher une animation de chargement standard chaque fois qu'une demande ajax se produit:

<%= javascript_include_tag 'prototype' %>

Si vous recherchez quelques exemples de travail d'Ajax avec le prototype, essayez cet article.

où ensuite?

Comme nous l'avons vu à travers cet article, le prototype est non seulement utile en soi, mais offre un excellent point de départ pour écrire d'autres bibliothèques plus spécialisées. C'est exactement ce que fait un nombre croissant de personnes.

script.aculo.us et mooo.fx

Le script de Thomas Fuchs.aculo.us reçoit beaucoup d'attention pour le moment pour ses effets Whiz-Bang et ses widgets intelligents. Il faisait à l'origine partie de la bibliothèque de prototype de base, mais s'est rapidement devenue hors de contrôle et s'est libérée de son parent.

En utilisant le prototype comme base, Script.aculo.us se spécialise dans la fourniture d'une riche expérience utilisateur grâce à des effets animés, des fonctionnalités de glisser-déposer simples à utiliser et des composants d'interface utilisateur puissants. Il y a un joli wiki sur le site, avec une réserve de documentation de qualité en croissance rapide pour vous aider à démarrer, et des pages d'exemples pour faire couler votre jus créatif. Comme Script.aculo.us devient assez grand dans la taille des fichiers, il a été divisé en plusieurs fichiers, donc vos utilisateurs n'auront pas à télécharger toute la bibliothèque pour pouvoir utiliser quelques effets de diapositive. Cependant, même les fichiers individuels sont assez encombrants.

Si vous recherchez des effets simples, je recommanderais vraiment Moo.fx. Il n'a que 3k de taille et vous donne des effets de glissière et de fondu de baisse qui, souvent, sont tout ce qui est requis dans une application AJAX simple. C'est aussi un excellent point de départ si vous voulez écrire vos propres effets. Jetez un œil au code pour voir un excellent exemple de programmation à l'aide de l'objet Prototype.extend pour fournir un héritage simple. Valerio est évidemment très axée sur la maintenance de ses fichiers de script, il a donc même une version «Lite» du prototype (haché à environ 10k), et une version maigre d'Ajax.request, que je me retrouve plus souvent que la bibliothèque prototype complète. Ça vaut vraiment le coup.

comportement

Le comportement est un excellent ajout à votre boîte à outils de script DOM qui vous permet d'utiliser des sélecteurs CSS pour ajouter un comportement à vos documents. Voici un échantillon de ce qu'il vous permet de faire:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

En savoir plus à ce sujet sur le site du comportement. Il est désormais possible de réaliser un type de chose similaire en utilisant la nouvelle fonction $$ discutée plus tôt, donc cela pourrait éventuellement devenir redondant.

jQuery

jQuery est une petite bibliothèque compacte qui joue bien avec le prototype et crée une version de super-héros de la fonction $ qui peut prendre des sélecteurs XPath et CSS 3. Il couple cette capacité avec une approche de chaînage de méthode extrêmement intelligente qui rend le code très concis. Attention à celui-ci.

enveloppent

Le prototype est un morceau de kit puissant lorsqu'il s'agit d'ajouter des épices Scripted DOM à vos applications Web. Malheureusement, ses capacités et ses outils ont augmenté à un rythme beaucoup plus rapide que sa documentation! Nous avons réussi à couvrir tous les coins du prototype de cet article, mais pas toutes les méthodes. J'espère cependant que vous savez maintenant où aller pour obtenir les informations supplémentaires dont vous avez besoin.

Si vous voulez en savoir plus, essayez le prototypedoc.com de Ronnie Roller, une ressource qui suit le corps croissant de la documentation prototype. Amusez-vous!

Questions fréquemment posées (FAQ) sur le prototype JavaScript indolore

Quel est le prototype JavaScript indolore?

Le prototype JavaScript indolore est une caractéristique unique de JavaScript qui permet la création de nouveaux objets avec leurs propres propriétés et méthodes. Il s'agit d'un plan à partir duquel d'autres objets peuvent être créés. Cette fonctionnalité est particulièrement utile lorsque vous souhaitez créer plusieurs objets avec les mêmes propriétés et méthodes. Il favorise la réutilisabilité et l'efficacité du code.

En quoi le prototype JavaScript sans douleur diffère-t-il des autres fonctionnalités JavaScript?

Contrairement aux autres caractéristiques JavaScript, le prototype JavaScript sans douleur permet la création d'objets avec leurs propres propriétés et méthodes uniques. Cela signifie que vous pouvez créer plusieurs objets à partir du même prototype, chacun avec ses propres propriétés et méthodes uniques. Ceci est différent des autres fonctionnalités JavaScript qui ne permettent que la création d'objets uniques.

Comment puis-je créer un prototype JavaScript indolore?

Création d'un prototype javascript indolore implique la définition d'une fonction qui agira comme prototype, puis en utilisant le «nouveau» mot clé pour créer de nouveaux objets à partir de ce prototype. Voici un exemple simple:

Fonction Car (Make, Model, Year) {
this.make = make;
this.model = modèle;
this.year = an;
}

var mycar = new Car ('Toyota', 'Corolla, 2005); Et «MyCar» est un nouvel objet créé à partir du prototype de «voiture».

Puis-je ajouter des propriétés à un prototype JavaScript sans douleur après sa création?

Oui, vous pouvez ajouter des propriétés à un prototype JavaScript sans douleur après sa création. Cela se fait à l'aide de la propriété «Prototype». Voici un exemple:

car.prototype.color = 'noir';

Dans cet exemple, une propriété «couleur» est ajoutée au prototype «voiture».

Puis-je ajouter des méthodes à un prototype JavaScript indolore?

Oui, vous pouvez ajouter des méthodes à un prototype JavaScript indolore. Cela se fait de la même manière que l'ajout de propriétés, en utilisant la propriété «Prototype». Voici un exemple:

car.prototype.start = function () {
console.log ('car démarré');
}

Dans cet exemple, une méthode «Démarrer» est ajoutée au prototype de «voiture»

Les avantages de l'utilisation de Painless Javascript. Le prototype JavaScript est la réutilisabilité du code et l'efficacité. En créant un prototype, vous pouvez créer plusieurs objets avec les mêmes propriétés et méthodes sans avoir à redéfinir ces propriétés et méthodes pour chaque objet. Cela peut gagner beaucoup de temps et rendre votre code plus efficace.

Y a-t-il des inconvénients pour utiliser le prototype JavaScript indolore?

Un inconvénient potentiel pour utiliser le prototype javascript indolore est qu'il peut être un peu plus complexe pour comprendre et utiliser que les autres caractéristiques JavaScript. Cependant, une fois que vous comprenez comment cela fonctionne, cela peut être un outil très puissant.

Puis-je utiliser le prototype JavaScript indolore avec d'autres fonctionnalités JavaScript?

Oui, vous pouvez utiliser un prototype JavaScript sans douleur avec d'autres fonctionnalités JavaScript. En fait, il est souvent utilisé en conjonction avec d'autres fonctionnalités pour créer des applications plus complexes et puissantes.

Le prototype JavaScript indolore est-il pris en charge dans tous les navigateurs?

Oui, le prototype JavaScript sans douleur est pris en charge dans tous les navigateurs modernes. Cependant, c'est toujours une bonne idée de vérifier la prise en charge spécifique du navigateur pour toute fonctionnalité JavaScript que vous utilisez.

Où puis-je en savoir plus sur le prototype JavaScript indolore?

Il existe de nombreuses ressources disponibles en ligne pour en savoir plus sur le prototype JavaScript sans douleur. Certains bons endroits pour commencer incluent le Mozilla Developer Network (MDN) et divers tutoriels et cours JavaScript disponibles sur des sites comme Codecademy et Udemy.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!