Cinq fonctions utiles manquantes en javascript

Les fonctions principales de JavaScript sont constamment améliorées, et de nombreuses nouvelles classes et fonctions ont été ajoutées pour aider les programmeurs. Cependant, certaines fonctions pratiques de base sont toujours manquantes et doivent être implémentées avec des bibliothèques telles que jQuery, Prototype et Mootools. Bien que ces outils soient excellents, dans certains cas, les utiliser semble un peu lourde. Cet article présentera cinq fonctions pratiques dans lesquelles je pense que JavaScript devrait être construit.

Points clés:

• JavaScript n'a pas certaines fonctions pratiques de base, qui doivent généralement être implémentées avec des bibliothèques telles que jQuery, Prototype et Mootools. Cependant, pour certaines exigences, l'utilisation de ces bibliothèques est trop lourde.
Les fonctions
• getElementsByClassName() ne sont pas prises en charge par toutes les versions d'Internet Explorer, mais les fonctions de wrapper peuvent être utilisées pour être compatibles avec des versions plus anciennes. Cette fonction utilise des noms de classe pour récupérer des éléments, qui est une fonctionnalité que HTML5 n'avait pas auparavant.
Les fonctions
• extend() sont utilisées pour fusionner deux objets ou plus, ce qui est souvent nécessaire lors de l'écriture de plugins. Cette fonction n'est pas une fonction JavaScript native, mais peut être facilement construite.
Les fonctions
• inArray() ne sont pas originaires de JavaScript, mais vous pouvez écrire cette fonction pour tester si une valeur est dans un tableau. Cette fonction peut être améliorée à l'aide de la fonction equals() pour obtenir une correspondance lorsque deux objets ont les mêmes propriétés et valeurs.
La fonction
• toggleClass() est utilisée pour ajouter ou supprimer le nom de classe d'un élément en fonction de la question de savoir si le nom de classe existe.

getElementsByClassName ()

JavaScript permet l'utilisation de fonctions getElementById() pour récupérer des éléments par leur identifiant, mais avant HTML5, il n'y avait pas de fonction native qui pouvait utiliser des noms de classe pour obtenir un ou plusieurs éléments. La nouvelle fonction est appelée getElementsByClassName(), qui est disponible dans Firefox 3, Opera 9.5, Safari 3.1 et toutes les versions de Google Chrome. Malheureusement, il n'est pas pris en charge par toutes les versions d'Internet Explorer, le navigateur ennemi numéro un pour les concepteurs de sites Web. Seul Internet Explorer 9 prend en charge getElementsByClassName(), donc pour les anciennes versions, une fonction de wrapper est requise. La meilleure fonction que j'ai trouvée a été écrite par Robert Nyman. Sa mise en œuvre a été publiée sous la licence du MIT et a été recommandée par Whatwg. Il utilise la méthode native getElementsByClassName() dans les navigateurs qui le prend en charge, puis retombe à la méthode document.evaluate() moins connue, qui est soumise aux anciennes versions de Firefox (au moins à partir de la version 1.5) et de l'opéra (au moins à partir de la version 9.27) Démarrer) Support. Si toutes les méthodes échouent, le script retombe à la traversée récursive du DOM et collecte des éléments qui correspondent au nom de classe donné. Le code est le suivant:

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

extension ()

Si vous avez déjà écrit un plugin, vous avez presque certainement eu des problèmes à fusionner deux ou plusieurs objets. Cela se produit souvent lorsque vous avez des paramètres par défaut et souhaitez que l'utilisateur puisse remplacer certaines valeurs par défaut. Si vous utilisez jQuery, vous pouvez utiliser extend(), mais comme nous parlons de JavaScript natif, la mauvaise nouvelle est qu'il n'y a pas de fonctions natives. Heureusement, vous pouvez facilement le construire vous-même. L'exemple suivant vous montrera comment créer du code avec les mêmes fonctionnalités que la méthode jQuery. J'ai ajouté notre méthode extend() au prototype Object afin que tous les objets puissent partager la même méthode.

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

équivaut ()

La comparaison des objets est une opération très courante. Bien que ce test puisse être effectué à l'aide de l'opérateur d'égalité strict (===), vous ne voulez parfois pas tester si deux variables se réfèrent au même objet en mémoire. Au lieu de cela, vous voulez savoir si deux objets ont les mêmes propriétés et la même valeur. C'est exactement ce que fait le code suivant. Notez que le code suivant n'a pas été écrit par moi; Encore une fois, equals() a été ajouté à Object.prototype.

<code class="language-javascript">Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};</code>

inArray ()

javascript Il n'y a pas de méthode native pour tester si une valeur est dans un tableau. Nous rédigerons une fonction qui renvoie True si la valeur existe, sinon fausse. Cette fonction compare simplement la valeur donnée à chaque élément du tableau. Comme avec les deux exemples précédents, inArray() est ajouté aux propriétés prototypes de la classe Array.

<code class="language-javascript">Object.prototype.equals = function(x) {
  // ... (代码与原文相同) ...
};</code>

Cette fonction ne fonctionne pas comme prévu en raison de sa simplicité. Bien que cela fonctionne pour les types primitifs comme les chaînes et les nombres, si vous comparez les objets, il ne renvoie que si la fonction trouve le même objet. Pour mieux comprendre comment cela fonctionne, regardons l'exemple suivant.

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

La fonction améliorée inArray() est la suivante:

<code class="language-javascript">// ... (代码与原文相同) ...</code>

toggleclass ()

Une autre fonction qui est souvent utilisée dans jQuery est toggleClass(). Il ajoute ou supprime le nom de classe de l'élément selon que le nom de classe existe. Une version simple toggleClass() est indiquée ci-dessous.

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

La fonction améliorée toggleClass() est la suivante:

<code class="language-javascript">function toggleClass(id, className) {
  // ... (代码与原文相同) ...
}</code>

Conclusion

Cet article se concentre sur certaines des fonctions les plus importantes qui, je pense, manquent en JavaScript. Bien sûr, JavaScript manque autre chose, que nous verrons dans les prochaines semaines. Mais maintenant, je veux souligner les points suivants:

Les frameworks
• comme jQuery ont de nombreuses fonctions utiles, mais elles augmentent les frais généraux. Donc, si vous n'avez besoin que de quelques fonctions, utilisez JavaScript natif et regroupez les fonctions dont vous avez besoin dans un fichier externe.
• Si vous utilisez une fonction introduite dans la nouvelle version JavaScript, ne le supprimez pas. Enveloppez-le avec des instructions conditionnelles à tester si elle est prise en charge et si elle n'est pas prise en charge, utilisez votre ancien code comme indiqué dans getElementsByClassName(). De cette façon, vous continuerez à soutenir votre ancien navigateur.
• Ajouter des fonctions au prototype de l'objet autant que possible, comme indiqué dans extend(). Toutes les instances partageront la même méthode et fonctionneront mieux.
• Réutilisez votre code autant que possible, comme le montre la deuxième version de toggleClass().

L'image reste le format et la position d'origine inchangés.

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!