JavaScript中是否有类似于@import
CSS的东西,允许您在另一个JavaScript文件中包含一个JavaScript文件?
如何在另一个JavaScript文件中包含一个JavaScript文件?
用现代语言检查脚本是否已经加载,它将是:
function loadJs(url){
return new Promise( (resolve, reject) => {
if (document.querySelector(`head > script[src="${src}"]`) !== null) return resolve()
const script = document.createElement("script")
script.src = url
script.onload = resolve
script.onerror = reject
document.head.appendChild(script)
});
}
用法(异步/等待):
try { await loadJs("https://.../script.js") }
catch(error) {console.log(error)}
要么
await loadJs("https://.../script.js").catch(err => {})
用法(承诺):
loadJs("https://.../script.js").then(res => {}).catch(err => {})
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
如果您使用的是Web Workers,并且希望在worker的范围内包括其他脚本,则有关将脚本添加到head
标记等的其他答案将对您不起作用。
幸运的是,Web Workers具有自己的importScripts
功能,这是Web Workers范围内的全局功能,它是浏览器本身的固有功能,因为它是规范的一部分。
另外,作为对您问题的第二高投票答案,RequireJS还可以处理Web Worker内的脚本(可能会importScripts
自称,但还有一些其他有用的功能)。
应该这样做:
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
如果要加载JavaScript文件的目的是使用导入/包含的文件中的函数,则还可以定义一个全局对象并将这些函数设置为对象项。例如:
global.js
A = {};
file1.js
A.func1 = function() {
console.log("func1");
}
file2.js
A.func2 = function() {
console.log("func2");
}
main.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>
此处显示的大多数解决方案都暗含动态载荷。我正在搜索的是一个将所有依赖文件组装成一个输出文件的编译器。与Less / Sass预处理器处理CSS @import
规则相同。由于我没有找到任何像样的东西,因此我编写了一个简单的工具来解决该问题。
这就是编译器https://github.com/dsheiko/jsic,它可以$import("file-path")
安全地替换为请求的文件内容。这是对应的Grunt插件:https : //github.com/dsheiko/grunt-jsic。
在jQuery master分支上,它们仅将原子源文件连接成一个以开头intro.js
和以结束的单个源文件outtro.js
。那不适合我,因为它在源代码设计上没有灵活性。查看jsic的工作方式:
src / main.js
var foo = $import("./Form/Input/Tel");
src /表格/输入/Tel.js
function() {
return {
prop: "",
method: function(){}
}
}
现在我们可以运行编译器:
node jsic.js src/main.js build/mail.js
并获得合并的文件
build / main.js
var foo = function() {
return {
prop: "",
method: function(){}
}
};
语句import
在ECMAScript 6中。
句法
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
可以动态生成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");
我认为更简洁的另一种方法是发出同步Ajax请求,而不使用<script>
标签。Node.js处理的内容也包括在内。
这是使用jQuery的示例:
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
然后,您可以像通常使用include那样在代码中使用它:
require("/scripts/subscript.js");
并能够在下一行中从所需脚本中调用函数:
subscript.doSomethingCool();
@import
可以使用Mixture之类的工具通过其特殊.mix
文件类型来实现类似CSS的JavaScript导入的语法(请参见此处)。我想该应用程序只是内部使用一种上述方法,尽管我不知道。从文件的Mixture文档中
.mix
:这是一个
.mix
将多个.js
文件合并为一个的示例文件:Mixture将其输出为
scripts-global.js
,也将其输出为缩小版本(scripts-global.min.js
)。注意:除了将它用作前端开发工具之外,我与Mixture无关。在看到一个运行中的
.mix
JavaScript文件(在其中一个Mixture样板中)并对它有点困惑时,我遇到了这个问题(“我能想到吗?”)然后我意识到这是一种特定于应用程序的文件类型(有些令人失望,同意)。但是,认为这些知识可能对其他人有所帮助。更新:混合物现在免费(脱机)。
更新:混合物现已停产。旧的混合物版本仍然可用