在 <script> 标签的 src 属性中使用通配符？答案

【问题标题】：Use wildcard in src attribute of <script> tag?在 <script> 标签的 src 属性中使用通配符？
【发布时间】：2011-06-29 00:46:00
【问题描述】：

好的，愚蠢的问题，我认为这不可能，但是，我的 .aspx 页面顶部有这个标记...

<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>    
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.core.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.droppable.js" type="text/javascript"></script>

如果我能用这个代替它会不会很好......

<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>    
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.*.js" type="text/javascript"></script>

即使用* 作为通配符。

显然，因为这是 JS，我可以将所有这些脚本放入一个大脚本中并加载它，但我真的不喜欢这样做。

还有其他人有整理大量脚本参考的技术吗？还是我们只是忍受它？

【问题讨论】：

合并它们将是一种解决方案（并且很常见（如果你需要它们））。不能使用通配符。
好吧，谁是小丑在不评论的情况下投反对票？？展示自己！
我在工作的项目有大量的脚本引用。我正在使用带有 Ant XML 的 Google Closure Compiler 来创建单个缩小和压缩的 JavaScript 文件。

标签： javascript html wildcard script-tag

【解决方案1】：

据我所知这是不可能的，因为浏览器需要确切知道要请求哪些文件。

浏览器本质上必须通过请求来暴力破解您的服务器，希望能幸运。

我建议使用 Google 的闭包编译器将所有相似的（如果不是全部的话）javascript 文件合并到一个文件中。它会稍微大一点，但会减少 http 请求。

通过一些分析，您可以在最常用的文件和速度之间找到平衡点。

更新（来自 cmets）

我通常不愿意提供添加新的 javascript 库来解决太多 javascript 库的问题 :) 另外，这似乎是更直接的解决方案。目前我们使用 Google 闭包 API 来压缩和合并我们所有的 javascript 和 CSS，并使用 ANT 构建时间。很有魅力。这也可以在某种程度上直接使用 apache2 虚拟主机/htaccess（参见 html5boilerplate.com）来完成示例和限制

【讨论】：

+1 是的，这样想很好。我想浏览器期望每个请求返回一个文件。我想也许服务器可以找到所有匹配的文件并将它们连接成一个响应。不过显然不是！ - 除非你使用@David 的方法

【解决方案2】：

不，不是你想的那样。如果您使用 JavaScript 加载器（例如 RequireJS 或 LabJS），您可以执行类似的操作，因为您可以将每个文件压缩成一个数组并循环遍历它们，或者，如果您'感觉雄心勃勃地在前端和后端之间制定一些协议来支持这一点。

尽管如此，不建议这样做，因为它不容易维护。如果您将文件合并为一个文件的问题在于努力，那么 JS 缩小器（例如 UglifyJS 或 Closure Compiler）可能会解决您的问题。

【讨论】：

【解决方案3】：

实际上，正如其他人可能提到的那样，您可以在其中添加自己的脚本文件，然后执行一些操作，例如将路径添加到数组，循环遍历它，为每个项目调用 getScript。

$.getScript('ajax/test.js', function() {
    alert('Load was performed.');
});

【讨论】：

如果您需要包含大量 js 文件，例如如果您有 AngularJS 应用程序或自定义库：创建一个加载器脚本，将其添加到底部，然后使用 getScrpt jQuery 方法进行加载，结果代码更简洁！

【解决方案4】：

即使用 * 作为通配符。

没有。好吧，除非您想将服务器配置为通过脚本传递包含 * 字符的 URL，该脚本解析它并动态捆绑所有 JS。

显然，因为这是 JS，我可以将所有这些脚本放入一个大脚本中并加载它，但我真的不喜欢这样做。

这是一个很好的解决方案。通常，您希望将此作为站点构建脚本的一部分，同时调用一个压缩程序。

【讨论】：

【解决方案5】：

我会省略type="text/javascript"

The "type" attribute is required in HTML 4, but optional in HTML5.

但我仍然认为合并 src 是不可能的（从 HTML5 和 CSS3 开始）

【讨论】：

【解决方案6】：

您可以将所有 jquery.ui.* 文件的内容复制到一个文件中。作为额外的奖励，您的页面加载速度会稍微快一些。

【讨论】：

谢谢，我确实提到了这个问题的可能解决方案:)