javascript - 主线程上的同步 XMLHttpRequest 在 ASP.NET MVC 和 Page.js 中已被弃用

Question

为了使我们的应用程序成为 SPA，我们使用了第三方库 Page.js 以及 ASP.NET MVC。

Page.js 参考： https ://visionmedia.github.io/page.js/

通过使用 Page.js 库，我们基本上执行了两个任务。

1. 首先，我们在 MVC 应用程序上点击一些控制器/动作（部分视图），然后将返回的 HTML 注入 DOM。
2. 其次，同时我们使用这个库改变浏览器的URL。

我们通过 Page.js 获取的所有 Partial Views 也有对<script/>标签的引用。因此，每当我们将返回的 HTML 注入 DOM 时，我们就会开始在浏览器的控制台选项卡中看到弃用问题。

[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

申请流程：

下图解释了我们的应用程序流程。

目前，所有子部分视图也都有自己的脚本，并且该脚本在注入 DOM 后立即执行。

尝试的方法作为解决此弃用问题的解决方案：

在通过 Page.js 库注入的每个局部视图（不是子视图）上，我们正在编写以下代码以异步加载所有依赖项。在回调函数中（一旦加载了所有依赖项），我们正在执行页面特定的 JavaScript 代码，如下所示。

通过 Ajax 注入 DOM 的 Page 的 HTML（即 Page Partial View）：

<div>
    ......
    ......
</div>

<!-- This part causes issue -->
<!--<script type="application/javascript" src="/script1.js"></script>
<script type="application/javascript" src="/script2.js"></script>-->

<script>
$(function () {
    $.getMultiScripts(["@scriptFile1", "@scriptFile2"]).done(function () {
        onPageLoad();
    });

    function onPageLoad() {
        // 1. Defer kendo scripts
        @Html.Kendo().DeferredScripts(false);

        // 2. Initialize partial view 1
        partialView1.init();

        // 2. Initialize partial view 2
        partialView2.init();

        // 3. Initialize partial view 3
        partialView3.init();
    }
});
</script>

重要：$.getMultipleScripts取自这里 -如何使用 jQuery $.getScript() 方法包含多个 js 文件

子部分视图末尾的脚本如下所示：

<script>
    window.partialView1 = (function() {

        var init = function() {

            // 1. Initialize partial control
            tabControl.initControl();

            // 2. Initialize partial control
            common.bindEvents();
        };

        return {
            init: init
        };
    })();
</script>

注意：为此，我们还停止了子部分视图，以便在加载后立即执行 javascript 代码。事实上，我们现在只是在部分视图中提供 javascript 定义（以模块模式的形式）并从主页面（父部分视图）控制整个执行。

我知道这不是一个好方法。我们可以使用一些前端框架。但是在这个阶段，我们不能做出让整个框架转变的决定。

从这篇文章中，我只是想知道，这种方法是好的还是有更好的方法来解决这个问题。如果是，请分享。

标签： javascriptasp.netajaxasp.net-mvcpage.js