Question

我开发了一个JavaScript系统，它被分解成一堆文件（大约20-25左右）。它们中的大多数都是核心文件，需要存在才能使系统正常运行，但有些则充当插件，如果不需要功能则可以省略。

我担心的是我有一堆HTML页面使用这个系统和不同的插件组合，所有这些都在页面的开头有一大堆<script>标签需要仔细订购，所以首先加载文件的所有依赖项。在我或其他人弄乱HTML文件和内容之间复制/粘贴这些标记之前，感觉好像只是时间问题。

所以，我一直在研究jQuery的getScript()功能，并考虑创建一个设置文件，该文件需要一些参数来指定要使用的插件组合，然后动态加载后面的所有内容。场景，将每个文件减少到一个<script>标记（不包括jQuery等）。

这有什么重要的缺点吗？据推测，由于jQuery初始化等原因，加载需要更长的时间，但这可能是重要的吗？另外，如果依赖项在依赖项之前完成下载，那么getScript是否可能对跨文件依赖性不安全？是否也可能需要考虑浏览器兼容性问题？

我真的想清理这个标签墙，所以如果有经验丰富的人可以帮助我，我们将非常感激。

Answer 1

我不是jQuery专家，但我相信getScript()是异步的，而脚本加载则不是。这有利有弊。以下是getScript()实际执行的操作：

$.ajax({
  url: url,
  dataType: 'script',
  success: success
});

如果你有一个高度依赖于这个javascript的页面，那么这将是一个坏主意。如果您的页面不需要快速加载脚本，那么使用getScript()就可以了。此外，如果您需要按特定顺序加载脚本，这将不会异步工作（因为脚本可以从getScript()开始以任何顺序运行。）

同样重要的是要注意getScript()不附加脚本元素。相反，它在全局上下文中运行它们。对于大多数应用程序而言，这无关紧要，但它确实会对某些应用程序产生影响。

另外，我建议您查看DurandalJS。它包括jQuery以及Knockout（一个不太适用于这篇文章的真棒库）和RequireJS，这个库可以帮助你完成你想要做的事情！

Answer 2

您应该查看Require.js或任何其他javascript模块加载器。这个lib可以帮助你只加载那些脚本，你需要在当前页面/应用程序的一部分上。如果你不想使用任何javascript加载器<script>方式稍快一点，但它并不那么重要。

Answer 3

grunt连接，优化和缩小任务是最终的期望行为。但是，如果你不能使用grunt，请记住多个$.getScript调用将以任何顺序完成，这意味着如果你原来拥有这个：

<script a>
<script b depends on a>

然后这个$ .getScript替代品可能会破坏。

$.getScript(a)
$.getScript(b)

对此的最小修复是创建一个按顺序执行此操作的函数。

getScripts = function (urls, callback) {
    var script = urls.shift();
    $.getScript(script, function () {
        if (urls.length + 1 <= 0) {
            if (typeof callback === 'function') {
                callback();
            }
        } else {
            getScripts(urls, callback);
        }
    });
};

但是是的。如果可以，请使用RequireJS。

Answer 4

你有没有看过Head.js？我的项目遇到了同样的问题，我想出了head.js。它效率高，速度快。它可以管理依赖关系。

如果你想在订单中加载文件并在加载所有文件后运行一个函数，请执行以下操作：

head.js("/js/porta.js","/htc/common.js","/userLoginCompObj.js", "/Definition.js", function(){
  // dom ready or any function
});

我应该使用jQuery的getScript（）还是大量的<script>标签？</script>

4 个答案: