如何在另一个js文件中包含一个js文件,以遵循DRY原则并避免重复代码。
如何在另一个js文件中包含一个js文件,以遵循DRY原则并避免重复代码。
您只能在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.
});
$.getScript
,第二个依赖脚本将在第一个脚本加载并执行后开始加载。这是顺序而非并行加载。此外,如果有人通过<script>
包含loader.js
文件,该文件会加载某些JavaScript库(比如jQuery UI),那么下一个<script>
中不能直接加载使用该库的main.js
。因此,使用JavaScript库不像通常那样简单。为了理解:我想使用这种方法,但需要建议其他更实用的方法。 - Olegimported.onload
来级联脚本。但是,如果我们继续遇到我所描述的相同问题,则需要考虑其他解决方案。 - Olegdocument.writeln
并行加载脚本并以相同正确的顺序执行(评估)。该页面是XHTML格式,因此来自https://dev59.com/l3RA5IYBdhLWcg3w2xwI的第一条语句也是错误的。因此没有找到理由(我可以验证)**为什么**在位于 <head>
中的<script>
的内部使用document.writeln
是不好的。我希望有人可以给我发布一个解释。 - Oleg我不赞同使用document.write
技术(参见Vahan Margaryan的建议)。我喜欢document.getElementsByTagName('head')[0].appendChild(...)
(参见Matt Ball的建议),但是有一个重要的问题:脚本执行顺序。
最近,我花了很多时间复现一个类似的问题one similar issue,甚至知名的jQuery插件也使用了相同的技术(查看src here)来加载文件,但其他人也报告了这个问题。想象一下,你有一个由许多脚本组成的JavaScript库,其中一个loader.js
加载所有部分。有些部分是彼此依赖的。想象一下,你在<script>
中包含另一个main.js
脚本,该脚本紧接着使用loader.js
中的对象。问题是有时main.js
在loader.js
加载所有脚本之前就已经执行了。在main.js
脚本中使用$(document).ready(function () {/*code here*/});
并不能解决问题。在loader.js
中使用级联的onload
事件处理程序将使脚本加载变成顺序而不是并行,并且将使使用main.js
脚本变得困难,因为它应该只是在loader.js
之后的某个位置进行包含。
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中加载(和重新加载)the page(该页面使用document.getElementsByTagName('head')[0].appendChild(...)
技术),然后与the fixed version使用document.writeln
进行比较。(页面的代码相对不太规范,不是我的,但可用于重现该问题)。
您需要编写一个document.write对象:
document.write('<script type="text/javascript" src="file.js" ></script>');
将其放置在您的主javascript文件中
document.write()
。 - Matt Balldocument.write
的批评。我在回答中写了更多信息。 - Oleg这是不可能直接实现的。你可以编写一些预处理器来处理它。
如果我理解正确,以下内容可能有助于实现此目标:
使用预处理器,例如运行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资源打包,它使用assets.yml配置文件,在其中可以定义包含多个文件的包,并通过包名称在实际网页中引用它们。