我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?
当前回答
我基本上做如下,创建一个新的元素,并添加它来主导:
var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);
在 jQuery 中:
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// Script is now loaded and executed.
// Put your dependent JavaScript code here.
});
其他回答
另一个方法是使用HTML进口,这些可以包含脚本参考以及风格表参考。
您可以将 HTML 文件链接到
<link rel="import" href="vendorScripts.html"/>
在 vendorScripts.html 文件中,您可以包含您的脚本参考,如:
<script src="scripts/vendors/jquery.js"></script>
<script src="scripts/vendors/bootstrap.js"></script>
<script src="scripts/vendors/angular.js"></script>
<script src="scripts/vendors/angular-route.js"></script>
查看 HTML Imports 更多详细信息。
不幸的是,它只在Chrome中工作。
可以动态地创建一个JavaScript标签并将其添加到来自其他JavaScript代码的HTML文档中,这将加载针对JavaScript文件。
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");
在这里展示的大多数解决方案都意味着动态加载. 我正在寻找一个编译器,将所有依赖的文件集成到一个单一的输出文件. 相同的Less/Sass预处理器处理CSS @import在规则上. 因为我找不到任何值得这个类型的东西,我写了一个简单的工具解决问题。
因此,这里是编译器, https://github.com/dsheiko/jsic,它取代 $import(“文件路径”)与请求的文件内容安全。
主 / 主 / JS
var foo = $import("./Form/Input/Tel");
src / 表格 / 输入 / Tel.js
function() {
return {
prop: "",
method: function(){}
}
}
现在我们可以运行编辑器:
node jsic.js src/main.js build/mail.js
接收合并文件
主 / 主 / JS
var foo = function() {
return {
prop: "",
method: function(){}
}
};
如果您打算上传 JavaScript 文件使用所引入/包含的文件中的功能,您也可以定义全球对象,并将功能定义为对象项目。
世界.js
A = {};
文件1JS
A.func1 = function() {
console.log("func1");
}
文件2JS
A.func2 = function() {
console.log("func2");
}
主.js
A.func1();
A.func2();
您只需在 HTML 文件中包含脚本时要小心,命令应该如下:
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
这应该做:
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
