Interesante sachen ,onload = function () {} wird als schädlich angesehen

onload = function () {} wird als schädlich angesehen

Schädliches Muster

Es scheint ein neues Muster zu sein , erscheint auf dem Web - Fenster laden Hörer durch die nicht angemeldete Zuordnung Befestigung:

  onload = function(){
    /* ... */
  };

Ich möchte erklären, warum es eine gute Idee ist, dies zu vermeiden .

Ein herkömmlicher Ansatz zur Ausführung dieser Aufgabe besteht darin, die window.onloadEigenschaft explizit zuzuweisen . Das heißt, andere Mittel wie DOM L2-Methoden addEventListener(sowie proprietäre attachEvent) oder intrinsische Ereignisattribute werden nicht gezählt <body onload="...">:

  window.onload = function(){
    /* ... */
  };

Wie funktioniert es?

Eine verlockende „kurze“ Version nutzt die lockere Javascript-Art in Bezug auf Variablendeklarationen. In JavaScript wird durch Zuweisen zu einer nicht deklarierten Variablen eine Eigenschaft für ein globales Objekt erstellt - eine globale Eigenschaft. Da Globales Objekt in Browsern normalerweise ein windowObjekt ist (oder sich zumindest häufig so verhält), führt eine nicht deklarierte Zuweisung im Wesentlichen zur Erstellung von Eigentum an window. Solange Global Object und windowdieselbe Entität sind window.onload = ...und onload = ...identische Ergebnisse haben sollten. Zumindest ist dies in der Theorie so, und in der Praxis gibt es weitere Implikationen, wie Sie später sehen werden.

Also, wenn zwei identisch sind, warum würden wir jemals eine längere Version bevorzugen?

Weil kürzere auf nicht angemeldeten Einsatz angewiesen sind .

Wen interessiert das?

Nicht angemeldete Aufträge werden zu Recht seit langem verpönt. Lokal deklarierte globale Variablen sind schwer zu pflegen und verursachen im Allgemeinen Verwirrung. Es ist nicht immer klar, ob solche Aufträge beabsichtigt sind oder nur ein Versehen. Aus diesem Grund haben Validierer wie JSLint Warnungen ausgegeben, wenn sie auf sie gestoßen sind.

MSHTML-Besonderheiten

Ein weiterer Grund, nicht deklarierte Zuweisungen zu vermeiden, ist das eher destruktive Verhalten von MSHTML DOM. Wenn im Internet Explorer eine nicht deklarierte Zuweisung erfolgt, wird ein unklarer Fehler ausgegeben, wenn der Bezeichner als ID oder Name eines der Elemente in einem Dokument angegeben wird:

  <p id="foo"></p>
  <form name="bar" action=""><p></p></form>

  <script type="text/javascript">
    try {
      foo = 1;
    }
    catch(e) {
      document.write(e); // TypeError: Object doesn't support this property or method
    }
    try {
      bar = 1;
    }
    catch(e) {
      document.write(e); // ReferenceError: Illegal assignment
    }
  </script>

Beachten Sie, dass einfache Variablendeklarationen im globalen Bereich oder explizite Zuweisungen keine derartigen Probleme haben:

  <p id="foo"></p>
  <form name="bar" action=""><p></p></form>

  <script type="text/javascript">
    var foo = 1; // declares (and initializes) global `foo` variable
    window.foo = 1; // assigns to a "foo" property of `window` object
    this.foo = 1; // assigns to a "foo" property of Global Object
  </script>

Aber "onload" ist anders!

Technisch gesehen kann der Fall mit onload = function(){ }einer Ausnahme betrachtet werden. Schließlich ist die Absicht, globales onloadEigentum zu schaffen , dort ziemlich klar. Es ist auch unwahrscheinlich, dass es ein Element mit einer solchen ID / einem solchen Namen gibt ( obwohl Sie es nie wissen! ). Es gibt jedoch ein weiteres Problem, und dieses Problem ist der strikte Modus der 5. Ausgabe von ECMA-262 - ein Standard für eine bevorstehende Version der ECMAScript-Sprache, der erst vor wenigen Tagen offiziell genehmigt wurde.

Streng was?

Der strikte Modus setzt eine höhere Sicherheitsstufe für ein ECMAScript-Programm (oder einen Teil davon) voraus: Vermeiden Sie Funktionen, die als fehleranfällig oder ineffizient gelten. strengere Fehlerprüfung anwenden; Mehr Leistung bieten. Eine dieser "strengeren Fehlerprüfungen" ist die mit nicht deklarierten Zuweisungen, die einfach Fehler auslösen :

  "use strict";
  onload = function(){ // ReferenceError
    /* ... */
  };
  window.onload = function(){ // Works as expected
    /* ... */
  };

Nun ist es erwähnenswert, dass nicht alle Browser Fehler auslösen würden . Einige von ihnen (z. B. WebKit) haben tatsächlich Eigenschaften, die Ereignishandlern entsprechen, wie z. B. "onload", die implizit deklariert wurden, bevor das Skript ausgeführt wird. Diejenigen, die dies nicht tun - wie Firefox oder Opera - würden kläglich scheitern.

  "onload" in window; // true in WebKit, but not Firefox or Opera
  window.onload; // `null` in WebKit, `undefined` in Firefox or Opera
  onload; // `null` in WebKit, ReferenceError in Firefox or Opera

Ist es wirklich wichtig?

Es ist gut zu verstehen, dass der strikte Modus keine Voraussetzung ist , sondern lediglich eine Option. Es gibt strengere Regeln für diejenigen, die es brauchen und bereit sind, mit den Konsequenzen umzugehen (und sie zu genießen). Wenn Sie also vorhaben, Ihren Code „strikt“ zu gestalten, sollten Sie nicht deklarierte Zuweisungen vermeiden - auch wenn sie so unschuldig aussehen wie Onload-Zuweisungen.