Comment éviter les collisions de noms de fonctions JavaScript avec les ID d'éléments ?

Collision de noms de fonction avec l'ID d'élément en JavaScript

Les développeurs Web rencontrent souvent un problème particulier où un nom de fonction JavaScript est en conflit avec un ID d'élément, conduisant à des erreurs telles que "n'est pas une fonction". Ce problème provient d'une fonctionnalité héritée de JavaScript qui est née dans les premiers jours du développement Web.

Problème de chaîne de portée héritée

Dans JavaScript 1.0 à 1.3, il n'y avait pas distinction claire entre le langage de programmation et l'API DOM. Par conséquent, les contrôles de formulaire ont accès aux propriétés de l'objet de formulaire, y compris les noms des contrôles. Cela signifie que si un élément select a un ID « border », le code suivant fonctionnera :

function border(border) { alert(border); }
<select>

Cependant, cette simplicité s'accompagne d'une mise en garde. Si un contrôle de formulaire est placé dans un formulaire, l’objet de formulaire devient le troisième suivant dans la chaîne de portée. Par conséquent, le code suivant échouera :

<form>
  <select>

Dans ce cas, la propriété "border" de l'objet formulaire éclipse la fonction globale "border", provoquant l'erreur "n'est pas une fonction".

Compatibilité HTML W3C DOM niveau 2

Pour résoudre ce problème, W3C DOM niveau 2 HTML introduit la possibilité d'accéder aux éléments par leurs noms ou identifiants via la syntaxe d'accesseur de propriété bracket. Cela signifie que le code suivant est désormais équivalent au code problématique ci-dessus :

document.forms["myForm"].elements["border"](this.value)

Recommandation

Pour éviter ce problème de collision, il est conseillé d'éviter d'utiliser le même nom ou ID pour les contrôles de formulaire que pour les fonctions définies par l'utilisateur. De plus, les développeurs doivent éviter d'utiliser le même identifiant pour la fonction et l'un de ses arguments, car cela rend l'objet de fonction inaccessible depuis la fonction.

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!