我应该使用jQuery's getScript(）或成吨的<脚本>标签

Should I use jQuery's getScript() or tons of <script> tags?

本文关键字：标签 lt 脚本 gt jQuery 我应该 getScript      更新时间：2023-09-26

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

我担心的是，我有一堆HTML页面使用这个系统，其中有不同的插件组合，所有这些页面在页面开头都有一堵巨大的<script>标签墙，需要仔细排序，以便首先加载文件的所有依赖项。感觉我或其他人在HTML文件之间复制/粘贴这些标签并中断工作只是时间问题。

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

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

我真的很想清理这堵标签墙，所以如果有更多经验的人能在这里帮助我，我将不胜感激。

我不是jQuery专家，但我相信getScript()是异步的，而脚本加载不是。这有优点也有缺点。以下是getScript()的实际作用：

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

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

同样需要注意的是，getScript()不附加脚本元素。相反，它在全球范围内运行它们。这对大多数应用程序来说并不重要，但在某些应用程序中确实会有所不同。

此外，我建议查看DurandalJS。它包括jQuery、Knockout（一个很棒的库，并不真正适用于本文）和RequireJS，一个可以帮助您完成所需任务的库！

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

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。

你研究过Head.js吗？我的项目也遇到了同样的问题，我提出了head.js。它既高效又快速。它可以管理依赖关系。

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

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