为了使我们的应用程序成为 SPA,我们使用了第三方库 Page.js 以及 ASP.NET MVC。
Page.js 参考: https ://visionmedia.github.io/page.js/
通过使用 Page.js 库,我们基本上执行了两个任务。
- 首先,我们在 MVC 应用程序上点击一些控制器/动作(部分视图),然后将返回的 HTML 注入 DOM。
- 其次,同时我们使用这个库改变浏览器的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 定义(以模块模式的形式)并从主页面(父部分视图)控制整个执行。
我知道这不是一个好方法。我们可以使用一些前端框架。但是在这个阶段,我们不能做出让整个框架转变的决定。
从这篇文章中,我只是想知道,这种方法是好的还是有更好的方法来解决这个问题。如果是,请分享。