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

今回は、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 サイトの他の関連記事を参照してください。