How to avoid features and browser inference in JS

This time I will show you how to avoid features and browser inference in JS, and what are the precautions to avoid feature and browser inference in JS. The following is a practical case, let's take a look.

One inappropriate use of feature detection is "Feature Inference" (Feature Inference). Feature inference attempts to use multiple features but only verifies one of them. Inferring the presence of one feature from the presence of another feature. The problem is that inferences are assumptions that are not facts and can lead to maintenance problems. For example, here is some old code that uses feature inference:

// 不好的写法 - 使用特性推断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;
}

This function is the worst feature inference, and it makes the following inferences:

If document.getElementsByTagName() exists , then document.getElementById also exists. In effect, the assumption is that the existence of one DOM method infers the existence of all methods.

If window.ActiveXObject exists, document.all also exists. This inference basically concludes that window.ActiveXObject only exists in IE, and document.all only exists in IE, so if you determine that one exists, the others must also exist. In fact, some versions of Opera also support document.all.

If none of these inferences are true, it must be Netscape Navigator 4 or an earlier version. This seems correct, but is extremely loose.

You cannot infer the presence of one feature from the presence of another feature. At best there is a weak connection between the two, at worst there is no direct relationship at all. It's like saying, "If it looks like a duck, it must quack like a duck."

2.8.4 Avoid browser inference

At some point, the user Proxy detection and feature detection confuse many web developers. So the code written becomes like this:

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

The problem with this code is that it indirectly determines whether the browser is IE by detecting document.all. Once it is determined that the browser is IE, it is assumed that the document.uniqueID unique to IE can be

safely used. However, all the detection you do only indicates whether document.all exists, and cannot be used to determine whether the browser is IE. Just because document.all exists does not mean that document.uniqueID is also available, so this is a wrong implicit inference that may cause the code to not run properly.

In order to express the problem more clearly, the code was modified to look like this:

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

Modified to look like this:

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

This change reflects a kind of "Don't use User Agent Detection" misunderstanding. Although not directly detecting a specific browser, it is also a bad idea to infer a specific browser through feature detection. This is called browser inference and is a bad practice.

At a certain stage, developers realized that document.all was not actually the best way to determine whether the browser was IE. The previous code adds more feature detection, as shown below:

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

This method is of the "smart-ass" type. It's just too difficult to try to infer something from an increasing number of known properties. What's worse is that there's nothing you can do to prevent other browsers from implementing the same functionality, resulting in this code returning unreliable results.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The use of Polyfill annotations and preventing modifications in JS

Detailed explanation of JS facade mode use cases

The above is the detailed content of How to avoid features and browser inference in JS. For more information, please follow other related articles on the PHP Chinese website!