javascript - 异步 JavaScript 动态包含

Question

我有很多JavaScript文件，以三个为例:App.js、ChildApp.js(多个)和AjaxManager.js，而AjaxManger.js是我添加的。

ChildApp 扩展了 App，而 App 又依赖于 AjaxManager。

在应用程序的构造函数中:

function App() {
    this.ajaxManager=new AjaxManager();//Need AjaxManager.js to import, especially when new ChildApp is called.
    ....
}

ChildApp 的构造函数:

function ChildApp's() {
    App.call(this); //
}

ChildApp.prototype = new App(); 
...

在旧代码中，有数十个地方包含 App.js，我不想复制并粘贴之前包含 AjaxManager.js 的相同代码。

但是如果我没有很好地包含 AjaxManager，那么我会在

时出错

var app=new ChildApp();//ReferenceError: AjaxManager is not defined

所以我在 App.js 的开头使用下面的代码:

if(typeof AjaxManager =='undefined'){
    console.log('AjaxManager is not loaded , getting the script');
    $.ajax({
        url: .....//Url to load
        dataType: "script",
        async:false// How can I use async =true 
    });
}

但我必须使用 async:false 进行请求，这会在控制台中向我显示一条警告:主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户体验

否则我会遇到错误:

ReferenceError: AjaxManager is not defined

如何使用异步请求来加载脚本并确保一切正常但不会破坏我现有的功能。

更新:

1. 在我问这个问题之前，我尝试过 $.getScript(url) 在 App.js 的开头或函数 App() 的开头，但是同样的错误，我猜想与构造函数 App 相关的东西应该放在回调中，但我不知道如何。

2. 我希望只能修改app.js或ajaxmanager.js，因为调用new App()或new ChildApp()的地方太多了

   <

Answer 1

不要使用async: false。这是非常糟糕的做法，因为它会阻塞 UI 线程，直到请求完成。

您可以使用 $.getScript 来缩短代码，并使用回调处理程序来执行依赖于正在加载的脚本的任何代码。试试这个:

if (typeof AjaxManager =='undefined') {
    $.getScript('ajaxManager.js', processPage);
}
else {
     // AjaxManager already loaded
     processPage();
}

function processPage() {
    // put your logic that relies on AjaxManager here 
}