在需要时加载javascript文件

Question

我在一个小工具/小工具为基础的网站上工作，因为在用户可以选择哪些小工具/小工具s/他想要在屏幕上。

这意味着我将拥有成百上千个js文件，每个widget/gadget一个。我认为我可以使用$.getScript根据用户的选择在需要的时候加载正确的js文件。

我发现的问题是$.getScript只能通过javascript全局变量发送变量。全局变量和$.getScript似乎不能很好地结合在一起。

有没有其他方法可以做到这一点？也就是说，根据用户的选择，只在需要的时候加载js文件，加载的js文件可以从调用子js文件的js文件接收变量？

Answer 1

这个问题的解决方案是使用require.js这样的模块加载器系统。

它将根据每个文件的命名依赖关系自动知道要加载哪些文件。

您的模块将清楚地概述它们的依赖关系，如下所示：

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

一旦他们这样做了，require.js加载器将自动为您加载正确的JS文件。这是一个有点不同的语法，但它将解决问题。

Answer 2

我发现的问题是$.getScript只能通过javascript全局变量发送变量。全局变量和$.getScript似乎不能很好地结合在一起。

通过$.getScript加载的脚本可以很好地访问全局变量。(并不是说全局变量是个好主意。)

但是，将信息传递给已加载脚本的另一种方法是，让每个脚本基于脚本名称实现加载后回调，并在$.getScript完成其工作后，让加载程序代码调用该回调(带有要传递给它的参数)。

Live Example | Source

当然，该示例为jQuery使用了全局变量too- $，并且新脚本的theNewScript load complete函数是一个全局变量。在生产系统中，要做到这一点，我只需要为我的整个应用程序(比如MyApp)加载一个全局变量，在一个作用域函数中定义我的所有代码以避免创建任何其他全局变量，并让新脚本将其“ complete”函数设置为该全局变量的一个属性。(通常我根本不定义任何全局变量，因为我通常不按需加载脚本。)

Answer 3

尝试使用纯javascript调用您的脚本

        var html_doc = document.getElementsByTagName('head')[0];
        js = document.createElement('script');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', '../scripts/jquery-1.7.2.min.js');
        html_doc.appendChild(js);
        js.onreadystatechange = function () {
            if (js.readyState == 'loaded' || js.readyState == 'complete') {
                doSomething
            }
        }

        //works on ff e no chrome
        js.onload = function () { doSomething }