Les ID d'élément nommés peuvent être référencés comme JavaScript Globals

le savez-vous? Les éléments DOM avec ID sont accessibles en tant que variables globales en JavaScript? Il s'agit d'une fonctionnalité qui existe depuis longtemps, mais je ne l'ai fait que pour la première fois.

Si vous entendez parler de cette fonctionnalité, soyez préparé! Ajoutez simplement un ID à l'élément de HTML et nous pouvons voir comment il est appliqué dans la pratique:

<div id="cool"></div>

Habituellement, nous utilisons querySelector("#cool") ou getElementById("cool") pour définir une nouvelle variable pour sélectionner l'élément:

var el = querySelector("#cool");

mais en fait, nous pouvons accéder à #cool sans ces opérations lourdes:

Par conséquent, tout ID (ou attribut de nom) dans HTML est accessible en JavaScript en utilisant window[ELEMENT_ID]. Encore une fois, ce n'est pas une "nouvelle" fonctionnalité, mais c'est rare.

Comme vous l'avez peut-être deviné, accéder aux lunettes mondiales avec des références nommées n'est pas la meilleure solution. Certaines personnes l'appellent des «pollueurs mondiaux de portée». Nous explorerons les raisons, mais d'abord ...

quelques arrière-plans

Cette méthode est décrite dans la spécification HTML, qui le décrit comme "Accès nommé aux objets de fenêtre".

Internet Explorer est le premier navigateur à implémenter cette fonctionnalité. D'autres navigateurs ont ajouté cette fonctionnalité. À l'époque, Gecko était le seul navigateur à ne pas le soutenir directement en mode standard, mais a choisi de l'utiliser comme fonctionnalité expérimentale. Les gens hésitaient à la mettre en œuvre, mais pour la compatibilité du navigateur, il a finalement progressé (Gecko a même essayé de convaincre Webkit de le supprimer du mode standard) et a finalement saisi le mode standard dans Firefox 14.

Ce qui est probablement moins connu, c'est que les navigateurs doivent prendre certaines précautions (différents niveaux de réussite) pour s'assurer que les variables globales générées ne corrompent pas la page Web. L'une des mesures est ...

Occlusion variable

La partie la plus intéressante de cette fonctionnalité est que les références d'élément nommées n'obscurcissent pas les variables globales existantes. Par conséquent, si l'ID de l'élément DOM est défini comme une variable globale, il ne remplace pas la variable existante. Par exemple:

window.foo = "bar";

<div id="foo">I won't override window.foo</div>

console.log(window.foo); // 输出 "bar"

super versa:

