JavaScript framework design - browser sniffing and feature detection_javascript skills

Browser sniffing is no longer recommended, but it is still needed in some situations. For example, some statistical scripts. In standard browsers, document.implementation.hasfeature is provided, but it is buggy and inaccurate. Currently, w3c has launched the CSS.supports method, which shows everyone's attention to this aspect.

1. Determine the browser.

Mainstream browsers include ie firefox opera chorme safari. In the early days, these frameworks were judged through navigator.userAgent. At present, almost all foreign browsers can judge.

Regarding the browser’s judgment script, jQuery has been moved out of the ontology and formed into a plug-in. There are more ways to introduce,

For relevant determination of mobile devices, it is recommended to look at the source code of jQuery mobile and zepto.

Copy code The code is as follows:

isIPone = /isIPone/i.test(navigator.userAgent);
isIPone4 = window.devicePixelRatio >= 2 //In the web page, the ratio of pixel to point is called device-pixel-ratio. Ordinary devices are 1, iPhone4 is 2, and some Android models are 1.5
isIpad = /ipad/i.test(navigator.userAgent)
isAndroid = /android/i.test(navigator.userAgent)
isIOS = isIPone || isIpad

For domestic browsers, you can look at Tangrame or qwrap, which are basically IE, webkit, and blink kernels.

2. Event support detection

Kangax, a core member of prototype, wrote an article to determine the browser’s support for certain events. The implementation given there is as follows:

  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;
  })();

Now jQuery and other frameworks use simplified versions of scripts

But whichever one is better, this detection only works for DOM0. For example, DOMMouseScroll DOMContentLoaded DOMFocusIn DOMFocusOut DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInsertedIntoDocument DOMAttrModified DOMCharactorDataModified, which starts with DOM, is useless.

Some of these events are very useful, such as DOMMouseScroll. Firefox has not supported mousesheel and can only use it as a substitute.
DOMContentLoaded is an important event in implementing domReady; DOMNodeRemoved is used to determine whether an element is removed from its parent node, which may be other element nodes or document fragments; DOMNodeRemovedFromDocument is moved away from the DOM tree, and DOMAttrModified was often used to simulate IE's onpropertyChange

CSS3 adds two animations, one is transition animation and the other is keyframe tweening animation. They all use event callbacks at the end of the event. But during the standardization process, the names that browsers gave them were almost random. This also needs to be detected in advance.

The following is the implementation of bootstrap. I heard it comes from modernizr, which is relatively rough. For example, the Oprera you are using already supports standard event names without events. It still returns 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
    }
  })();

keyframe tween animation comes from mass’s fx_neo module

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

3. Style support detective

css3 brings many useful styles, but the trouble is that each browser has its own private prefix. massFramework provides a cssName method to handle them. If it is, it will return the available camel case style name, if not, it will be null

  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 = 'f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08'
    alert(div.innerHTML) //=>ie678返回f5d188ed2c074f8b944552db028f98a192cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1f16b1740fad44fb09bfe928bcc527e08,其它返回f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

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: Determine whether the disable attribute of the select element affects the disabled value of the child element. In Safari, once the select element is disabled, its child elements are also disabled, resulting in a value that cannot be obtained

checkClone: ​​refers to a checkbox element. If checked=true is set, and after multiple clones, can its copies remain true. This method only returns false in safari4, others are true

inlineBlockNeedsLayout: Determine whether to use the hasLayout method to make display:inline-block effective. This method is true only for ie678

getSetAttribute: Determine whether to distinguish characteristic attributes, only ie678 is false

noCloneEvent: Determines whether to clone the attachEvent binding event when cloning an element. Only older versions of IE and their compatibility modes return false

enctype: Determine whether the browser supports the encoding attribute. IE67 uses the encoding attribute instead

boxModel: Determine whether the browser is in content-box box rendering mode

submitBubbles, changeBubbles, focusinBubble: Determine whether the browser supports these events and bubble up to document

shrinkWrapBlocks: Determine whether the element will be stretched by child elements. In IE678, non-replaced elements will expand their parent elements when size and hasLayout are set.

html5Clone: ​​Determine whether cloneNode can be used to clone HTML5 new tags. Older versions of IE do not support it. Need to use outerHTML

deleteExpando: Determines whether the custom element on the element node can be deleted. This is used in the jQuery caching system. Older versions of IE do not support it and are directly undefined

pixelPosition: Determine whether getComputedStyle can convert the percentage value of the top left bottom right element of the element. This will cause problems in the webkit system, and you need to use Dean Edwards's hack

reliableMarginRight: Determine whether getComputedStyle can correctly obtain the marginRiht of the element.

clearCloneStyle: A strange bug will appear in ie9 10. When the background-* style element of an element is copied and the copied element is cleared, the original style will be cleared.

With the crazy updates of browsers, various bugs caused by standard browsers have surpassed IE, and feature detection is becoming more and more important.

The above is the entire content of this article, I hope you all like it.