h76*_*651 4 html javascript global-variables
我试图从另一个文件访问var一个文件.这是我有的:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="btn">Global</button>
<script src="/test.js"></script>
<script src="/testpass.js"></script>
</body>
</html>
test.js:
export var globalVariable = {
output: "test this"
};
testpass.js:
import { globalVariable } from './test.js'
document.getElementById("btn").addEventListener("click", function(){
alert(globalVariable.output);
});
什么都没发生.我也尝试过
var globalVariable = {
output: "test this"
};
然后简单地从另一个文件中访问它,如本答案所示: 从一个javascript文件调用变量到另一个,但它不起作用.试着按照这个回答中提到的那样导出它:我可以从另一个文件中访问变量吗？同样但没有成功.我使用的是sublime text和vue.js,但它并不适用于它们.
另外,如果我做这样的事情:
import { globalVariable } from '.test.js'
document.getElementById("btn").addEventListener("click", function(){
alert("Not printing the globalVariable here");
});
整个javascript文件似乎失败,并且在HTML文件中调用时根本不起作用.
您应该从Web控制台中的浏览器JavaScript引擎收到错误.要使用import和export,您必须将代码视为模块.您的script标签没有,他们将代码视为脚本.要testpass.js作为模块处理,您必须使用type="module":
<script src="/testpass.js" type="module"></script>
无需列出test.js,testpass.js将加载它.所以:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="btn">Global</button>
<script src="/testpass.js" type="module"></script>
</body>
</html>
可悲的是,我们不能显示SO的堆栈片断模块,但如果你做这些改变,这codesandbox例子是,你到底是什么了(除了我换src="/testpass.js"到src="./testpass.js").
请注意,这globalVariable 不是一个全局变量(这是一个Good Thing™).它是test.js导出的局部变量.任何其他模块都可以导入它,但它不是全局的.