Benannte Element -IDs können als JavaScript Globals bezeichnet werden

Weißt du? DOM -Elemente mit ID können als globale Variablen in JavaScript zugegriffen werden? Dies ist eine Funktion, die es schon lange gibt, aber ich habe mich erst zum ersten Mal damit befasst.

Wenn Sie zum ersten Mal von dieser Funktion hören, seien Sie vorbereitet! Fügen Sie einfach eine ID zum Element in HTML hinzu und wir können sehen, wie es in der Praxis angewendet wird:

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

Normalerweise verwenden wir querySelector("#cool") oder getElementById("cool"), um eine neue Variable zu definieren, um das Element auszuwählen:

var el = querySelector("#cool");

Aber in der Tat können wir ohne diese umständlichen Operationen auf #cool zugreifen:

Daher kann auf jede ID (oder ein Name -Attribut) in HTML in JavaScript mit window[ELEMENT_ID] zugegriffen werden. Auch dies ist keine "neue" Funktion, aber es ist selten.

Wie Sie vielleicht vermutet haben, ist es nicht die beste Lösung, auf globale Bereiche mit den benannten Referenzen zuzugreifen. Einige Leute nennen es "globaler Umweltverschmutzer". Wir werden die Gründe untersuchen, aber zuerst ...

einige Hintergrund

Diese Methode wird in der HTML -Spezifikation beschrieben, die sie als "benannte Zugriff auf Fensterobjekte" beschreibt.

Internet Explorer ist der erste Browser, der diese Funktion implementiert. Andere Browser haben diese Funktion hinzugefügt. Zu dieser Zeit war Gecko der einzige Browser, der ihn nicht direkt im Standardmodus unterstützte, sondern als experimentelles Merkmal verwendet wurde. Die Leute zögerten, es zu implementieren, aber für die Browserkompatibilität (Gecko versuchte sogar, Webkit zu überzeugen, es aus dem Standardmodus zu entfernen) und schließlich in den Standardmodus in Firefox 14 eingegeben.

ist wahrscheinlich weniger bekannt, dass Browser einige Vorsichtsmaßnahmen (verschiedene Erfolgsebenen) treffen müssen, um sicherzustellen, dass die generierten globalen Variablen die Webseite nicht beschädigen. Eine der Maßnahmen ist ...

variable Okklusion

Der interessanteste Teil dieses Merkmals ist, dass benannte Elementreferenzen vorhandene globale Variablen nicht verdecken. Wenn die ID des DOM -Elements als globale Variable definiert ist, überschreibt sie die vorhandene Variable nicht. Zum Beispiel:

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"

Dieses Verhalten ist entscheidend, da es eine gefährliche Abdeckung beseitigt, wie <div id="alert"> </div>, sonst verursacht es Konflikte, indem es die Alarm -API ungültig macht. Diese Schutztechnik ist höchstwahrscheinlich der Grund, warum Sie (wenn Sie wie ich sind) zuerst davon lernen.

Artikel gegen die Benennung globaler Variablen

Ich sagte früher, dass die Verwendung genannter globaler Elemente als Referenzen möglicherweise nicht die beste Lösung ist. Es gibt viele Gründe, und TJ Vantoll hat in seinem Blog sehr gut ausgestattet, und ich werde es hier zusammenfassen:

