Wenn die Erkennung von JavaScript -Funktionen fehlschlägt

Schlüsselpunkte

• JavaScript -Feature -Erkennung (Testfunktionen, die Programmierer verwenden möchten) ist nicht immer zuverlässig. Testen Sie beispielsweise ActiveXObject im Internet Explorer auf AJAX -Anforderungen, HTML -Attribute, die den DOM -Eigenschaften, Annahmen zum Benutzerverhalten (z. B. Erkennung von Berührungsgeräten) usw. zugeordnet sind, usw.
• Wenn die Merkmalserkennung fehlschlägt, ist manchmal die Browsererkennung erforderlich. Es wird jedoch empfohlen, proprietäre Objekttests anstelle von Navigatorinformationen zu verwenden und sie zu verwenden, um Browser auszuschließen, anstatt sie einzuschließen.
• Seien Sie bei der Implementierung der Browsererkennung äußerst vorsichtig. Gehen Sie immer davon aus, dass es vollständig mit Feature -Tests übereinstimmt, und suchen Sie nur nach Browsererkennung, wenn Sie wissen, dass eine Funktion nicht wie erwartet funktioniert. Darüber hinaus kann die für Objekt- und Merkmalstests verwendete Syntax die Erfolgsrate der Erkennung beeinflussen, sodass die Auswahl der richtigen Syntax entscheidend ist.

Einmal war die Browsererkennung die beste Fähigkeit von JavaScript -Programmierern. Wenn wir wissen, dass einige Funktionen in IE5 funktionieren, jedoch nicht in Netscape 4, werden wir den Browser testen und den Code entsprechend ändern. Zum Beispiel:

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

Aber als ich zum ersten Mal in die Branche kam, hatte das Wettrüsten bereits begonnen! Anbieter fügen den Saiten von Benutzeragenten zusätzliche Werte hinzu, sodass sie wie die Browser ihrer Konkurrenten und ihre eigenen aussehen. Dies ist beispielsweise Safari 5 für Mac:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Dies entspricht Tests für "Safari", "Webkit" und "KHTML" (die Konqueror -Codebasis, die Webkit basiert); Mozilla "" (aus historischen Gründen behauptet fast jeder Browser, Mozilla zu sein).

Der Zweck des Hinzufügens aller dieser Werte besteht darin, die Browsererkennung zu umgehen. Wenn das Skript davon ausgeht, dass nur Firefox bestimmte Funktionen bewältigen kann, kann Safari ausgeschlossen werden, auch wenn es funktioniert. Vergessen Sie nicht, dass Benutzer ihren Benutzeragenten selbst ändern können. Ich habe meinen Browser so festgelegt, dass ich "GoogleBot/1.0" erkannte, damit ich auf das zugreifen kann, was der Site -Besitzer nur für das Kriechen hält!

Im Laufe der Zeit ist diese Art von Browsererkennung zu einem unmöglichen Chaos geworden und ist weitgehend nicht mehr in Gebrauch, ersetzt durch etwas Besseres - Feature -Erkennung.

Die Funktionserkennung besteht nur darin, die von uns gebrauchten Funktionen zu testen. Wenn wir beispielsweise getBoundingClientRect benötigen (die Position eines Elements relativ zum Ansichtsfenster erhalten), ist es wichtig, ob der Browser es nicht kann, nicht welcher Browser es ist. schlimmer als das Testmerkmal selbst:

Browser, die diese Funktion nicht unterstützen, gibt den "undefinierten" Typ zurück, sodass die Bedingung nicht übergeben wird. Ohne das Skript in einem bestimmten Browser zu testen, wissen wir, dass es entweder korrekt funktioniert oder stillschweigend fehlschlägt.

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

oder wir ...?

Aber die Wahrheit ist - die Erkennung von Merkmalen ist nicht ganz zuverlässig - manchmal fehlschlägt sie. Schauen wir uns jetzt einige Beispiele an und sehen, was wir tun können, um jeden Fall zu lösen.

ActiveX -Objekt

Das vielleicht berühmteste Beispiel für den Fehler bei der Erkennung von Funktionen ist das Testen von ActiveXObject für AJAX -Anforderungen im Internet Explorer.

activeX ist ein Beispiel für verspätete Objekte, und die praktische Bedeutung ist, dass Sie nicht wissen, ob es unterstützt wird , bis Sie versuchen, es zu verwenden. Wenn der Benutzer ActiveX deaktiviert, wirft der folgende Code daher einen Fehler aus:

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

Um dies zu beheben, müssen wir die Ausnahmebehandlung verwenden -

