Requirejs、Backbonejs浏览器支持功能

Question

我需要检查我的应用程序是否支持浏览器，我这样做的方式如下：

main.js（主要的 require.js 模块）

define(['underscore', 'backbone', 'views/mainView', 'views/oldBrowser', 'ui', function(_, Backbone, mainView, oldBrowser){

var _browserHandshaking = function(){
    var browserSupportedCookie = $.cookie('browserSupported');
    var browserNameCookie = $.cookie('browserName');
    var browserVersionCookie = $.cookie('browserVersion');

    if(browserSupportedCookie === null){
        if(/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'chrome';
        } else if(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'opera';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
            $.ui.browserName = 'ie';
        } else if(/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'safari';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'firefox';
        } else if(/webOS/i.test(navigator.userAgent)){
            $.ui.browserName = 'webos';
        } else if(/Android/i.test(navigator.userAgent)){
            $.ui.browserName = 'android'
        } else if(/iPhone/i.test(navigator.userAgent)){
            $.ui.browserName = 'iphone';
        } else if(/iPod/i.test(navigator.userAgent)){
            $.ui.browserName = 'ipod';
        } else if(/BlackBerry/i.test(navigator.userAgent)){
            $.ui.browserName = 'blackberry';
        }

        if($.ui.browserName !== false){

            // Set browser version.
            if(!$.ui.browserVersion){
                $.ui.browserVersion = parseFloat(new Number(RegExp.$1));
            }

            for(var browserName in $.ui.supportedBrowsers){
                if($.ui.browserName === browserName){
                    if($.ui.browserVersion >= $.ui.supportedBrowsers[browserName]){
                        $.ui.browserSupported = true;
                        break;
                    }
                }
            }

            $.cookie('browserVersion', $.ui.browserVersion, { expires: 7 });
            $.cookie('browserName', $.ui.browserName, { expires: 7 });
            $.cookie('browserSupported', $.ui.browserSupported, { expires: 7 });
        }           
    } else {
        $.ui.browserSupported = browserSupportedCookie;
        $.ui.browserName = browserNameCookie;
        $.ui.browserVersion = browserVersionCookie;
    }
};

_browserHandshaking.call(this);

var Router = Backbone.Router.extend({
    routes: {
        "old-browser": "oldBrowser",
        "*actions": "main",
    },
    oldBrowser: function(){
        oldBrowser.render();
    },
    main: function(){
        mainView.render();
    }
});

$.ui.router = new Router();

// Start routing.
Backbone.history.start({
    pushState: true,
    root: $.ui.rootDir
});

});

Backbone.js 中是否有一个函数可以在每个操作时触发，我可以很容易地实现这个：

preRouting: function(){
  if(!$.ui.browserSupported){
    return false;
  }

  return true;
}

我只需要检查一下，浏览器是否支持，如果支持它可以调用mainView，否则应该触发oldBrowser视图，我只是不想在每次路由函数调用时都这样做。

有人对此有更好的解决方案吗？有人知道是否可以创建一个基本上是路由函数调用的预限制符的检查。

感谢您的帮助:)

Answer 1

基于 cmets，您可以通过以下方式检查推送状态：（来自 Can use pushState）

var hasPushstate = !!(window.history && history.pushState);

css3 动画：（来自Detect css transitions using javascript (and without modernizr)?）

function supportsTransitions() {
    var b = document.body || document.documentElement;
    var s = b.style;
    var p = 'transition';
    if(typeof s[p] == 'string') {return true; }

    // Tests for vendor specific prop
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return true; }
    }
    return false;
}
var hasCSS3Transitions = supportsTransitions();

如果您可以简单地检查浏览器是否具有您的应用程序所需的功能，则无需检查浏览器名称/版本。