• Wenn sich die DOM ändert, ändert sich auch die Referenz. Dies macht den Code sehr "gebrechlich" (ein Begriff in der Spezifikation) und die Trennung von Bedenken zwischen HTML und JavaScript kann zu streng sein.
• zufällige Zitate sind zu einfach. Ein einfacher Tippfehler bezieht sich höchstwahrscheinlich auf eine benannte globale Variable und liefert Ihnen unerwartete Ergebnisse.
• Implementierungsmethoden variieren in verschiedenen Browsern. Zum Beispiel sollten wir in der Lage sein, mit IDs (z. B. <a> <code><a></a>) auf Anker zugreifen zu können, aber einige Browser (d. H. Safari und Firefox) geben ein ReferenzError in der Konsole zurück.
• Es gibt möglicherweise nicht zurück, was Sie glauben, dass es sich daraus ergeben wird. gemäß der Spezifikation, wenn es im DOM mehrere Instanzen der gleichen benannten Elemente gibt (z. B. zwei <div> <code><div> Instanzen), sollte der Browser eine HTMLCollection mit dem Array dieser Instanzen zurückgeben. Firefox gibt jedoch nur die erste Instanz zurück. In der Spezifikation heißt es hier, dass wir im Elementbaum eine ID -Instanz verwenden sollten. Aber dies zu verhindern, dass die Seite funktioniert oder so etwas. <li> <strong> Mögliche Leistungskosten? </strong> Ich meine, der Browser muss diese Referenzliste erstellen und verwalten. Einige Leute haben Tests in Stackoverflow -Threads durchgeführt, bei denen genannte globale Variablen in einem Test tatsächlich besser abschneiden und in den letzten Tests niedriger sind. </li> <h3> Andere Vorsichtsmaßnahmen </h3> <p> Angenommen, wir geben Kritikpunkte gegen die Verwendung genannter globaler Variablen auf und verwenden sie weiterhin. alles Gute. Es gibt jedoch einige Dinge, die Sie möglicherweise berücksichtigen möchten, wenn Sie dies tun. </p> <h4> Polyfills </h4> <p> mag extrem klingen, aber diese Arten globaler Überprüfungen sind typische Einrichtungsanforderungen für Polyfills. Schauen Sie sich das folgende Beispiel an. Wir setzen einen Cookie mit der neuen Cookiestore -API ein und polyerieren sie in einem Browser, der sie noch nicht unterstützt: </p> <pre class="brush:php;toolbar:false">&lt;div id=&quot;cool&quot;&gt;&lt;/div&gt;</pre> <p> Dieser Code funktioniert gut in Chrome, aber in Safari wirft der folgende Fehler aus: </p> <pre class="brush:php;toolbar:false">var el = querySelector(&quot;#cool&quot;);</pre> <p> Zum Zeitpunkt des Schreibens unterstützt Safari die Cookiestore -API nicht. Daher wird Polyfill nicht angewendet, da die IMG -Element -ID eine globale Variable erstellt, die mit der globalen Variablen der Cookiestore in Konflikt steht. </p> <h4> JavaScript -API -Update </h4> <p> Wir können die Situation ändern und ein anderes Problem finden, dh Aktualisierungen der JavaScript -Engine des Browsers können die globale Referenz des benannten Elements brechen. </p> <p> Beispiel: </p> <pre class="brush:php;toolbar:false">window.foo = &quot;bar&quot;;</pre> <p> Dieses Skript bezieht sich auf das Eingabeelement und ruft Focus () darauf. Es funktioniert gut. Wir wissen jedoch nicht, wie lange es funktionieren wird. </p> <p> Sie sehen, dass die globalen Variablen, mit denen wir die Eingabeelemente verweisen, aufhören zu arbeiten, sobald der Browser die Barcodedetektor -API unterstützt. Zu diesem Zeitpunkt ist das Fenster. </p> <h3> Schlussfolgerung </h3> <p> Lassen Sie uns zusammenfassen, wie wir zu diesem Punkt gekommen sind: </p> <ul> <li> Alle wichtigen Browser erstellen automatisch globale Verweise auf jedes DOM -Element mit einer ID (oder in einigen Fällen das Namensattribut). </li> <li> Zugriff auf diese Elemente durch ihre globale Referenz ist unzuverlässig und kann gefährlich sein. Bitte verwenden Sie stattdessen <code>querySelector oder getElementById.
• Da automatisch globale Referenzen generiert werden, haben sie möglicherweise einige Nebenwirkungen auf Ihren Code. Dies ist ein guter Grund, das ID -Attribut zu vermeiden, es sei denn, Sie benötigen es.

Letztendlich ist es am besten, benannte globale Variablen in JavaScript zu vermeiden. Ich habe früher zitiert, was die Spezifikation darüber aussagt, was den "Gebrechlichkeitscode" verursacht, aber hier ist der vollständige Text, um dies zu betonen:

im Allgemeinen wird es zu einem fragilen Code führen. Welche IDs diese API möglicherweise im Laufe der Zeit zuordnen, z. B. als neue Funktionen zur Webplattform hinzugefügt werden. Tun Sie dies nicht, verwenden Sie document.getElementById() oder document.querySelector().

Ich denke, die HTML -Spezifikation selbst schlägt vor, diese Funktion zu vermeiden.