Question

有没有在HTML中导入多个javascript文件而不必指定每个文件？

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

即。我可以指定像 js / toolkit / * 这样的内容吗？

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

Answer 1

有一种方法：

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

<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请求的数量，加载时间会增加。您最好在服务器端使用某些东西将所有内容放在同一个文件中。

Answer 2

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

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

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

方法1：使用JavaScript包含其他JavaScript文件

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

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

只需调用下面的loadScript函数，在其中包含js文件。
```
loadScript('/js/jquery-1.7.min.js');
```

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

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

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

只需调用getScript函数函数即可。

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

How to include a JavaScript file in another JavaScript File

Answer 3

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

Answer 4

您可以将grunt设置为watch脚本文件夹，将concat / minify设置为单个文件，然后您只需将其包含在HTML中文件。

Answer 5

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

在开发过程中，您希望通过将文件保持独立以进行故障排除来做同样的事情，但在生产中，正如其他人所评论的那样，这是一种非常好的做法，可以minify代码并将它们合并到一个文件中。这使得它只能进行一次通话，并且可以显着降低您的开销。

Answer 6

我建议您使用JSCompress。它会将您的所有JavaScript代码压缩为一个单独的javascript文件。

如何在没有膨胀的情况下在HTML索引文件中导入多个javascript文件？

6 个答案: