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

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

javascript jquery module

Javascript 动态加载js模块并提供对内部功能的即时访问,javascript,jquery,module,Javascript,Jquery,Module,我想使用$.getScript为javascript文件创建一个模块加载器，但由于脚本的加载是异步的，因此当我将模块的函数调用放在文档中时，可能会在加载模块之前调用它们。是否有任何方法可以避免这种情况，比如在模块成功加载之前暂停函数调用 framework.core.js： var Framework = $.extend(Framework, Framework.Core = { modules: [ 'Module1', 'Module2'

我想使用$.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>
...

您将需要打开success回调，以使依赖的函数挂接到它。除非通过document.write插入脚本，否则您将无法延迟执行以下函数以等待模块，因此回调是必要的。最好是将ajax函数返回的延迟对象公开。此外，您根本不应该将其用于该任务，因为它会阻止缓存

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();

让函数等待模块和DOMready，但不要让ready等待脚本。问题是我想提供独立于DOMready事件加载的模块的功能。如果我在模块中调用函数的文档正文中有一些脚本标记，则应在加载模块后立即执行这些标记。是的，只需将它们挂接到模块脚本的加载回调上。您能提供一个代码示例吗？也许？

<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>
...