淘宝Kissy框架分析【六】

现在开始分析kissy-ua.js 浏览器检测部分.

源码如下:

/**
 * @module    j1616-ua
 * @author    liangchaoyjs@163.com
 */
 J1616.add('j1616-ua', function(J) {
    var ua = navigator.userAgent,
        m,
        o = {
            webkit: 0,
            chrome: 0,
            safari: 0,
            gecko: 0,
            firefox: 0,
            ie: 0,
            opera: 0,
            mobile: ''
        },
        numberify = function(s) {
            var c = 0;
            return parseFloat(s.replace(/\./g, function() {
                return (c++ === 0) ? '.' : '';
            }));
        };

    // WebKit
    if ((m = ua.match(/AppleWebKit\/([\d.]*)/)) && m[1]) {
        o.webkit = numberify(m[1]);

        // Chrome
        if ((m = ua.match(/Chrome\/([\d.]*)/)) && m[1]) {
            o.chrome = numberify(m[1]);
        } 

        // Safari
        if ((m = ua.match(/\/([\d.]*) Safari/)) && m[1]) {
            o.safari = numberify(m[1]);
        } 

        // Apple Mobile
        if (/ Mobile\//.test(ua)) {
            o.mobile = 'Apple'; // iPad, iPhone or iPod Touch
        } 
        // Other WebKit Mobile Browsers
        else if ((m = ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/))) {
            o.mobile = m[0]; // Nokia N-series, Android, webOS, ex:NokiaN95
        } 
    } 
    // NOT WebKit
    else {
        // Opera
        if ((m = ua.match(/Opera\/.* Version\/([\d.]*)/)) && m[1]) {
            o.opera = numberify(m[1]);

            // Opera Mini
            if ((ua.match(/Opera Mini[^;]*/))) {
                o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316
            } 
        // NOT WebKit or Opera    
        } else {
            // MSIE
            if ((m = ua.match(/MSIE\s([^;]*)/)) && m[1]) {
                o.ie = numberify(m[1]);

            // NOT WebKit, Opera or IE
            } else {
                // Gecko
                if ((m = ua.match(/Gecko/))) {
                    o.gecko = 1;
                    if ((m = ua.match(/rv:([\d.]*)/)) && m[1]) {
                        o.gecko = numberify(m[1]);
                    } 
                    
                    // Firefox
                    if ((m = ua.match(/Firefox\/([\d.]*)/)) && m[1]) {
                        o.firefox = numberify(m[1]);
                    } 
                } 
            }
        }
    }
    J.UA = o;
 });

这里不会源码做剖析,因为都是比较容易理解. 但现在对于UA浏览器嗅探和特性检测(如jQuery)的孰优孰劣.我认为都有其合适的应用场景.看自己的需求吧.如果需要特性检测可以参考jQuery源码.

 

用法:

(function(J) {
    document.write(J.UA.ie + '<br/>') ;
    document.write(J.UA.firefox + '<br/>');
    document.write(J.UA.chrome + '<br/>');
    document.write(J.UA.opera + '<br/>');
    document.write(J.UA.safari + '<br/>');

})(J1616);

如果是目标浏览器那么会返回该浏览器的版本号.如果不是那么就返回0。 

比如.你想检测浏览器是不是IE并且是IE8 就可以写 J.UA.ie && J.UA.ie === 8.

 

关于浏览器各大排版引擎的介绍可参考这篇文章.

至此.整个kissy文件夹的3个.js文件都分析完毕了. 接着改啃比较大块的dom文件夹了.fighting!