Conception d'un framework JavaScript – compétences en matière de détection de navigateur et de détection de fonctionnalités_javascript

Le reniflage du navigateur n'est plus recommandé, mais il reste nécessaire dans certaines situations. Par exemple, certains scripts statistiques. Dans les navigateurs standards, document.implementation.hasfeature est fourni, mais il est bogué et inexact. Actuellement, le w3c a lancé la méthode CSS.supports, qui montre l'attention de tous sur cet aspect.

1. Déterminez le navigateur.

Les navigateurs grand public incluent, par exemple, Firefox Opera Chorme Safari. Au début, ces frameworks étaient jugés via navigator.userAgent. À l'heure actuelle, presque tous les navigateurs étrangers peuvent juger.

Concernant le script de jugement du navigateur, jQuery a été retiré de l'ontologie et transformé en plug-in. Il existe d'autres façons de présenter,

Pour une détermination pertinente des appareils mobiles, il est recommandé de consulter le code source de jQuery mobile et zepto.

Copier le code Le code est le suivant :

isIPone = /isIPone/i.test(navigator.userAgent);
isIPone4 = window.devicePixelRatio >= 2 //Dans la page Web, le rapport pixel/point est appelé ratio périphérique-pixel. Les appareils ordinaires sont de 1, l'iPhone4 est de 2 et certains modèles Android sont de 1,5
. isIpad = /ipad/i.test(navigator.userAgent)
isAndroid = /android/i.test(navigator.userAgent)
estIOS = isIPone || estIpad

Pour les navigateurs nationaux, vous pouvez consulter Tangrame ou qwrap, qui sont essentiellement des noyaux IE, webkit et Blink.

2. Détection de support d'événement

