javascript - 使用 amd 和 requirejs 处理 knockout Spa 中的错误

Question

所以我有一个基于 Steve Sandersons SPA template 的相当大的单页应用程序。自定义绑定(bind)处理程序、验证等都工作正常。

我们需要使用 XMLHttpRequests、Session 和本地存储以及其他一些没有通用支持的库(jquery 2.0 等)。我有一个处理身份并公开一些服务的核心模块，这两个模块都依赖于这些功能。这是在用户第一次访问该页面时加载的。

我对旧版浏览器有一个问题，其中 a) 它们不支持某些正在加载的模块，因此它们在调用 onload 函数之前抛出错误，或者 b) 它调用了 onload 函数但它们不支持浏览器功能，因此我需要自己引发异常并以某种方式处理它。

示例:IE8 抛出“对象不支持属性或方法“addEventListener””(jquery 错误)，而 IE9 不支持我需要的所有内容，因此我抛出自定义错误。

define('core', ['jquery', 'browser'], function($, browser) {
     if(!browser.hasFullSupport) {
         throw new Error('Update your browser');
     }
     // aload of gubbins that requires sessionStorage etc
     return {
          identity: identity,
          serviceA: serviceA,
          serviceB: serviceB
     }
}, function(err) {
    // doesn't catch the ie8 error here
});

我尝试设置 window.onerror，但它在不同浏览器版本中的工作方式有所不同，并且在某些浏览器版本中我无法正确捕获错误消息，我只是收到“脚本错误”。

我知道我可以为模块定义添加错误事件处理程序，但它不会捕获我遇到的错误。

我见过人们使用

requirejs.onError = function(err) {
   // something here 
}

但是我正在使用 requirejs gulp bundler ，我看不到这个对象将暴露在哪里(如果有的话)

var require = {
baseUrl: ".",
paths: {
    "modernizr":            "bower_modules/modernizr/modernizr",
    "browser":              "app/browser-detect",
    "crossroads":           "bower_modules/crossroads/dist/crossroads.min",
    "hasher":               "bower_modules/hasher/dist/js/hasher.min",
    "jquery":               "bower_modules/jquery/dist/jquery.min",
    ....

// gulpfile
var requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;');
requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
    out: 'scripts.js',
    baseUrl: './src',
    name: 'app/startup',
    paths: {
        requireLib: 'bower_modules/requirejs/require'
    },
    include: [
        'requireLib',
        'components/nav-bar/nav-bar',
        .....

gulp.task('js', function () {
return rjs(requireJsOptimizerConfig)
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'));
});

有大量的组件/页面，每个组件/页面都可能引发错误，但我渴望解决的是这个初始核心组件加载问题。我想区分错误(可能是或可能不是由浏览器太旧引起的)和我事先检测到它们太旧的错误，是否有一种优雅的方法可以使用此模板模型来实现此目的？

我不想偏离模板太远，因为我不太熟悉 requirejs/gulp 等，但我愿意接受建议。

Answer 1

你自相矛盾:

We require the use of the XMLHttpRequests, Session and Local storage as well as some other libraries that don't have universal support (jquery 2.0 etc)

但是:

IE8 throws an 'Object doesn't support property or method 'addEventListener'' (jquery error) and IE9 Doesn't support everything I need so I throw a custom error.

您无法将库和 HTML 5 功能用于较新的浏览器，并期望较旧的浏览器仍然可以工作。不支持 IE 8 等旧版浏览器的库不会正常失败，因此您无法很好地处理失败。即使您找到了一种解决方法来以某种方式规避这些错误，您仍然需要定期在旧浏览器中测试它们，这违背了仅支持较新浏览器的意图。

所以我向您推荐两种方法:

1. 要么决定根本不支持旧版浏览器，而只在最新的现代浏览器中测试应用程序。您可以使用不再支持旧浏览器的现代版本库，而根本不用担心旧浏览器。这取决于您的用户群的状态。或者:
2. 将库降级到支持您所需的最低浏览器的版本，并继续使用它们开发应用。测试应用程序并修复旧浏览器中出现的所有错误。使用 polyfill 通过模拟在旧浏览器中启用新的 HTML 5 功能。