Comment éviter les fonctionnalités et l'inférence du navigateur dans JS

Cette fois, je vais vous montrer comment éviter les fonctionnalités et l'inférence du navigateur dans JS, et quelles sont les précautions pour éviter les fonctionnalités et l'inférence du navigateur dans JS. Voici un cas pratique, jetons un coup d'œil.

Une utilisation inappropriée de la détection de fonctionnalités est "l'inférence de fonctionnalités". L'inférence de fonctionnalités tente d'utiliser plusieurs fonctionnalités mais n'en vérifie qu'une seule. Déduire la présence d’une fonctionnalité à partir de la présence d’une autre fonctionnalité. Le problème est que les déductions sont des hypothèses qui ne sont pas des faits et peuvent entraîner des problèmes de maintenance. Par exemple, voici un ancien code qui utilise l'inférence de fonctionnalités :

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

Cette fonction est la pire version de l'inférence de fonctionnalités et fait les inférences suivantes :

Si document.getElementsByTagName( ) existe , alors document.getElementById existe également. En effet, l’hypothèse est que l’existence d’une méthode DOM implique l’existence de toutes les méthodes.

Si window.ActiveXObject existe, document.all existe également. Cette inférence conclut essentiellement que window.ActiveXObject n'existe que dans IE et document.all n'existe que dans IE, donc si vous déterminez que l'un existe, les autres doivent également exister. En fait, certaines versions d'Opera prennent également en charge document.all.

Si aucune de ces déductions n'est vraie, il doit s'agir de Netscape Navigator 4 ou d'une version antérieure. Cela semble correct, mais c'est extrêmement vague.

Vous ne pouvez pas déduire la présence d'une fonctionnalité de la présence d'une autre. Au mieux, il existe un lien faible entre les deux, au pire, il n’y a aucune relation directe. C'est comme dire : "S'il ressemble à un canard, il doit cancaner comme un canard."

2.8.4 Évitez les inférences du navigateur

À un moment donné, la détection du proxy et la détection des fonctionnalités de l'utilisateur confondent. de nombreux développeurs Web. Le code écrit devient donc comme ceci :

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

Le problème avec ce code est qu'il détermine indirectement si le navigateur est IE en détectant document.all. Une fois qu'il est déterminé que le navigateur est IE, il est supposé que le document.uniqueID unique à IE peut être sûr utilisé. Cependant, toutes les détections que vous effectuez indiquent uniquement si document.all existe et ne peuvent pas être utilisées pour déterminer si le navigateur est IE. Ce n'est pas parce que document.all existe que document.uniqueID est également disponible. Il s'agit donc d'une inférence implicite erronée qui peut empêcher le code de s'exécuter correctement.

Afin d'exprimer le problème plus clairement, le code a été modifié comme suit :

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

Modifié comme suit :

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

Ce changement reflète une idée fausse sur "N'utilisez pas la détection des agents utilisateurs". Bien que cela ne détecte pas directement un navigateur spécifique, c'est également une mauvaise idée de déduire un navigateur spécifique via la détection de fonctionnalités. C'est ce qu'on appelle l'inférence du navigateur et c'est une mauvaise pratique.

À un moment donné, les développeurs ont réalisé que document.all n'était pas réellement le meilleur moyen de savoir si le navigateur était IE. Le code précédent ajoute plus de détection de fonctionnalités, comme indiqué ci-dessous :

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

Cette méthode est de type "intelligente". Il est tout simplement trop difficile d'essayer de déduire quelque chose à partir d'un nombre croissant de propriétés connues. Ce qui est pire, c'est que vous ne pouvez rien faire pour empêcher d'autres navigateurs d'implémenter la même fonctionnalité, ce qui fait que ce code renvoie des résultats peu fiables.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisation des annotations Polyfill et prévention des modifications dans JS

Explication détaillée de l'utilisation du mode façade JS cas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!