35

无论如何都可以在 HTML 中导入多个 javascript 文件而不必指定每个文件？

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

IE。我可以指定类似js/toolkit/*的东西吗？

我必须导入 50 多个 javascript 文件，并且指定每个文件似乎非常耗时。

4

6 回答 6

14

在另一个 JavaScript 文件中包含一个 JavaScript 文件在 Web 开发中很常见。

因为很多时候我们在运行时包含的 JavaScript 文件代表了一些条件。

因此，我们可以使用 JavaScript 以及使用 jQuery 来实现这一点。

方法 1：使用 JavaScript 包含另一个 JavaScript 文件

  1. 在您的网页中添加以下功能。

    function loadScript(url)
{    
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

  2. 只需调用下面的 loadScript 函数，您想在其中包含 js 文件。

    loadScript('/js/jquery-1.7.min.js');

方法 2：使用 jQuery 包含另一个 JavaScript 文件。

  1. 在您的网页中添加 jQuery 文件。

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

  2. 只需调用 getScript 函数函数。

    jQuery(document).ready(function(){
    $.getScript('/js/jquery-1.7.min.js');
});

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件

于 2016-04-27T20:34:17.673 回答
13

有一个办法：

您可以创建一个将路径作为参数并创建以下 HTML 行的 javascript 函数：

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

你只需要这样称呼：

loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");

但不建议这样做，因为 HTTP 请求的数量会增加加载时间。您最好在服务器端使用某些东西将所有内容放在同一个文件中。

于 2013-01-22T14:14:00.113 回答
6

不，你不能这样做。顺便说一下，加载所有 50 个单独的文件并不是一个好主意。考虑将它们压缩到一个脚本中以提高性能并减少页面加载时间。

于 2013-01-22T13:58:47.917 回答
5

您可以设置grunt来查看脚本的文件夹并将它们合并/缩小到一个文件中，然后您只需将其包含在您的 HTML 文件中。

于 2014-02-28T00:38:47.860 回答
2

您需要为浏览器指定每个文件以了解要检索的内容，但根据您使用的 IDE，可能会有执行此操作的快捷方式，（Visual Studios 允许您将脚本文件拖放到 html 中以添加引用）。

在开发过程中，您希望通过将文件分开以进行故障排除来做同样的事情，但在生产中，正如其他人所评论的那样，缩小代码并将它们组合到一个文件中是非常好的做法。这使得它只需一个调用，并且可以显着减少您的开销。

于 2013-01-22T14:05:42.013 回答
1

我建议您使用JSCompress。它会将您所有的 javascript 代码压缩到一个 javascript 文件中。

于 2017-10-25T03:14:07.840 回答