淘宝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!