ts获取浏览器名称和版本号

前言

刚刚结束痛苦的期末，开始暑假的学习。暑假用上了mac mini，不用再为系统的事情发愁。这个星期光跑项目了，起项目真是能遇到各种问题，再加上对新系统不熟悉，真是废了一番功夫。
本周老师让我们先找个issue解决一个自己不会但是通过稍微努力一下就能解决的问题。我找了一个关于浏览器导致的问题。

问题最终原因是一些浏览器的旧版本没有特定功能。会导致系统出错。最简单的当然是在用户通过这些浏览器去使用生成试卷功能时提醒一下该浏览器不支持此功能。而要实现最重要的就是去获取当前浏览器的名称和版本号。有了这两项，剩下的都迎刃而解。

获取

从网上看教程，原来直接有内置字段有着关于浏览器的各种信息。关键是如何提取。我们先把它全部打印出来看看。

console.log(window.navigator);

里面有各种字段，我们找到我们所需要的，分别在我们的appVersion字段和userAgent字段里。但是换成火狐浏览器，只有userAgent字段里有，我们选择从userAgent中提取。
剩下的是怎么提取的问题。从网上看到的方法，先把所有字段变成全部小写，再匹配firefox或者chrome字符串。如果有，后面就是版本号。

public getExplorerInfo() {
    this.explorer = window.navigator.userAgent.toLowerCase();
    if (this.explorer.indexOf('msie') >= 0) {
      this.ver = this.explorer.match(/msie ([\d.]+)/)[1];
      return { type: 'IE', version: this.ver };
    } else if (this.explorer.indexOf('firefox') >= 0) {
      this.ver = this.explorer.match(/firefox\/([\d.]+)/)[1];
      return { type: 'Firefox', version: this.ver };
    } else if (this.explorer.indexOf('chrome') >= 0) {
      this.ver = this.explorer.match(/chrome\/([\d.]+)/)[1];
      return { type: 'Chrome', version: this.ver };
    }
}

然后打印出来看看
谷歌浏览器下

火狐浏览器下

比较版本号算法

如果是一些旧版本的问题，我们还要限制一下版本号，这就用到了比较版本号算法。

版本号大致以下几个部分组成：
*   主版本号
*   次版本号
*   修正版本号
*   编译版本号
示例： 3.5.20.9527

大致算法思路是，先将版本字符串按照.分割，然后主版本与主版本比较、次版本与次版本比较，如此按序一级一级往后比较，直到有分出大小。
很多版本号还带有字母，所以我们不能用数字比较，要用字符串比较，在比较前，我们先判断位数大小，位数大的大于位数小的，比如210大于30。
根据以上思路写出代码。

   /**
    * 比较版本号的大小,前者大则返回一个正数,后者大返回一个负数,相等则返回0
    */
    public compareVersion(version1: string, version2: string) {
        if (version1 == null || version2 == null) {
          throw new Error('版本获取错误');
        }
        console.log(version1);
        console.log(version2);
        this.versionArray1 = version1.split('\.'); // 注意此处为正则匹配，不能用"."；
        this.versionArray2 = version2.split('\.');
        this.minLength = Math.min(this.versionArray1.length, this.versionArray2.length); // 取最小长度值
        this.idx = 0;
        this.diff = 0;
        while (this.idx < this.minLength
          && ( this.diff = this.versionArray1[this.idx].length - this.versionArray2[this.idx].length) === 0 // 先比较长度
          && ( this.diff = this.versionArray1[this.idx].localeCompare(this.versionArray2[this.idx])) === 0) { // 再比较字符
          ++this.idx;
        }

        //如果已经分出大小，则直接返回，如果未分出大小，则再比较位数，有子版本的为大；
        this.diff = this.diff = (this.diff != 0) ? this.diff : this.versionArray1.length - this.versionArray2.length;
        return this.diff;
    }

打印出来看看

假设第二行为我们预设的最低版本号，第一行为我们当前浏览器版本号，第一行大于第二行，返回1.

总结

通过完成这两项方法，issue的问题就可以解决了。但是，我们获取浏览器名称只能挨个判断是否是ie，火狐，谷歌。我们无法累出所有浏览器。但是对于开发者来说，我们更希望让用户去用什么浏览器，而不是不用什么浏览器。我们测试所有浏览器的能用与否是项大工程，所以我们就让用户用我们制定的特定浏览器，比如谷歌和火狐。

版权声明

本文作者：河北工业大学梦云智开发团队 - 赵凯强