zepto的detect探究

 

   其实：

 

   zepto有自身的函数接口去判断设备和浏览器

 

   我拿iOS模拟器跑测试：

 

//Zepto.os 查看设备
Zepto.os返回一个对象：

{
   ios:true,
   iphone:true,
   version:"6.1"
}


//Zepto.browser 查看浏览器
Zepto.browser返回一个对象：

{
   version:"536.26"
   webkit:true
}

 

 

 

   源码来自：detect.js

 

;(function($){
  
  //创建一个detect函数，参数为ua
  function detect(ua){

    //this为Zepto，给它绑两个属性：一个os，一个browser
    var os = this.os = {}, 
        browser = this.browser = {},

      webkit = ua.match(/WebKit\/([\d.]+)/),

      android = ua.match(/(Android)\s+([\d.]+)/),

      ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

      iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

      webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),


      touchpad = webos && ua.match(/TouchPad/),

      kindle = ua.match(/Kindle\/([\d.]+)/),

      silk = ua.match(/Silk\/([\d._]+)/),

      blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/),

      bb10 = ua.match(/(BB10).*Version\/([\d.]+)/),

      rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/),

      playbook = ua.match(/PlayBook/),

      chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/),

      //比如火狐19,这边firefox是一个数组：["Firefox/19.0","19.0"];
      firefox = ua.match(/Firefox\/([\d.]+)/)

    // Todo: clean this up with a better OS/browser seperation:
    // - discern (more) between multiple browsers on android
    // - decide if kindle fire in silk mode is android or not
    // - Firefox on Android doesn't specify the Android version
    // - possibly devide in os, device and browser hashes

    if (browser.webkit = !!webkit) browser.version = webkit[1]

    if (android) os.android = true, os.version = android[2]

    if (iphone) os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.')

    if (ipad) os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.')

    if (webos) os.webos = true, os.version = webos[2]

    if (touchpad) os.touchpad = true

    if (blackberry) os.blackberry = true, os.version = blackberry[2]

    if (bb10) os.bb10 = true, os.version = bb10[2]

    if (rimtabletos) os.rimtabletos = true, os.version = rimtabletos[2]

    if (playbook) browser.playbook = true

    if (kindle) os.kindle = true, os.version = kindle[1]

    if (silk) browser.silk = true, browser.version = silk[1]

    if (!silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true

    //如果chrome有值的话，给browser装两个属性firefix和version
    if (chrome) browser.chrome = true, browser.version = chrome[1]

    //如果firefox有值的话，给browser装两个属性firefix和version
    if (firefox) browser.firefox = true, browser.version = firefox[1]

    //os必有一个属性tablet来标示是否是平板
    os.tablet = !!(ipad || playbook || (android && !ua.match(/Mobile/)) || (firefox && ua.match(/Tablet/)))

    //os必有一个属性phone来标示是否是手机，但是有问题：如果是pc的火狐，返回的居然也是true（当然它本身针对移动端的，呵呵，忽略忽略）
    os.phone  = !!(!os.tablet && (android || iphone || webos || blackberry || bb10 || chrome || firefox))
  }

 
  //调用detect方法，把navigator.userAgent当参数传入
  detect.call($, navigator.userAgent);


  // make available to unit tests
  //给Zepto绑上一个key为__detect对应的是detect这个function
  $.__detect = detect

})(Zepto)