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，火狐，谷歌。咱們沒法累出全部瀏覽器。可是對於開發者來講，咱們更但願讓用戶去用什麼瀏覽器，而不是不用什麼瀏覽器。咱們測試全部瀏覽器的能用與否是項大工程，因此咱們就讓用戶用咱們制定的特定瀏覽器，好比谷歌和火狐。

版權聲明

本文做者： 河北工業大學夢雲智開發團隊 - 趙凱強