Question

我正在开发基于小工具/小工具的网站，因为用户可以在屏幕上选择他/她想要的小部件/小工具。

这意味着我将拥有数百/数千个js文件，每个小部件/小工具1个。我认为我可以使用$ .getScript根据用户选择在需要时加载正确的js文件。

我发现的问题是$ .getScript只能通过javascript全局变量发送变量。全局变量和$ .getScript看起来并不太好。

还有另一种方法吗？即以某种方式只根据用户选择加载js文件，其中加载的js文件可以从调用sub js文件的js文件接收变量？

Answer 1

我发现的问题是$ .getScript只能通过javascript全局变量发送变量。全局变量和$ .getScript看起来并不太好。

通过$.getScript加载的脚本可以正常访问全局变量。（并非全局变量是一个好主意。）

但另一种将信息传递给加载脚本的方法是每个脚本根据脚本名称实现加载后回调，并使加载程序代码调用该回调（带有要传递给它的参数））一旦$.getScript做了它的事情。

Live Example | Source

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

Answer 2

此问题的解决方案是使用像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 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 }

在需要时加载javascript文件

3 个答案: