前端框架从头开始-浏览器的判定

终于来记笔记了，想起写这个都好几个月，今天终于来开写了。

1、浏览器的判定

现在浏览器的判定基本上是通过navigator.userAgent来判定。

下面罗列出基本主流的浏览器的判断结果

window.navigator.userAgent
FF:Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
CHROME:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.10 Safari/537.36
IE10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.2; LCJB)
IE9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.2; LCJB)
IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.2; LCJB)
IE7:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.2; LCJB)

然后根据正则判断出浏览器的类型

jquery给出的方案

var ua = navigator.userAgent;
ua = ua.toLowerCase();
var match = /(chrome)[\/]([\w.]+)/.exec(ua) ||
            /(webkit)[\/]([\w.]+)/.exec(ua) ||
			/(opera)(?:.version)[\/][\w.]+/.exec(ua) ||
			/(msie) ([\w.]+)/.exec(ua) ||
			ua.indexOf("compatible") < 0 && /(mozilla)(?:*? rv:([\w.]+)|)/.exec(ua) || [];
var platform_match = /(ipad)/.exec(ua) ||
                     /(iphone)/.exec(ua) ||
                     /(android)/.exec(ua) ||
                     [];
var borwser = match[1];
var version = match[2];
var platform = 	platform_match[0];	

mass给出的解决方案

var ver = parseFloat(/(?:IE|fox\/|ome\/|ion\/)(\d+\.\d)/.exec(ua) || [,0])[1];
var ie = !!window.VBArray && Math.max(document.documentMode || 0, ver);
var firefox = !!window.netscape && ver;
var opera  = !!window.opera  && ver;
var chrome = !!window.chrome && ver;
var safari = !!/apple/i.test(ua) && ver;

通过对浏览器的特性进行检测也是很好的方法，由于方法太多，不罗列

2、事件支持的侦测

3、样式的支持侦测