前端检测浏览器信息以及网络连接情况

在web端项目开发过程中，经常会用到浏览器的版本及网络情况进行监测，下述代码给大家提供了一个思路

// 构建全局环境对象，存储浏览器相关信息，并将其放到window上，便于全局访问
window.Global = {
    isMac: navigator.platform.toUpperCase().indexOf("MAC") >= 0,
    isWebkit: false,
    isChrome: false,
    isMozilla: false,
    isOpera: false,
    isIE: false,
    isEdge: false,
    isSafari: false,
    browserVersion: "",
}
// 检测浏览器及其版本
window.browser = function () {
    var t, e = navigator.userAgent, 
    n = e.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(n[1])){
        t = /\brv[ :]+(\d+)/g.exec(e) || [];
        return {
            name: "IE",
            version: t[1] || ""
        }
    }else if("Chrome" === n[1]){
        t = e.match(/\b(OPR|Edge)\/(\d+)/);
        if(t !== null){
            return {
                name: t.slice(1)[0].replace("OPR", "Opera"),
                version: t.slice(1)[1]
            } 
        }else{
            n = n[2] ? [n[1], n[2]] : [navigator.appName, navigator.appVersion, "-?"];
            null != (t = e.match(/version\/(\d+)/i)) && n.splice(1, 1, t[1])
            return {
                name: n[0],
                version: n[1]
            }
        }
    }
}()
// 将相关的检测结果存储到Gloabal全局对象中
Global.isWebkit = "Chrome" === browser.name || "Safari" === browser.name;
Global.isMozilla = "Firefox" === browser.name;
Global.isOpera = "Opera" === browser.name;
Global.isIE = "IE" === browser.name;
Global.isEdge = "Edge" === browser.name;
Global.isChrome = "Chrome" === browser.name;
Global.isSafari = "Safari" === browser.name;
Global.browserVersion = browser.version;
Global.online = false;
// 监听网络在线的事件
window.addEventListener("online", function () {
    setTimeout(() => {
        console.log("网络连接已建立")
    })
})
// 检测网络离线的事件
window.addEventListener("offline", function () {
    setTimeout(() => {
        console.log("网络连接已断开")
    })
})
// 网络变化后执行的回调函数
function linestate(args) {
    console.log(args);
}
// 检测网络动态变化后的事件，并增加相关的回调方法
navigator && navigator.connection && navigator.connection.addEventListener("change", function () {
    var t = 128 * navigator.connection.downlink;
    t < 30 ? setTimeout(function () {
        Global.online && linestate('slowline')
    }, 10) : Global.online ? linestate('online') : linestate('offline');
})

代码示例来源于微博web端(源码直出)