如何在另一个js文件中包含js文件?[重复]

2020/10/08 20:40 · javascript ·  · 0评论

我如何将一个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.
});

我不同意这种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脚本的使用变得困难,脚本应该只是在之后的include loader.js

通过在我的环境中重现该问题,我可以看到** Internet Explorer 8中脚本的执行顺序在包含JavaScript *方面可以有所不同。如果您需要包含相互依赖的脚本,这将是一个非常困难的问题。并行加载Javascript文件中描述了此问题,建议的解决方法是使用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(...)技术),然后用比较固定的版本使用document.writeln(页面的代码相对较脏,不是我提供的,但是可以用来重现该问题)。

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

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

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

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

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

  • 使用可以在您的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配置文件,您可以在其中定义可以包含多个文件的软件包,然后通过软件包名称在实际的网页中对其进行引用。

  • 尝试使用诸如RequireJS之类的模块加载器或诸如LabJs类的脚本加载器,它们能够控制加载顺序以及利用并行下载的优势。

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

希望能帮助到你。

本文地址:http://javascript.askforanswer.com/ruhezailingyigejswenjianzhongbaohanjswenjianzhongfu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!