2017-09-03 2 views
3

In einem sehr allgemeinen Codebeispiel bei der Javascript-Ereignisdelegation https://javascript.info/event-delegation bin ich verwirrt darüber, woher die Variable "Menü" in Zeile 40 in http://plnkr.co/edit/91Q9jINXlue2fXiB0fAY?p=preview stammt. Die Variable wird an den Konstruktor übergeben, jedoch niemals initialisiert. Es erscheint die Variable „Menü“ automatisch aus diesem div-Elemente erstellt wird:Spezifizieren Sie globale Variablen in Javascript initialisiert von DOM-Elementen?

<div id="menu">...</div> 
<script> 
... 
new Menu(menu); /* Who initializes "menu". 
... 
</script> 

Ich habe für eine lange Zeit Javascript getan noch das für mich wirklich verwirrend ist. Ich bin mir auch nicht sicher, wie ich diese Frage verallgemeinern soll.

Normalerweise würde ich ein document.getElementById ("Menü") tun, um das div-Element zu erhalten. Wo werden diese Variablen initialisiert und wie kann ich mehr über Variablen wie diese herausfinden? Gibt es eine Spezifikation?

+1

aparantly seine in der Dokumentation https://html.spec.whatwg.org/#named-access-on-the-window-object – Caramiriel

+0

Können Sie ein Name für diese Globalisierung von ID-Variablen und Informationen darüber, was sonst noch in eine globale Variable umgewandelt wird? –

+0

Nachdem ich ein bisschen mehr gelernt habe, habe ich die Frage umbenannt, um allgemeiner zu sein. –

Antwort

0

Diese Variable wird automatisch vom Browser und einem Mitglied des Fensterelements generiert.

Der HTML5-Standard spezifiziert, dass das Fensterobjekt eine Eigenschaft haben muß Schlüssel dessen Wert Elem if ...

  • genau ein DOM-Element ist Elem deren Eigenschaft id hat den Wert Schlüssel.
  • gibt es genau ein DOM-Element elem dessen Eigenschaft name den Wert Schlüssel hat. sein Tag muss der Elem eines von: a, applet, area, embed, form, frame, frameset, iframe, img, object.

Die Spezifikation finden Sie hier: https://html.spec.whatwg.org/#named-access-on-the-window-object

+0

Kleiner tiefer danke. Gibt es eine Spezifikation dafür? Scheint jeder auf der Welt außer mir schon über dieses Verhalten Bescheid weiß! Auf der anderen Seite weiß ich, wie es im wirklichen Leben läuft. z.B. (Man kann nie irgendetwas annehmen.) –

+0

Ich habe einen Link hinzugefügt. Es ist gut, solche Dinge zu wissen, besonders wenn man kurze Beispiele oder Demos erstellt. Aber Sie sollten es normalerweise nicht in der Praxis verwenden – maja

+0

Danke Jungs. Ich werde dies als akzeptiert markieren, weil es eine Referenz hat, nach der ich wirklich gesucht habe (sobald ich einen Kontext hatte, was los war). Jetzt, da ich ein paar Stichworte für Hooks habe, sehe ich auch eine nette Diskussion unter https://stackoverflow.com/q/3434278/1620112 mit der gleichen Frage, also könnte das ein Betrüger sein. –

2

Aus dieser Linie kommt:

<div id="menu">...</div> 

Browser DOM-Elemente als globale Variablen mit Namen aussetzen, um ihre id Attributen entsprechen. Dies ist jedoch keine sehr gute Übung, es wird empfohlen, es zu vermeiden, da es ziemlich fehleranfällig und verwirrend ist.

+0

Wie ist der Name dafür. Ich nahm immer an, dass du getElementById() tun musst. –

+1

@CharlieDalsass Du solltest besser die richtigen Methoden verwenden, um DOM-Elemente wie 'getElementById',' querySelector' usw. auszuwählen. Das Beispiel in javascript.info ist ein schlechtes Muster. – dfsq

+0

Ich verstehe, dass es ein schlechtes Muster ist, weshalb ich es wahrscheinlich nie zuvor gesehen habe. Ich würde jedoch gerne verstehen, was dieser Mechanismus ist und mehr darüber erfahren. –

3

I nimmt den Wert des Elements mit der gleichen id.

<div id="menu"> 

Wie durch [Web Hypertext Application Technology Working Group (WHATWG)] :(https://html.spec.whatwg.org/#named-access-on-the-window-object)

7.3.3 Named Zugriff auf das Objekt Window

window[name] 

Gibt die angezeigte Element oder Sammlung von Elementen.

Als allgemeine Regel gilt, dass das Verspröden zu einem spröden Code führt. Welche IDs schließlich auf diese API mappen, kann im Laufe der Zeit variieren, wenn der Webplattform beispielsweise neue Funktionen hinzugefügt werden. Verwenden Sie stattdessen document.getElementById() oder document.querySelector().

+0

Diese Antwort war so ähnlich, nicht sicher, was zu akzeptieren ist. Tut mir leid, Nina, vielleicht werde ich die erste für jetzt verlassen. Kann mich nicht erinnern, wer zuerst geantwortet hat. ;) –