Kangax, un membre principal du prototype, a écrit un article pour déterminer la prise en charge du navigateur pour certains événements. L'implémentation qui y est donnée est la suivante :

  var isEventSupported = (function() {
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName){
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

Maintenant, jQuery et d'autres frameworks utilisent des versions simplifiées de scripts

Mais quelle que soit la meilleure solution, cette détection ne fonctionne que pour DOM0. Par exemple, DOMMouseScroll DOMContentLoaded DOMFocusIn DOMFocusOut DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInsertedIntoDocument DOMAttrModified DOMCharactorDataModified, qui commence par DOM, est inutile.

Certains de ces événements sont très utiles, comme DOMMouseScroll. Firefox ne prend pas en charge mousesheel et ne peut l'utiliser qu'en remplacement.
DOMContentLoaded est un événement important dans l'implémentation de domReady ; DOMNodeRemoved est utilisé pour déterminer si un élément est supprimé de son nœud parent, qui peut être d'autres nœuds d'élément ou des fragments de document. DOMNodeRemovedFromDocument est éloigné de l'arborescence DOM, et DOMAttrModified était souvent utilisé pour simuler. OnpropertyChange d'IE

CSS3 ajoute deux animations, l'une est une animation de transition et l'autre est une animation d'interpolation d'images clés. Ils utilisent tous des rappels d'événement à la fin de l'événement. Mais lors du processus de normalisation, les noms que les navigateurs leur donnaient étaient presque aléatoires. Cela doit également être détecté à l’avance.

Ce qui suit est l'implémentation de bootstrap. J'ai entendu dire que cela venait de modernizr, ce qui est relativement approximatif. Par exemple, l'Oprera que vous utilisez prend déjà en charge les noms d'événements standard sans événements. Il renvoie toujours oTransitionEnd.

  $.supports.transition = (function(){
    var transitionEnd = (function(){
      var el = document.createElement('bootstarp'),
          transEndEventNames = {
            'WebkitTransition':'webkitTransitionEnd',
            'MozTransition':'transitionend',
            'OTransition':'OTransitionEnd otransitionend',
            'transition':'transitionend'
          };
        for (var name in transEndEventNames){
          if (el.style[name] !== undefined){
            return transEndEventNames[name]
          }
        }
    }());
    return transitionEnd && {
      end: transitionEnd
    }
  })();

L'animation entre images clés provient du module fx_neo de Mass

  var eventName = {
    AnimationEvent:'animationend',
    WebKirAnimationEvent: 'WebKirAnimationEnd'
  },animationend;
  for(var name in eventName) {
    if (/object|function/.test(typeof window[name])){
      animationend = eventName[name]
      break
    }
  }

3. Détective de soutien au style

css3 apporte de nombreux styles utiles, mais le problème est que chaque navigateur a son propre préfixe privé. massFramework fournit une méthode cssName pour les gérer. Si c'est le cas, il renverra le nom du style de casse camel disponible, sinon, il le fera. être nul

  var prefixes = ['','-webkit-','-o-','-moz-','-ms-'];
  var cssMap = {
    "float" : $.support.cssFloat ? 'cssFloat' : 'styleFloat',background:'backgroundColor'
  };
  function cssName(name, host, camelCase){
    if(cssMap[name]) {
      return cssMap[name];
    }
    host = host || document.documentElement
    for (var i = 0 || n = prefixes.length; i < n; i++) {
      camelCase = $.String.camelize(prefixes[i] + name);
      if (camelCase in host) {
        return (cssMap[name] = camelCase)
      }
    }
    return null
  }

一个样式对于N种样式值，比如display有n种取值，如果要侦测浏览器是否支持某一种，会很麻烦。为此，浏览器做了一个善举，给出一个css.supports的API，如果不支持，则尝试下一个开源项目。显然，不是很完美。

https://github.com/termi/CSS.supports

4.jQuery的一些常用的特征的含义

jQuery在support模块例举了一些常用的DOM特征支持情况，不过名字起的很怪，不同版本差别也很大，本章以jQuery1.8为准。

leadingWhitespace:判定浏览器在进行innerHTML赋值时，是否存在trimLeft操作，这个功能原本是IE发明的，结果其他浏览器认为要忠于以后的原始值，最前面的空白不能神略掉，要变成一个文本节点，最终IE678返回false,其他浏览器返回true

tobody:指在用innerHTML动态创建元素时，浏览器是否会在table内自动补上tobody,jQuery希望浏览器别处理，让jQuery来补全。判断浏览器是否只能插入tobody。在表格布局的年代，这个特性十分受用。如果没有tbody,table会在浏览器解析到闭合标签时才显示出来。如果起始标签和闭合标签相隔很远，换言之，这个表格很长，用户会什么都看不到，但有了tbody分段显示和识别，避免了长时间空白后一下子显示出来的情况。

复制代码 代码如下:

    var div = document.createElement("div");
    div.innerHTML = ''
    alert(div.innerHTML) //=>ie678返回,其它返回

html.Serialize:判断浏览器是否完好支持用innerHTML转换一个符合html标签规则的字符串为一个元素节点，此过程jQuery称为序列化，但IE支持不够完好。包括scirpt link style mata在内的no-scope元素都转换失败。

style：这个命名很难看懂，不看代码不知道什么意思，真像是判定getAttribute是否返回style的用户预设值。IE678没有返回区分特性的特征，返回一个CSSStyleDeclaration对象。

hrefNormalized:判定getAttribute能否返回href的用户预设值。IE会补充给你完整的路径给你

opacity：判定浏览器是否支持opacity属性，ie678要使用滤镜

cssFloat: 判定float的样式在DOM的名字是那个，W3c为cssFloat,IE678为styleFloat

CheckOn: 在大多数浏览器中checkBox的value为on，chorme返回空字符串

optSelected: 判定是否正确取得动态添加option元素的seleted,ie6-10与老版的safari对动态添加option没有设置为true。解决办法，在访问selected属性前，先访问父节点的selectedIndex属性，再强制计算option的seleted.

<select id='optSelected'></select>
<script type="text/javascript">
  var select = document.getElementById('optSelected');
  var option = document.createElement('option');
  select.appendChild(option);
  alert(option.selected);
  select.selectedIndex;
  alert(option.selected)
</script>

optDisabled : Déterminez si l'attribut désactivé de l'élément select affecte la valeur désactivée de l'élément enfant. Dans Safari, une fois l'élément select désactivé, ses éléments enfants sont également désactivés, ce qui entraîne une valeur qui ne peut pas être obtenue

checkClone : fait référence à un élément de case à cocher. Si vérifié=true est défini, et après plusieurs clones, ses copies peuvent-elles rester vraies. Cette méthode ne renvoie false que dans safari4, les autres sont true

inlineBlockNeedsLayout : Déterminez s'il faut utiliser la méthode hasLayout pour rendre display:inline-block efficace. Cette méthode n'est vraie que pour ie678

getSetAttribute : Déterminez s'il faut distinguer les attributs caractéristiques, seul ie678 est faux

noCloneEvent : détermine s'il faut cloner l'événement de liaison attachEvent lors du clonage d'un élément. Seules les anciennes versions d'IE et leurs modes de compatibilité renvoient false

enctype : Déterminez si le navigateur prend en charge l'attribut d'encodage. IE67 utilise l'attribut d'encodage à la place

.

boxModel : Déterminez si le navigateur est en mode de rendu de boîte de contenu

submitBubbles, changeBubbles, focusinBubble : déterminez si le navigateur prend en charge ces événements et remontez jusqu'au document

shrinkWrapBlocks : Déterminez si l'élément sera étiré par les éléments enfants. Dans IE678, les éléments non remplacés développeront leurs éléments parents lorsque size et hasLayout sont définis.

html5Clone : Déterminez si cloneNode peut être utilisé pour cloner de nouvelles balises HTML5. Les anciennes versions d'IE ne le prennent pas en charge. Besoin d'utiliser externalHTML

deleteExpando : détermine si l'élément personnalisé sur le nœud d'élément peut être supprimé. Ceci est utilisé dans le système de mise en cache jQuery. Les anciennes versions d'IE ne le prennent pas en charge et sont directement indéfinies

pixelPosition : Déterminez si getComputedStyle peut convertir la valeur en pourcentage de l'élément supérieur gauche en bas à droite de l'élément. Cela entraînera des problèmes dans le système Webkit et vous devrez utiliser le hack de Dean Edwards

reliableMarginRight : Déterminez si getComputedStyle peut obtenir correctement le marginRiht de l'élément.

clearCloneStyle : un bug étrange apparaîtra dans ie9 10. Lorsque l'élément de style background-* d'un élément est copié et que l'élément copié est effacé, le style d'origine sera effacé.

Avec les mises à jour folles des navigateurs, divers bugs causés par les navigateurs standards ont dépassé IE, et la détection des fonctionnalités devient de plus en plus importante.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.