<div id="foo">I will be overridden :(</div>

window.foo = "bar";
console.log(window.foo); // 输出 "bar"

Ce comportement est crucial car il élimine une couverture dangereuse, telle que <div id="alert"> </div>, sinon cela provoquera des conflits en invalidant l'API alerte. Cette technique de protection est probablement la raison pour laquelle vous (si vous êtes comme moi) en apprenez d'abord.

Articles contre la dénomination des variables globales

J'ai dit plus tôt que l'utilisation d'éléments mondiaux nommés comme références peut ne pas être la meilleure solution. Il y a de nombreuses raisons, et TJ Vantoll a très bien expliqué ce blog, et je vais le résumer ici:

• Si le DOM change, la référence changera également. Cela rend le code très "frêle" (un terme dans la spécification), et la séparation des préoccupations entre HTML et JavaScript peut être trop stricte.
• Les citations accidentelles sont trop faciles. Une faute simple se référera très probablement à une variable globale nommée et vous donnera des résultats inattendus.
• Les méthodes d'implémentation varient en différents navigateurs. Par exemple, nous devrions être en mesure d'accéder aux ancres avec des ID (par exemple <a> <code><a></a>), mais certains navigateurs (c'est-à-dire Safari et Firefox) renvoient une perception de référence dans la console.
• Il peut ne pas renvoyer ce que vous pensez que cela en résultera. Selon la spécification, lorsqu'il y a plusieurs instances des mêmes éléments nommés dans le DOM (par exemple, deux <div> <code><div> instances), le navigateur doit renvoyer une htmlcollection contenant le tableau de ces instances. Cependant, Firefox ne renvoie que la première instance. Encore une fois, la spécification indique que nous devons utiliser une instance d'ID dans l'arborescence des éléments. Mais cela empêchera la page de fonctionner ou quelque chose comme ça. <li> <strong> coûts de performance possibles? </strong> Je veux dire, le navigateur doit créer cette liste de référence et le maintenir. Certaines personnes ont exécuté des tests dans les threads StackOverflow où les variables globales nommées fonctionnent mieux dans un test et plus bas dans les tests récents. </li> <h3> Autres précautions </h3> <p> Supposons que nous abandonnons les critiques contre l'utilisation de variables globales nommées et que nous continuons à les utiliser. tous mes vœux. Cependant, il y a quelques choses que vous voudrez peut-être considérer lorsque vous faites cela. </p> <h4> Polyfills </h4> <p> peut sembler extrême, mais ces types de vérifications globales sont des exigences de configuration typiques pour les polyfills. Découvrez l'exemple suivant, nous définissons un cookie en utilisant la nouvelle API Cookestore, en le polyfilant dans un navigateur qui ne le prend pas encore en charge: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div id=&quot;cool&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Ce code fonctionne bien dans Chrome, mais dans Safari lance l'erreur suivante: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var el = querySelector(&quot;#cool&quot;);</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Au moment de la rédaction du moment de la rédaction, Safari ne prend pas en charge l'API Cookstore. Par conséquent, le polyfill ne sera pas appliqué car l'ID d'élément IMG crée une variable globale qui entre en conflit avec la variable globale de Cookiestore. </p> <h4> JavaScript API Update </h4> <p> Nous pouvons modifier la situation et trouver un autre problème, c'est-à-dire que les mises à jour du moteur JavaScript du navigateur peuvent rompre la référence globale de l'élément nommé. </p> <p> Exemple: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">window.foo = &quot;bar&quot;;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Ce script prend une référence à l'élément d'entrée et aux appels focus (). Cela fonctionne bien. Cependant, nous ne savons pas combien de temps cela fonctionnera. </p> <p> Vous verrez que les variables globales que nous utilisons pour référencer les éléments d'entrée cessent de fonctionner une fois que le navigateur commencera à prendre en charge l'API BarcodeDedector. À ce moment-là, la variable globale Window.BarcodeDetector ne sera plus une référence à l'élément d'entrée, et .focus () lancera une erreur "Window.BarcodeDetector.Focus n'est pas une fonction". </p> <h3> Conclusion </h3> <p> Résumons comment nous sommes arrivés à ce point: </p> <ul> <li> Tous les principaux navigateurs créent automatiquement des références globales à chaque élément DOM avec un ID (ou dans certains cas l'attribut de nom). </li> <li> L'accès à ces éléments par le biais de leur référence globale n'est pas fiable et peut être dangereux. Veuillez utiliser <code>querySelector ou getElementById à la place.
• Étant donné que les références globales sont automatiquement générées, elles peuvent avoir des effets secondaires sur votre code. C'est une bonne raison d'éviter d'utiliser l'attribut ID, sauf si vous en avez besoin.

En fin de compte, il est préférable d'éviter d'utiliser des variables globales nommées en JavaScript. J'ai cité plus tôt ce que dit la spécification à ce sujet qui provoque le code "fragilité", mais voici le texte intégral pour souligner ceci:

D'une manière générale, s'appuyer sur cela conduira à un code fragile. Les ID peuvent éventuellement mapper cette API au fil du temps, par exemple, car de nouvelles fonctionnalités sont ajoutées à la plate-forme Web. Ne faites pas cela, utilisez document.getElementById() ou document.querySelector().

Je pense que la spécification HTML elle-même suggère d'éviter cette fonctionnalité dit tout.