ホームページ ウェブフロントエンド jsチュートリアル JS での機能とブラウザーの推論を回避する方法

JS での機能とブラウザーの推論を回避する方法

Jun 04, 2018 am 10:54 AM
firefox javascript webkit

今回は、JS で機能とブラウザ推論を回避する方法と、JS で機能とブラウザ推論を回避するための 注意事項 を​​説明します。以下は実際的なケースです。

特徴検出の不適切な使用は「特徴推論」です。特徴推論では複数の特徴の使用が試行されますが、検証されるのはそのうちの 1 つだけです。別のフィーチャの存在に基づいて、あるフィーチャの存在を推測します。問題は、推論が事実ではない仮定であり、メンテナンスの問題を引き起こす可能性があることです。たとえば、これは特徴推論を使用した古いコードです:

// 不好的写法 - 使用特性推断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;
}
ログイン後にコピー

この関数は最悪の特徴推論であり、いくつかの推論を行います:

document.getElementsByTagName() が存在する場合、document.getElementById も存在します。実際には、1 つの DOM メソッドの存在がすべてのメソッドの存在を推測するという前提になります。

window.ActiveXObject が存在する場合、document.all も存在します。この推論は基本的に、window.ActiveXObject は IE にのみ存在し、document.all は IE にのみ存在するという結論に達します。そのため、1 つが存在すると判断した場合、他のものも存在する必要があります。実際、Opera の一部のバージョンは document.all もサポートしています。

これらの推論がいずれも当てはまらない場合は、Netscape Navigator 4 以前である必要があります。これは正しいように見えますが、非常に緩いものです。

ある特徴の存在を別の特徴の存在から推測することはできません。良く言えば両者の間には弱いつながりがあり、悪く言えば直接的な関係が全くありません。それは、「アヒルのように見えるなら、アヒルのように鳴く必要がある」と言っているようなものです。

2.8.4 ブラウザ推論の回避

ある時点で、ユーザー エージェント検出と機能検出は、多くの Web 開発者を混乱させてきました。したがって、書かれたコードは次のようになりました:

// 不好的写法if (document.all) {
  id = document.uniqueID;
} else {
  id = Math.random();
}
ログイン後にコピー

このコードの問題は、document.all を検出することによって、ブラウザーが IE であるかどうかを間接的に判断することです。ブラウザがIEであることが判明したら、IE固有のdocument.uniqueIDを

安全使用できるものとします。ただし、実行されるすべての検出は、document.all が存在するかどうかを示すだけであり、ブラウザーが IE であるかどうかを判断するために使用することはできません。 document.all が存在するからといって、 document.uniqueID も使用できるわけではないため、これは間違った暗黙的な推論であり、コードが適切に実行されない可能性があります。

問題をより明確に表現するために、コードは次のように変更されました:

var isIE = navigator.userAgent.indexOf("MSIE") > -1;
ログイン後にコピー

次のように変更されました:

// 不好的写法var isIE = !!document.all;
ログイン後にコピー

この変更は、「ユーザー エージェント検出を使用しない」という誤解を反映しています。特定のブラウザを直接検出するわけではありませんが、機能検出を通じて特定のブラウザを推測することも悪い考えです。これはブラウザ推論と呼ばれ、悪い習慣です。

ある段階で、開発者は、document.all が実際にはブラウザーが IE かどうかを判断する最良の方法ではないことに気づきました。前のコードは、以下に示すように、さらに多くの機能検出を追加します。

var isIE = !!document.all && document.uniqueID;
ログイン後にコピー

このメソッドは「スマート」タイプです。増え続ける既知の特性から何かを推測しようとするのは非常に困難です。さらに悪いことに、他のブラウザが同じ機能を実装することを防ぐためにできることは何もなく、その結果、このコードは信頼性の低い結果を返すことになります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Polyfill アノテーションの使用と JS での変更の防止

JS ファサード モードのユースケースの詳細な説明

以上がJS での機能とブラウザーの推論を回避する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

Ubuntu LinuxでFirefox Snapを削除するにはどうすればよいですか? Ubuntu LinuxでFirefox Snapを削除するにはどうすればよいですか? Feb 21, 2024 pm 07:00 PM

Ubuntu LinuxでFirefox Snapを削除するにはどうすればよいですか?

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

JavaScriptでinsertBeforeを使用する方法

See all articles