So vermeiden Sie Funktionen und Browser-Inferenzen in JS

Dieses Mal zeige ich Ihnen, wie Sie Funktionen und Browser-Rückschlüsse in JS vermeiden und welche Vorsichtsmaßnahmen es gibt, um Funktionen und Browser-Rückschlüsse in JS zu vermeiden. Schauen wir uns das hier an einem praktischen Fall an.

Eine unangemessene Verwendung der Merkmalserkennung ist „Merkmalsinferenz“. Bei der Feature-Inferenz wird versucht, mehrere Features zu verwenden, es wird jedoch nur eines davon überprüft. Das Vorhandensein eines Merkmals aus dem Vorhandensein eines anderen Merkmals ableiten. Das Problem besteht darin, dass Schlussfolgerungen Annahmen sind, die keine Fakten sind und zu Wartungsproblemen führen können. Hier ist zum Beispiel ein alter Code, der Feature-Inferenz verwendet:

// 不好的写法 - 使用特性推断function getById (id) {  var el = null;  if (
document
.
getElementsByTagName
) { // DOM
    el = document.getElementById(id);
  } else if (window.ActiveX
Object
) { // IE
    el = document.all[id];
  } else { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

Diese Funktion ist die schlechteste Feature-Inferenz und zieht die folgenden Schlussfolgerungen:

Wenn document.getElementsByTagName() existiert, dann document.getElementById existiert ebenfalls. Tatsächlich wird davon ausgegangen, dass die Existenz einer DOM-Methode auf die Existenz aller Methoden schließen lässt.

Wenn window.ActiveXObject existiert, existiert auch document.all. Diese Schlussfolgerung kommt grundsätzlich zu dem Schluss, dass „window.ActiveXObject“ nur im IE und „document.all“ nur im IE existiert. Wenn Sie also feststellen, dass eines existiert, müssen die anderen auch existieren. Tatsächlich unterstützen einige Versionen von Opera auch document.all.

Wenn keine dieser Schlussfolgerungen zutrifft, muss es sich um Netscape Navigator 4 oder eine frühere Version handeln. Das scheint richtig, ist aber extrem locker.

Man kann nicht aus dem Vorhandensein eines anderen auf das Vorhandensein eines Merkmals schließen. Im besten Fall besteht zwischen beiden eine schwache Verbindung, im schlimmsten Fall überhaupt kein direkter Zusammenhang. Es ist, als würde man sagen: „Wenn es wie eine Ente aussieht, muss es wie eine Ente schnattern.“

2.8.4 Browser-Schlussfolgerungen vermeiden

Irgendwann verwechseln die Benutzer-Proxy-Erkennung und die Funktionserkennung viele Webentwickler. Der geschriebene Code sieht also so aus:

// 不好的写法if (document.all) {
  id = document.uniqueID;
} else {
  id = Math.random();
}

Das Problem mit diesem Code besteht darin, dass er indirekt bestimmt, ob es sich bei dem Browser um den IE handelt, indem er document.all erkennt. Sobald festgestellt wurde, dass es sich bei dem Browser um den IE handelt, wird davon ausgegangen, dass die für den IE eindeutige document.uniqueID sicher verwendet werden kann. Die gesamte von Ihnen durchgeführte Erkennung zeigt jedoch nur an, ob document.all vorhanden ist, und kann nicht verwendet werden, um festzustellen, ob es sich bei dem Browser um einen IE handelt. Nur weil „document.all“ vorhanden ist, heißt das nicht, dass „document.uniqueID“ auch verfügbar ist. Dies ist also eine falsche implizite Schlussfolgerung, die dazu führen kann, dass der Code nicht ordnungsgemäß ausgeführt wird.

Um das Problem klarer auszudrücken, wurde der Code wie folgt geändert:

var isIE = navigator.userAgent.indexOf("MSIE") > -1;

wurde wie folgt geändert:

// 不好的写法var isIE = !!document.all;

Diese Änderung spiegelt eine Änderung im „Don „Benutzeragentenerkennung nicht verwenden“-Missverständnis. Obwohl ein bestimmter Browser nicht direkt erkannt wird, ist es auch eine schlechte Idee, durch Funktionserkennung auf einen bestimmten Browser zu schließen. Dies wird als Browser-Inferenz bezeichnet und ist eine schlechte Vorgehensweise.

Irgendwann erkannten die Entwickler, dass document.all eigentlich nicht die beste Methode war, um festzustellen, ob es sich bei dem Browser um den IE handelte. Der vorherige Code fügt weitere Funktionserkennung hinzu, wie unten gezeigt:

var isIE = !!document.all && document.uniqueID;

Diese Methode ist vom Typ „smarty“. Es ist einfach zu schwierig, aus einer zunehmenden Anzahl bekannter Eigenschaften etwas abzuleiten. Was noch schlimmer ist, ist, dass Sie nichts tun können, um zu verhindern, dass andere Browser dieselbe Funktionalität implementieren, was dazu führt, dass dieser Code unzuverlässige Ergebnisse zurückgibt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Die Verwendung von Polyfill-Anmerkungen und das Verhindern von Änderungen in JS

Detaillierte Erläuterung der Verwendung des JS-Fassadenmodus Fälle

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie Funktionen und Browser-Inferenzen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!