javascript - 使用 javascript 包含 JS 文件时，如何确保在执行任务之前加载所有 JS 文件

Question

我有一个包含以下代码的 js 文件，该文件包含在我所有 html 页面的 head 部分中。

myApp.jsLoad = (function () {

    var obj_1 = {
        getScript: jQuery.getScript,

        // Load multiple js files
        getMultipleScripts: function( filesArray, callback ) {
            var // reference declaration & localization
            length = filesArray.length,
            handler = function() { counter++; },
            deferreds = [],
            counter = 0,
            idx = 0;

            for ( ; idx < length; idx++ ) {
                deferreds.push(
                    obj_1.getScript( filesArray[ idx ], handler )
                );
            }

            jQuery.when.apply( null, deferreds ).then(function() {
                callback && callback();
            });
        } ,
        //-----End-----getMultipleScripts----------------



        // Checks if js file is being included for the first time
        // namesp: use a sub-namespace of myApp
        // jsFile: use the full filepath 
        isFirstLoad: function(namesp, jsFilepath) {

            // namesp.firstLoad will be undefined if file hasn't been included before
            var isFirst = namesp.firstLoad === undefined; 

            namesp.firstLoad = false;

            return isFirst;
        } ,
        // ----End-----------isFirstLoad----------------


        // Load js files that have not been loaded before
        // fileList is an object of namespace and filepath
        loadNewScripts:  function(fileList) {

            // RSVP.Promise uses RSVP Promise library
            return new RSVP.Promise(function(fulfill, reject) {
                var filesToLoad = [];
                $.each(fileList, function(index, el) {

                    if (!obj_1.isFirstLoad(el.nameSp, el.jsfile) ) {
                        // if file already included before
                    } else {
                        // This js file hasn't been loaded into page yet
                        // so push into filesToLoad array so we can load them altogether at once 
                        filesToLoad.push(el.jsfile);
                    }
                }); 

                obj_1.getMultipleScripts(filesToLoad, function() {
                    //Do something after all scripts have loaded
                    fulfill('JS files loaded');                 
                });

            }) // RSVP.Promise

        } ,
        //-----End------- loadNewScripts---------------------



    }; // obj_1 
    //-----End------obj_1-------------------

    return obj_1;

}()); 

上面js文件中值得关注的部分是loadNewScripts 。基本上是什么loadNewScripts作用是，当您传递一个由 namespace 和文件路径组成的对象作为参数传递给它时，它会加载那些尚未加载的 js 文件。

这很有用，因为在我的项目中我有很多js文件，并且一些js文件依赖于其他js文件。所以不要包括 <script type="text/javascript" src="somefile.js"></script>对于html页面所需的每个js文件，我可以只在我的html页面中包含一个js文件，并且该js文件将加载它需要的js文件，而那些加载的js文件可以加载它们需要的其他js文件，依此类推。

为了演示，假设我有三个 js 文件: file1.js、file2.js 和 file3.js 。我的 html 页面最初只包含 file1.js。

在 file1.js 中，myApp.jsLoad.loadNewScripts在执行 funMath() 之前加载 file2.js:

 myApp = myApp || {};
(function () {
    myApp.f2 = myApp.f2 || {};
    var fileList = [
        {
            nameSp: myApp.f2 ,
            jsfile: 'file2.js'
        }
    ];

    myApp.jsLoad.loadNewScripts(fileList)
    .then(function(loadStatus) { 
        funMath();
    })

    var funMath = function() {
        var a = myApp.f2.getNum();
        alert(a);
    }
}()); 

在 file2.js 中，myApp.jsLoad.loadNewScripts加载 file3.js:

myApp = myApp || {};
(function () {
    myApp.f3 = myApp.f3 || {};
    var fileList = [
        {
            nameSp: myApp.f3 ,
            jsfile: 'file3.js'
        }
    ];

    myApp.jsLoad.loadNewScripts(fileList)
    .then(function(loadStatus) { 
       myApp.f2 = obj;
    })

    var obj = {
        getNum: function() {
             return myApp.f3.getRand();
        }
    };
}()); 

file3.js 中的代码:

 myApp = myApp || {}

 myApp.f3 = (function () {

    var obj = {
        getRand: function() {
             return Math.floor(Math.random() * 10); 
        }
    };
    return obj
}()); 

现在在 file1.js 中，funMath() 会等到 file2.js 加载后才执行，但是它如何知道 file3.js 是否已加载呢？

file1.js 依赖于 file2.js，而 file2.js 又依赖于 file3.js，这意味着 file1.js 依赖于 file2.js 和 file3.js。如何确保在执行 file1.js 中的 funMath() 之前加载 file2.js 和 file3.js？

Answer 1

有一个事件load一旦你的 <script src="..."> 就会触发已经加载(由于JS是单线程的，所以也意味着它已经被执行了)

var body = document.body;
var scriptEl = document.createElement('script');
scriptEl.src = 'https://underscorejs.org/underscore-min.js';
scriptEl.addEventListener('load', function() {
   console.log('Underscore version is ' + _.VERSION);
});
body.appendChild(scriptEl);

注意，一旦它不是学习 JS 而是真正的产品任务，你最好看看加载器和 bundler 的世界。比如说 requireJS 或 webpack(它们来自不同的世界，但在您当前的需求范围内应该相似)。

是的，webpack 在第一种方式中创建单个包，但您可以对其进行调整，将整个代码库分割成多个 block ，以便在需要时动态加载。