如何在其他js文件中包含js文件？

问题描述：

可能重复：
Including a .js file within a .js file 如何在其他js文件中包含js文件？

我怎么能包括的js文件到另一个js文件，这样才能坚持DRY principle和避免重复代码。

[在.js文件中包含.js文件]的可能重复（http://stackoverflow.com/questions/2145914/including-a-js-file-within-a-js-file）或[this一个]（http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file） – user113716 2011-01-08 15:47:30

答

写了这么

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

您只能包含在HTML页面中的脚本文件，而不是在另一个脚本文件。这就是说，你可以写它加载你的“包括”脚本到同一页面的JavaScript：

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

有你的代码取决于你的“包括”一个很好的机会剧本，然而，在这种情况下，它可能会失败因为浏览器将异步加载“导入”脚本。你最好的选择就是简单地使用像jQuery或YUI这样的第三方库，它为你解决了这个问题。

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

答

这是不可能的。你可以写一些可以处理的预处理器。

如果我没有理解它正确然后在下面是东西，可以帮助实现这一目标：

使用预处理器将通过您的JS文件运行例如寻找像“@import模式somefile.js“并将其替换为实际文件的内容。尼古拉斯Zakas（雅虎）在Java中写一个这样的库，你可以如果您正在使用Ruby on Rails的，那么你可以给Jammit资产打包尝试使用（http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/）
，它采用assets.yml配置文件，您可以定义可以包含多个文件的软件包，然后通过软件包名称在实际网页中引用它们。
尝试使用像RequireJS这样的模块加载器或像LabJs这样的脚本加载器来控制加载顺序以及利用并行下载。

的JavaScript目前不提供包括JavaScript文件到另一个像CSS（@import）的“原生”的方式，但所有以上提到的工具/方法可以帮助实现你所提到的DRY原则。我可以理解，如果你来自服务器端的背景，它可能不会感觉到直觉，但事情是这样的。对于前端开发人员来说，这个问题通常是“部署和打包问题”。

希望它有帮助。

你能举个例子吗？ – 2011-01-08 15:46:50

我编辑了我的答案，以更好地解释我的想法。希望这一次我清楚了。 – Arnab 2011-01-08 16:01:39

答

你需要在你的第一个js文件

+12

呃，请不要**提倡使用`document.write（）`。 – 2011-01-08 15:49:56

答

我不同意document.write技术（参见suggestion of Vahan Margaryan）的评论家。我喜欢document.getElementsByTagName('head')[0].appendChild(...)（见suggestion of Matt Ball）的方式，但是有一个重要的问题：这个脚本包含的脚本执行顺序是。我必须在下面更详细地描述这个问题。

最近我花了很多时间重现one close problem。众所周知，jQuery插件使用相同的技术（请参见src here）来加载文件，但不同的人报告了这个问题。我可以将问题描述如下。让我们来创建一个由多个脚本组成的JavaScript库，其中一个加载所有零件。一部分来自另一部分。让我们包含另一个main.js脚本，每<script>使用来自loader.js之后的loader.js之后的对象。问题是有时候，main.js在loader.js加载的所有脚本之前执行。使用$(document).ready(function() {/*code here*/});里面的main.js脚本也无济于事。在loader.js中级联onload事件处理程序的使用将遵循顺序而不是并行加载脚本，并将难以使用main.js脚本，该脚本应该仅包括在loader.js之后的某处。

我可以在我的环境中重现问题，并且可以看到在Internet Explorer 8中执行脚本的顺序可以是另一个顺序，包括JavaScript。如果你需要包含一些依赖另一个脚本的脚本，这是非常困难的问题。该问题在Loading Javascript files in parallel中描述。作为解决办法是建议使用document.writeln：

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

据介绍，本案的“脚本并行下载，但他们写的页面顺序执行”。从document.getElementsByTagName('head')[0].appendChild(...)技术更改为document.writeln后，我从来没有看到任何问题更多。因此我建议您使用document.writeln。

修订：如果有人有在Internet Explorer（页面使用document.getElementsByTagName('head')[0].appendChild(...)技术）的兴趣，他可以尝试加载（和重装）the page和比较the fixed version使用document.writeln。（该页面的代码相对较脏，不是来自我的，但它可以用来重现我所描述的问题）。

如何在其他js文件中包含js文件？

相关推荐