关于javascript：如何在另一个JS文件中包含JS文件？

How to include js file in another js file?

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
Including a .js file within a .js file

如何将一个JS文件包含到另一个JS文件中，以遵循DRY原则，避免代码重复。

您只能在HTML页面中包含脚本文件，而不能在其他脚本文件中包含。也就是说，您可以编写将"包含"脚本加载到同一页面的javascript：

1
2
3

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

但是，您的代码很可能依赖于"包含"脚本，在这种情况下，它可能会失败，因为浏览器将异步加载"导入"脚本。您最好的选择是简单地使用第三方库(如jquery或yui)，这可以为您解决这个问题。

1
2
3
4
5
6

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// script is now loaded and executed.
// put your dependent JS here.
});

相关讨论

我不同意批评document.write技术(见Vahan Margaryan的建议)。我喜欢document.getElementsByTagName('head')[0].appendChild(...)的方式(见MattBall的建议)，但有一个重要问题：执行方式中包含的脚本的顺序。我必须在下面更准确地描述这个问题。

最近我花了很多时间来重现一个相近的问题。众所周知，jquery插件使用相同的技术(请参阅这里的src)来加载文件，但不同的人报告了这方面的工作问题。我可以这样描述这个问题。让我们为您提供由多个脚本组成的javascript库，其中一个loader.js加载所有部分。这些部分中的一些来自另一部分。让我们为每个添加另一个main.js脚本，在loader.js之后立即使用来自loader.js的对象。问题是有时，main.js在loader.js加载所有脚本之前执行。在main.js脚本内部使用$(document).ready(function () {/*code here*/});也无济于事。在loader.js中使用级联onload事件处理程序将遵循顺序而不是并行加载脚本，并且难以使用main.js脚本，该脚本应仅包含在loader.js之后的某个位置。

我可以在我的环境中重现这个问题，并且可以看到在InternetExplorer8中脚本的执行顺序可以是另一个包含javascript的顺序。如果您需要包含一些脚本(其中一个脚本依赖于另一个脚本)，这是非常困难的问题。问题和在并行加载JavaScript文件中进行了描述。由于建议使用document.writeln的解决方法：

1 2	document.writeln("<script type='text/javascript' src='Script1.js'>"); document.writeln("<script type='text/javascript' src='Script2.js'>");

在这种情况下，"脚本是并行下载的，但按照写入页面的顺序执行"。从document.getElementsByTagName('head')[0].appendChild(...)技术改为document.writeln技术后，我再也没有看到任何问题。

所以我建议你使用EDCOX1，15。

更新：如果有人感兴趣，他可以尝试在Internet Explorer中加载(和重新加载)页面(页面使用document.getElementsByTagName('head')[0].appendChild(...)技术)，并与使用document.writeln的固定版本进行比较。(页面代码相对较脏，不是我写的，但可以用来重现我描述的问题)。

这是不可能的直接。你也可以写一些预处理器来处理这个问题。

如果我理解正确，那么下面是有助于实现这一目标的内容：

使用一个预处理器来运行JS文件，例如查找类似"@import somefile.js"的模式，并将其替换为实际文件的内容。Nicholas Zakas(雅虎)在爪哇编写了一个这样的库，您可以使用它(HTTP://www. NCZNLNI.NET/BLUG/NI9/09/22/AddioPixel-A JavaScript PTCSS-CONTAATION-Too/)
如果您使用的是Ruby on Rails，那么您可以尝试一下jammit资产打包，它使用assets.yml配置文件，您可以在其中定义包含多个文件的包，然后在实际网页中通过包名称引用它们。
尝试使用像RequireJS这样的模块加载器或像LabJS这样的脚本加载器来控制加载顺序并利用并行下载。

目前，javascript不提供将javascript文件包含到另一个类似css(@import)的文件中的"本机"方法，但上述所有工具/方法都有助于实现您提到的dry原则。我可以理解，如果您来自服务器端的背景，可能感觉不到直观性，但事实就是这样。对于前端开发人员来说，这个问题通常是一个"部署和打包问题"。

希望它有帮助。

相关讨论

你需要这样写

1	document.write('<scr'+'ipt type="text/javascript" src="other js file.js"></scr'+'ipt>');

在第一个JS文件中

相关讨论