我应该使用 jQuery 的 getScript() 还是大量的 <script> 标签？ [关闭]

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 模块加载器。 此库可以帮助您仅加载该脚本，即您在当前页面/应用程序的一部分上需要的内容。 如果你不想使用任何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
});