Versuchen Sie das Objekt instanziieren, fangen alle Fehler und verarbeiten Sie es entsprechend:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

HTML -Attribut, das dem DOM -Attribut

zugeordnet ist

Attributzuordnung wird häufig verwendet, um die Unterstützung von APIs mit HTML5 -Eigenschaften zu testen. Überprüfen Sie beispielsweise, ob ein Element mit

die draggierbare API unterstützt, indem Sie nach draggablen Eigenschaften suchen: [draggable="true"]

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

Das Problem hier ist, dass IE8 oder früher alle

HTML -Eigenschaften auf DOM -Eigenschaften automatisch zugeordnet werden. Aus diesem Grund ist in diesen älteren Versionen so verwirrend, da es überhaupt keine Eigenschaften, sondern DOM -Eigenschaften zurückgibt. getAttribute Dies bedeutet, wenn wir ein Element verwenden, das bereits das Attribut

hat:

dann, selbst wenn sie nicht unterstützt werden, wird IE8 oder früher

für

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

zurückgegeben.

true Attribut kann alles sein: ("draggable" in element)

Aber das Ergebnis wird das gleiche sein - IE8 oder früher wird

für

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}

zurückgeben.

true In diesem Fall besteht die Lösung darin, ein Element zu verwenden, das dieses Attribut zum Testen nicht hat. Die sicherste Möglichkeit besteht darin, das erstellte Element zu verwenden: ("nonsense" in element)

Annahmen über Benutzerverhalten

if ("draggable" in element) {
  // 浏览器支持拖放
}

Sie haben möglicherweise den folgenden Code verwendet, um Berührungsgeräte zu erkennen:

Die meisten Touch -Geräte implementieren manuelle Verzögerungen, bevor ein Klickereignis ausgelöst wird (normalerweise etwa 300 Millisekunden), um zu vermeiden, dass Sie auf Elemente klicken und gleichzeitig klicken. Dadurch fühlt sich die Anwendung jedoch träge und nicht mehr an. Daher verwenden Entwickler diesen Funktionstest manchmal, um das Ereignis zu geben:

<div draggable="true"> ... </div>

Diese Bedingung stammt jedoch aus einem

-Fehler des

<div nonsense="true"> ... </div>

- Da das Gerät Berührung unterstützt, wird Berührung verwendet. Aber was ist mit Touchscreen -Laptops? Der Benutzer berührt möglicherweise den Bildschirm oder verwendet eine Maus oder einen Trackpad.

In diesem Fall besteht die Lösung darin, Ereignisunterstützung überhaupt nicht zu testen - stattdessen zwei

Ereignisse gleichzeitig zu binden und dann

zu verhindern, dass die Berührung Klicks erzeugt:

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

Dinge, die überhaupt nicht funktionieren

Dies ist schmerzhaft, aber manchmal müssen wir nicht das Feature testen - , sondern der Browser - weil ein bestimmter Browser behauptet, etwas zu unterstützen, das nicht funktioniert. Ein aktuelles Beispiel ist setDragImage() in Opera 12 (was eine Möglichkeit ist, dataTransfer Objekte zu ziehen und zu fallen).

Feature -Test schlägt hier aus, da Opera 12 behauptet, dies zu unterstützen. Es funktioniert einfach nicht:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Nun, wenn Sie nur versuchen möchten, ein benutzerdefiniertes Drag -Image hinzuzufügen und den Standardwert ohne Unterstützung beizubehalten (was passieren wird), kann dies in Ordnung sein. Aber was ist, wenn Ihre Anwendung benutzerdefinierte Bilder benötigt, damit Browser, die sie nicht unterstützen, eine völlig andere Implementierung verwenden sollte (d. H. Verwenden Sie benutzerdefinierte JavaScript, um alle Dragverhalten zu implementieren)? Oder was ist, wenn der Browser bestimmte Merkmale implementiert, aber unvermeidliche Rendering -Fehler gibt? Manchmal haben wir keine andere Wahl, als den problematischen Browser explizit zu erkennen und ihn aus den Funktionen auszuschließen, die er mit dem mit der Verwendung versuchte.

Das Problem wird also - was ist der sicherste Weg, um die Browsererkennung zu erzielen?

Ich habe zwei Vorschläge:

bevorzugen proprietäre Objekttests über Navigatorinformationen.

1. Verwenden Sie dies, um Browser auszuschließen, anstatt sie einzubeziehen.
Zum Beispiel können Sie

Objekterkennungsoper 12 oder früher verwenden, sodass wir diesen Ausschluss verwenden können, um die draggable Unterstützung zu testen:

window.opera

Es ist besser, proprietäre Objekte anstelle von Standardobjekten zu verwenden, da sich die Testergebnisse, wenn ein neuer Browser freigegeben wird, wahrscheinlich nicht ändern. Hier sind einige meiner Lieblingsbeispiele:

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

Objekttests können auch in Verbindung mit Feature -Test

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

verwendet werden, um die Unterstützung bestimmter Merkmale in einem bestimmten Browser zu bestimmen, oder im Notfall präzisere Browserbedingungen definieren:

Wir haben festgestellt, dass Benutzeragentenketten ein unzuverlässiges Chaos sind, aber Anbieterketten tatsächlich ziemlich vorhersehbar sind und verwendet werden können, um Chrom oder Safari zuverlässig zu testen:

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}

Die goldene Regel für all dies ist äußerst vorsichtig. Stellen Sie sicher Bekannte Merkmale (dies ist der Zweck des Feature -Tests)

if ("draggable" in element) {
  // 浏览器支持拖放
}

nehmen Sie im Grunde immer an, dass der Feature -Test vollständig im Einklang mit dem Feature -Test steht - es sei denn, Sie wissen, dass dies nicht der Fall ist. Die Funktion funktioniert wie erwartet.

Testsyntax auswählen Vor dem Ende möchte ich die verschiedenen Arten von Syntax überprüfen, die wir für Objekt- und Eigenschaftstests verwenden können. Zum Beispiel ist die folgende Syntax in den letzten Jahren üblich geworden:

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

Wir konnten es in der Vergangenheit nicht verwenden, weil IE5 und seine ähnlichen Produkte aufgrund von Syntax Fehler werfen würden.

im Wesentlichen ist es genau das gleiche wie die folgenden, aber es ist kürzer zu schreiben:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Die Testbedingungen beruhen jedoch normalerweise auf automatische Typumwandlung:

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

Wir haben diese Syntax früher in einigen Browser -Objekt -Tests (z. B. window.opera Tests) verwendet, was aufgrund der Art und Weise, wie Objekte bewerten als falsch bewertet werden.

Aber wir testen möglicherweise etwas, das null oder leere Zeichenfolgen effektiv zurückgibt, die beide auf False bewerten. Zum Beispiel wird das style.maxWidth Attribut manchmal verwendet, um IE6:

auszuschließen

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

Es wird nur zu true bewertet, wenn das maxWidth Attribut unterstützt wird und der den Autor definierte Wert hat. Wenn wir also den Test so schreiben, kann er fehlschlagen:

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}

Die allgemeine Regel lautet: Die Herstellung der automatischen Typumwandlung ist für Objekte und Funktionen sicher, aber nicht unbedingt sicher für Zeichenfolgen und Zahlen oder Werte, die null sein können.

, das gesagt - wenn Sie es sicher verwenden können, tun Sie es, weil es in modernen Browsern normalerweise viel schneller ist (wahrscheinlich weil sie für diese Art von Zustand optimiert sind).

Weitere Informationen hierzu finden Sie unter: Automatische Konvertierung in der realen Welt.

häufig gestellte Fragen zur JavaScript -Funktionserkennung

Was ist die Erkennung von JavaScript -Funktionen und warum ist es wichtig?

JavaScript -Feature -Erkennung ist eine Technologie, die von Entwicklern verwendet wird, um festzustellen, ob der Browser eines Benutzers eine bestimmte Funktion oder API unterstützt. Dies ist entscheidend, da nicht alle Browser alle Funktionen von JavaScript unterstützen. Durch die Verwendung von Feature -Erkennung können Entwickler alternative Lösungen oder Fallbacks für nicht unterstützte Funktionen bereitstellen und sicherstellen, dass Websites oder Anwendungen in verschiedenen Browsern korrekt ausgeführt werden. Dies verbessert die Benutzererfahrung und gewährleistet die Kompatibilität.

Wie fällt die Erkennung von JavaScript -Funktionen aus?

JavaScript -Merkmalserkennung kann aus mehreren Gründen fehlschlagen. Ein häufiger Grund ist, dass der Feature -Erkennungscode falsch implementiert wird. Wenn der Code beispielsweise nach Eigenschaften prüft, die im Objekt nicht vorhanden sind, gibt er undefinierter und führt zu einem falsch negativen Negativ zurück. Ein weiterer Grund könnte eine Browser -Quirk oder ein Fehler sein, der dazu führen kann, dass die Merkmalserkennung ungenaue Ergebnisse liefert.

Was ist der Unterschied zwischen Merkmalserkennung und Browsererkennung?

Die Funktionserkennung von Features besteht darin, zu überprüfen, ob der Browser eines Benutzers eine bestimmte Funktion oder eine bestimmte API unterstützt, während die Browsererkennung den Browser und die Version des Benutzers erkennt. Während beide Techniken so konzipiert sind, dass die Kompatibilität und Funktionalität sichergestellt wird, wird die Erkennung von Merkmalen häufig als bessere Praxis angesehen, da sie direkt auf Funktionen überprüft, anstatt ihre Unterstützung basierend auf dem Browsertyp oder -version zu übernehmen.

Wie kann ich JavaScript verwenden, um mobile Geräte zu erkennen?

Sie können das Attribut navigator.userAgent in JavaScript verwenden, um mobile Geräte zu erkennen. Diese Eigenschaft gibt eine Zeichenfolge zurück, die den User Agent Header des Browsers darstellt. Durch die Überprüfung von bestimmten Schlüsselwörtern in dieser Zeichenfolge (z. B. "Android", "iPhone" oder "iPad") können Sie feststellen, ob sich der Benutzer auf einem mobilen Gerät befindet.

Was ist feature.js und wie hilft es bei der Funktionserkennung?

feature.js ist ein leichtes, schnelles und einfaches JavaScript -Dienstprogramm zur Erkennung von Funktionen. Es bietet eine benutzerfreundliche API, mit der Entwickler testen können, ob der Browser bestimmte Funktionen unterstützt. Dies bietet eine Sicherungslösung oder alternative Lösung für nicht unterstützte Funktionen, wodurch die Kompatibilität und Funktionalität der Website oder Anwendung verbessert wird.

Was ist Modernizr und wie hilft es bei der Erkennung von Funktionen?

modernizr ist eine JavaScript -Bibliothek, die Entwicklern hilft, HTML5- und CSS3 -Funktionen zu nutzen und gleichzeitig die Kompatibilität mit älteren Browsern aufrechtzuerhalten. Es wird die Funktionserkennung verwendet, um zu überprüfen, ob der Browser bestimmte Funktionen unterstützt und HTML -Elemente Klassen hinzufügt, sodass Sie bestimmte Browserfunktionen in Stylesheets oder JavaScript finden können.

Wie verwenden Sie das Paket für Geräte-Detektor-JS zur Funktionserkennung?

Das Paket

Geräte-Detektor-JS ist ein leistungsstarkes Tool für die Erkennung von Geräten. Es analysiert User Agent Strings und erkennt Smartphones, Tablets, Desktops, Fernseher und andere Geräte. Es erkennt auch Browser, Motoren, Betriebssysteme und andere nützliche Informationen. Sie können dieses Paket verwenden, um das Verhalten einer Website oder Anwendung basierend auf den erkannten Geräten anzupassen.

Was sind einige Best Practices für die Implementierung der Funktionserkennung?

Einige Best Practices für die Implementierung von Funktionen sind: Verwenden von zuverlässigen und getesteten Bibliotheken wie Modernizr oder Feature.js, gründlich testen Sie Ihren Feature -Erkennungscode auf verschiedenen Browsern und Geräten, da nicht unterstützte Funktionen alternative Lösungen oder Fallbacks liefern und die Übernahme von Merkmalsunterstützung vermeiden können basierend auf Browsertyp oder -version.

Kann die Erkennung von Erkenntnissen helfen, die Leistung der Website zu verbessern?

Ja, die Erkennung von Funktionen kann die Leistung der Website verbessern. Indem Sie nicht unterstützte Funktionen erkennen und alternative Lösungen oder Fallback -Lösungen bereitstellen, können Sie verhindern, dass unnötiger Code im Browser ausgeführt wird. Dies verkürzt die Ladezeit und verbessert die Gesamtleistung der Website.

Wie kann man die neuesten Funktionen verstehen, die von verschiedenen Browsern unterstützt werden?

Aufgrund der schnellen Entwicklung der Webentwicklung kann es schwierig sein, die neuesten Funktionen zu verstehen, die von verschiedenen Browsern unterstützt werden. Ressourcen wie das Mozilla Developer Network (MDN), kann ich jedoch verwenden, und JavaScript -Dokumentation kann die neuesten Informationen zur Funktionsunterstützung in verschiedenen Browsern liefern.

Das obige ist der detaillierte Inhalt vonWenn die Erkennung von JavaScript -Funktionen fehlschlägt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!