我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?
当前回答
下面是使用HTML导入的浏览器(而不是Node.js)。
首先,所有 JavaScript 类和脚本都不是.js 文件,而是.js.html 文件(.js.html 只是在 HTML 页面和完整的 JavaScript 脚本/类之间识别),在 <script> 标签中,如下:
MyClass.js.html 的内容:
<script>
class MyClass {
// Your code here..
}
</script>
然后,如果你想进口你的班级,你只需要使用HTML进口:
<link rel="import" href="relative/path/to/MyClass.js.html"/>
<script>
var myClass = new MyClass();
// Your code here..
</script>
此分類上一篇: HTML 輸入將減少
HTML 进口减少,有利于 ES6 模块,您应该使用 ES6 模块。
其他回答
若要在 JavaScript 中输入另一个脚本,请使用输入关键字:
import '/src/js/example.js';
// both types of quotes work
import "/src/js/example2.js";
或者,而不是按时包含,请在上传之前使用脚本进行编辑。
我使用Sprockets(我不知道是否有其他人)。您将您的JavaScript代码建立在单独的文件中,并包含由Sprockets引擎处理的评论。
也看:
引入Sprockets:JavaScript依赖管理和折磨
但是,如果您需要从远程来源下载JavaScript,大多数现代浏览器可能会因为CORS或类似的东西阻止您的跨网站请求。
<script src="https://another-domain.com/example.js"></script>
它不会工作. 并做 document.createElement('script').src = '......' 也不会切断它. 相反,你可以做的是通过标准 GET 请求作为资源加载 JavaScript 代码,并这样做:
<script type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
let xhr = new XMLHttpRequest();
xhr.open("GET", 'https://raw.githubusercontent.com/Torxed/slimWebSocket/master/slimWebSocket.js', true);
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
script.innerHTML = this.responseText; // <-- This one
document.head.appendChild(script);
}
}
xhr.send();
</script>
通过自己抓住内容,浏览器不会注意到恶意的意图,并允许你去做请求. 然后你添加它在 <script> 的内部HTML 而不是. 这仍然会导致浏览器(至少在Chrome中测试) 打破 / 执行脚本。
再一次,这是一个边缘案例使用案例. 您将没有背面兼容性或浏览器兼容性可能. 但有趣/有用的事情要知道。
这就是简单的:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
在后端,您可以使用 CommonJS 模块。
//a.js
function func () {
var result = "OK Bro";
return result;
}
module.exports = { func };
//b.js
var a = require('./a.js');
console.log(a.func);