Question

我想使用$ .getScript为javascript文件创建一个模块加载器，但是因为当我在文档中放置一个模块的函数调用时，可以异步加载脚本，然后在加载模块之前调用它们。是否可以通过将函数调用置于保持状态直到模块成功加载来避免这种情况？

framework.core.js：

var Framework = $.extend(Framework, Framework.Core = { 
    modules: [ 
        'Module1', 
        'Module2'
    ], 
    init: function () { 
        $.each(modules, function (index, value) {  
            $.getScript('framework.' + value.toLowerCase() + '.js', function () { 
            }); 
        }); 
    }   

}); 
Framework.Core.init();

site.html：

<html>
    <head>
        <script src="framework.core.js"></script>
        <script>Framework.Module1.functionCall();</script>  // Call a function independent of the completion of the framework.core.js loader
    </head>
...

Answer 1

您需要打开依赖函数的成功回调来挂钩它。您将无法推迟执行以下函数来等待模块（除非您通过document.write插入脚本），因此回调是必要的。最好，只需将Deferred对象（由ajax函数返回）公开。此外，您根本不应该使用jQuery.getScript/来执行该任务，因为它会阻止缓存。

var Framework = $.extend(Framework, Framework.Core = {
// The "Core" property seems pretty useless, by the way ^^
    modules: [ 
        'Module1', 
        'Module2'
    ],
    loads: {},
    init: function () { 
        $.each(this.modules, function(index, value) {  
            this.loads[value] = $.ajax({
                url: 'framework.' + value.toLowerCase() + '.js',
                cache:true,
                dataType:"script"
            }); 
        }); 
    }   

}); 
Framework.init();

<html>
    <head>
        <script src="framework.core.js"></script>
        <script>Framework.loads.Module1.then(function() {
            functionCall();
        }); // Call a function as soon as the module is loaded
        </script>
    </head>
...

动态加载js模块，并提供对内部功能的即时访问

1 个答案: