Javascript framework design-browser sniffing and feature detection-javascript skills

This article mainly introduces the information about browser sniffing and feature detection in javascript framework design. if you need it, you can refer to the browser sniffing, which is no longer recommended, but it is still needed in some scenarios. For example, some statistics scripts. In the standard browser, document. implementation. hasfeature is provided. Unfortunately, there are bugs and inaccuracies. At present, w3c has released the CSS. supports method to show everyone's attention to this part.

1. determine the browser.

Mainstream browsers include ie firefox opera chorme safari. in the early days, these frameworks were determined by navigator. userAgent. Currently, almost all foreign browsers can be determined.

About the browser judgment script, jQuery has been removed from the ontology to form a plug-in. More methods are not described,

Determine mobile devices. we recommend that you check the source code of jQuery mobile and zepto.

The code is as follows:

IsIPone =/isIPone/I. test (navigator. userAgent );
IsIPone4 = window. devicePixelRatio> = 2 // On the webpage, the pixel-to-point ratio is called device-pixel-ratio. The average device is 1, the iPhone 4 is 2, and some Android models are 1.5.
IsIpad =/ipad/I. test (navigator. userAgent)
IsAndroid =/android/I. test (navigator. userAgent)
IsIOS = isIPone | isIpad

Domestic browsers can see 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 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] || 'p');      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;  })();

Currently, jQuery and other frameworks all use a simplified version of scripts.

But which one is good? this kind of detection only works for DOM0, like DOMMouseScroll DOMContentLoaded DOMFocusIn DOMFocusOut ?domnodeinserted DOMNodeRemoved ==domattrmodified starting with DOM.

Some of these events are very useful, such as DOMMouseScroll. firefox does not support mousesheel and can only be used as a substitute.
DOMContentLoaded is an important event for implementing domReady. DOMNodeRemoved is used to determine whether an element is removed from its parent node. the parent node may be another element node or file fragment. DOMNodeRemovedFromDocument is removed from the DOM tree, DOMAttrModified used to simulate the onpropertyChange of IE

Css3 adds two types of animations: transition animation and keyframe compensation animation. They all use event callback at the end of an event. However, in the standardization process, the name given by the browser is equivalent to no rule. This also needs to be detected in advance.

The following is the implementation of bootstrap. It is said that the source is modernizr, which is rough. For example, the Oprera you are using does not contain the standard event name of the event. 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    }  })();

The keyframe compensation animation comes from the fx_neo module of 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. support for style detection

Css3 brings a lot of useful styles, but the trouble is that every browser has its own private prefix. massFramework provides a cssName method to process them and returns the available camper style names, null if no

  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  }

A style has N style values, for example, display has n values. it is very troublesome to detect whether the browser supports one. To this end, the browser makes a good offer and provides a css. supports API. if not, try the next open-source project. Obviously, it is not perfect.

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

4. meanings of some common features of jQuery

JQuery provides some common DOM feature support examples in the support Module. However, the names are very strange and vary greatly in different versions. in this chapter, jQuery1.8 prevails.

LeadingWhitespace: determines whether the trimLeft operation exists when the browser assigns an innerHTML value. this function was originally invented by IE. as a result, other browsers believe that they should be loyal to the original value, the leading blank cannot be omitted. to change to a text node, IE678 returns false, and other browsers return true.

Tobody: indicates whether the browser will automatically add the tobody to the table when an element is dynamically created using innerHTML. jQuery wants the browser not to process it, so that jQuery can complete it. Determines whether the browser can only insert tobody. In the age of table layout, this feature is very useful. If no tbody exists, the table is displayed only when the browser parses the closed tag. If the start tag and the closed tag are far apart, in other words, this table is very long and you will not see anything, but with tbody segmentation display and recognition, this avoids the situation that is immediately displayed after a long blank space.

The code is as follows:

Var p = document. createElement ("p ");
P. innerHTML ='

'
Alert (p. innerHTML) // => ie678 return , Other responses

Html. Serialize: Determine whether the browser is in good condition. you can use innerHTML to convert a string that complies with the html tag rules into an element node. in this process, jQuery is called serialization, But IE is not well supported. Conversion of no-scope elements, including scirpt link style mata, fails.

Style: This name is hard to understand. it doesn't look at the code and doesn't know what it means. it's like determining whether getAttribute returns the default value of style. IE678 does not return feature differentiation, and returns a CSSStyleDeclaration object.

HrefNormalized: determines whether getAttribute can return the user preset value of href. IE will provide you with the complete path

Opacity: determines whether the browser supports the opacity attribute. for ie678, use a filter.

CssFloat: specifies the name of the float style in the DOM. W3c indicates cssFloat, and IE678 indicates styleFloat.

CheckOn: in most browsers, the value of checkBox is on, and chorme returns an empty string.

OptSelected: determines whether the seleted that dynamically adds the option element is obtained correctly. ie6-10 and older versions of safari do not set dynamic add option to true. Solution: before accessing the selected attribute, access the selectedIndex attribute of the parent node, and then forcibly calculate the seleted of the option.