如何在 JavaScript 类构造函数中动态加载 Jquery 并仅在 jquery 完全加载后继续执行

Question

这实际上是三个不同问题的合并，已经在堆栈溢出时得到了很好的回答！

1 - 如何Dynamic Load a JavaScript file from inside a Js Script：

2 - 如何Dynamic Load Jquery

3 - SetTimeout inside a JS Class using this

基本上，我正在构建一个类，它将在我的客户网站中注入一些页面。

为此，客户端只需在页面上添加我的脚本 src。

<script src="<my_pub_http_address>/MyClass.js">

一旦脚本被调用，我将需要 jquery 来继续执行！ 但是，我不知道调用脚本的网站是否已经加载了 jquery。

所以，我需要检查是否加载了 jquery，如果没有，我将不得不加载它，追加到头部，只有当 jquery 加载并工作时，我才会继续执行脚本。

PS：这是一种遗留答案！我事先已经有了解决方案！ 因此，任何改进都会受到赞赏！

Answer 1

这就是我找到的解决方案：

// MyClass.js

var counterLoopLoad = 0;

class MyClass {

    constructor(){
        // do the code that does not need jQuery
        return this.Init()
    }

    JqueryLoader() {
        // Loop Breaker
        counterLoopLoad ++;

        if (counterLoopLoad == 100) {
            throw 'I need jQuery in order to do what I am suppose to do!';
        }

        var __jquery = document.createElement('script');
        __jquery.src = "http://code.jquery.com/jquery-latest.min.js";
        __jquery.type = 'text/javascript';

        // if needed ....
        // __jquery.onload = function() {
        //     some code here
        //
        // };

        // must be prepend !!! append won't work !!!!
        document.head.prepend(__jquery);

        // here is the point that makes all work !!!!
        // without setTimeOut, the script will get in a loop !

        var that = this;
        setTimeout(function () {
            that.Init();
        }, 500);
    }

    Init() {
        if (typeof jQuery == 'undefined') {
            return this.JqueryLoader();
         }

         jQuery.ajax(...);        
    }
}