动态加载JavaScript之后再运行代码的问题

Question

在某个页面需要动态加载 jQuery，等到 jQuery 加载完成后再执行后续代码。但是我不想把后续代码放到 ajax 请求的回调函数里，因为后续代码有几千行，而且都是顶层的，我不希望在它们外部加上一层嵌套。求解该如何处理？

if (typeof jQuery === 'undefined') {    fetch('https://code.jquery.com/jquery-2.0.3.min.js', {

            method: 'get'

        })

        .then(function (response) {

            response.text()

                .then(function (data) {

                    let element = document.createElement('script');

                    element.setAttribute('type', 'text/javascript');

                    element.innerHTML = data;

                    document.head.appendChild(element);

                    console.log(typeof jQuery);

                    // 检查 typeof jQuery 为 function 之后再执行外部的代码。

                });

        });

}

// 外部代码，如：

console.log('jquery loaded');

ajax 请求可以不用 fetch，但是需要用异步。也可以改成设置 script 的 src 的方式来加载 jQuery。主要是不让后面的代码再加一层嵌套。可能也算是强迫症吧，求教~

Answer 1

如果想在你标示的外部代码里写，那是不可能的。以前有人也有和你一样的问题，然后就有了commonjs、requirejs等，现在模块加载已经成了ES6的标准。所以如果你有强迫症，那就不能嫌麻烦，把模块加载相关的姿势撸了吧。