如何在另一个js文件中包含js文件？

Question

如何在另一个js文件中包含js文件？

可能重复:
在.js文件中包含.js文件

如何将js文件包含到另一个js文件中,以便坚持DRY原则并避免重复代码.

Answer 1

您只能在HTML页面中包含脚本文件,而不能在其他脚本文件中包含脚本文件.也就是说,您可以编写JavaScript来将"包含"脚本加载到同一页面中:

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

我只能重复:在使用`$ .getScript`的情况下,第二个依赖的脚本将在第一个加载并执行后开始加载****.它是**顺序而不是并行加载**.此外,如果某人包含每个`<script>`这样的`loader.js`文件,它加载了一些JavaScript库(例如想想jQuery UI),那么一个人不能只加载使用库中的库的`main.js`.下一个`<script>`.因此,JavaScript库的使用将不像往常那么容易.为了理解:我想使用这种方式,但是应该提出更多建议以使其切实可行. (5认同)
例如，如果您将使用 Google Chrome 开发者工具的“时间线”，您可以验证 http://www.ok-soft-gmbh.com/jqGrid/iedeveloper.htm 使用 `document.writeln` 加载脚本并行并执行（评估）以相同的正确顺序。该页面是 XHTML，因此来自 http://stackoverflow.com/questions/802854/why-is-document-write-thinked-a-bad-practice 的第一个陈述也是错误的。所以没有找到和原因（我可以验证）**为什么**在放置在`<head>`中的`<script>`内使用`document.writeln`是不好的。我希望有人给我寄一张。 (2认同)
根据此文档 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script with HTML5 您可以在使用 document.createElement() 时指定 async="false" 强制加载同步。这似乎可以解决使用这种方法的问题。 (2认同)

Answer 2

Ole*_*leg 18

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

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

我可以在我的环境中重现该问题,并且可以看到在Internet Explorer 8中执行脚本的顺序可以是包含JavaScripts的顺序.如果你需要包含一些依赖于另一个脚本的脚本,这是一个非常难的问题.这个问题在并行加载Javascript文件中有所描述.建议使用变通方法document.writeln:

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

Run Code Online (Sandbox Code Playgroud)

描述了"脚本是并行下载但按照它们写入页面的顺序执行"的情况.从document.getElementsByTagName('head')[0].appendChild(...)技术变为document.writeln我之前从未见过任何问题.

所以我建议你使用document.writeln.

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

Answer 3

Arn*_*nab 5

无法直接进行。您也可以编写一些可以处理该问题的预处理器。

如果我对它的理解正确，那么以下是有助于实现这一目标的事情：

使用可以在您的JS文件中运行的预处理器，例如查找“ @import somefile.js”之类的模式，并将其替换为实际文件的内容。Nicholas Zakas（Yahoo）用Java编写了一个这样的库，您可以使用（http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/）
如果您使用的是Ruby on Rails，则可以尝试使用Jammit资产包装，它使用asset.yml配置文件，您可以在其中定义包含多个文件的软件包，然后在实际的网页中按软件包名称进行引用。
尝试使用诸如RequireJS之类的模块加载器或诸如LabJs之类的脚本加载器，它们能够控制加载顺序以及利用并行下载的优势。

JavaScript当前不提供将JavaScript文件包含到另一个CSS（例如@import）中的“本机”方式，但是上述所有工具/方式都有助于实现您提到的DRY原理。我可以理解，如果您来自服务器端背景，可能会感觉不直观，但这就是事实。对于前端开发人员，此问题通常是“部署和打包问题”。

希望能帮助到你。

Answer 4

小智 5

您需要编写一个document.write对象：

document.write('<script type="text/javascript" src="file.js" ></script>');

Run Code Online (Sandbox Code Playgroud)

并将其放在您的主要javascript文件中

gh，请不要使用`document.write（）`。 (17认同)
@Matt Ball：没错，但是由于Vahan是新来的，所以您可能想解释原因。 (10认同)
@Konerak：[这就是原因]（http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice）。 (9认同)
+1我不同意`document.write`的批评家。我在回答问题时写了更多信息。 (3认同)

归档时间：	15 年前
查看次数：	669524 次
最近记录：	6 年，3 月前