如何在 HTML 索引文件中导入多个 javascript 文件而不会出现膨胀？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14460231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you import multiple javascript files in HTML index file without the bloat?
提问by Oliver Watkins
Is there anyway of importing multiple javascript files in HTML without having to specify each file?
是否可以在 HTML 中导入多个 javascript 文件而不必指定每个文件？
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
ie. can I specify something like js/toolkit/*?
IE。我可以指定类似js/toolkit/* 的东西吗？
I have 50+ javascript files that i have to import, and to specify each file seems very time consuming.
我有 50 多个 javascript 文件需要导入，并且指定每个文件似乎非常耗时。
采纳答案by Binary Brain
There's a way:
有一个办法：
You can create a javascript function that takes the path as a parameter and creates these HTML lines:
您可以创建一个将路径作为参数的 javascript 函数并创建以下 HTML 行：
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
And you'll just have to call this:
你只需要调用这个：
loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");
But this is not recommended because the load time will be increased due to the number of HTTP requests. You should better use something in the server side to put everything in the same file.
但是不推荐这样做，因为HTTP请求的数量会增加加载时间。您最好在服务器端使用一些东西将所有内容放在同一个文件中。
回答by Binary Brain
Including a JavaScript file in another JavaScript file is common in web development.
在另一个 JavaScript 文件中包含一个 JavaScript 文件在 Web 开发中很常见。
Because many times we include the JavaScript file at run time on the behalf of some conditions.
因为很多时候我们在运行时包含 JavaScript 文件代表某些条件。
So, we can achieve this using JavaScript as well as using jQuery.
因此，我们可以使用 JavaScript 以及使用 jQuery 来实现这一点。
Method 1: Use JavaScript to include another JavaScript file
方法 1：使用 JavaScript 包含另一个 JavaScript 文件
Add the following function in your web page.
function loadScript(url) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; head.appendChild(script); }just call the below loadScript function, where you want to include the js file.
loadScript('/js/jquery-1.7.min.js');
在您的网页中添加以下功能。
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');
Method 2: Use jQuery to include another JavaScript file.
方法 2：使用 jQuery 包含另一个 JavaScript 文件。
Add jQuery File in your webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>Just call the getScript function functions.
jQuery(document).ready(function(){ $.getScript('/js/jquery-1.7.min.js'); });
在您的网页中添加 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'); });
回答by dfsq
No you can't do it. And by the way this is not good idea to load all 50 separate files. Consider compressing them in one single script to improve performance and decrease page load time.
不，你不能这样做。顺便说一下，加载所有 50 个单独的文件并不是一个好主意。考虑将它们压缩在一个脚本中以提高性能并减少页面加载时间。
回答by thSoft
回答by Ben Felda
You will need to specify each file for the browser to know what to retrieve, but depending on the IDE you are using, there may be shortcuts for doing this, (Visual Studios allows you to drag and drop script files into the html to add references).
您需要为浏览器指定每个文件以了解要检索的内容，但根据您使用的 IDE，可能有执行此操作的快捷方式，（Visual Studios 允许您将脚本文件拖放到 html 中以添加引用）。
During development, you want to do just as your doing by keeping the files separate for troubleshooting, but in production, as others have commented, its very good practice to minifyyour code and combine them into one file. That makes it only one call, and can reduce your overhead significantly.
在开发过程中，您希望通过将文件分开以进行故障排除来做同样的事情，但在生产中，正如其他人所评论的那样，缩小代码并将它们合并到一个文件中是非常好的做法。这使得它只有一次调用，并且可以显着减少您的开销。
回答by Mohd Khairulamirin
I recommend you to use JSCompress. It will compress all your javascript code into one single javascript file.
我建议您使用JSCompress。它会将您所有的 javascript 代码压缩到一个 javascript 文件中。
