JavaScript 包括答案

【问题标题】：JavaScript includesJavaScript 包括
【发布时间】：2012-12-15 17:04:27
【问题描述】：

我有 4 个 javascript 文件（每个文件对应一个 HTML 文件），并且 3 个函数在所有 4 个文件中都是相同的。我想找到一个流畅的解决方案，我可以以某种方式分别包含这 3 个函数...是否可以在 .js 中包含 .js？

【问题讨论】：

每个 html 文件只需在 <script> 标签中包含 2 个不同的文件 - 常见的一个包括 3 个共享功能，另一个是页面特定的。
有一些方法可以从 JS 中执行 JS 包含，但这不是必需的。
为什么不创建一个带有函数的commons.js 并添加一个额外的包含？

【解决方案1】：

你可以有多个<script>标签：

<script src="lib.js"></script>
<script>
// do stuff
</script>

你可以使用jQuery:

$.getScript("lib.js", function() {
  // do stuff
});

您可以使用browserify 或YUICompressor 或Google's Closure Compiler 等预处理器。

【讨论】：

【解决方案2】：

您可以自己编写，例如它在谷歌分析中的作用：

(function(){
    var lastIncludedScript = document.getElementsByTagName('script')[0];
    var yourScript = document.createElement('script');
    yourScript.type = 'text/javascript';
    yourScript.src = 'path/to/script.js';
    lastIncludedScript.parentNode.insertBefore(yourScript, lastIncludedScript);
})();

或在函数中：

function includeScript( path ){
    var lastIncludedScript = document.getElementsByTagName('script')[0];
    var yourScript = document.createElement('script');
    yourScript.type = 'text/javascript';
    yourScript.src = path;
    lastIncludedScript.parentNode.insertBefore(yourScript, lastIncludedScript);
}

用法：

includeScript( 'path/to/script.js' );

【讨论】：

【解决方案3】：

您可以查看 this nice explanation 关于异步加载 javascript 文件的信息。这可以解决你的问题。或者查看this stack overflow question，了解如何在其他 javascript 文件中加载 javascript 文件。

但是，将您使用的所有内容包含在一个 javascript 文件中并在每个站点上加载相同的文件可能值得一试。这提高了性能，因为只需发出一个 http 请求即可加载所有 javascript，并且可以非常有效地缓存它（因此以后无需加载任何 javascript）。

【讨论】：

【解决方案4】：

使用每个 html 文件中所需的正确 js 文件。这将解决您的问题。也可以为这两个 html 文件添加一个包含一般功能的功能。这应该可以解决您的问题。

【讨论】：

【解决方案5】：

在浏览器中包含来自其他 JavaScript 的文件有点慢。我会编写一个服务器端脚本，将所有相关的 JavaScript 组合并缩小到一个“文件”中，然后发送给客户端。

您的页面可以将参数传递给此脚本以选择需要包含的内容。

【讨论】：