如何解决当以正确的顺序包含脚本时,为什么要在ecmascript中进行导入导出
这可能是一个非常基本的问题,当脚本以正确的顺序包含在函数中时效果很好
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ecmascript </title>
</head>
<body>
<h1>ECMA Script</h1>
<script src="piece.js"></script>
<script src="app.js"></script>
</body>
</html>
piece.js
// function to
function sayHello(){
window.alert('Hello alert');
console.log('Hello');
}
class Rectangle {
constructor( height,width ){
this.height = height;
this.width = width;
}
draw(){
console.log( 'Rectangle is drawn ... height : ' + this.height + ' width :' + this.width );
}
}
app.js
//function invocation
sayHello();
// Object creation
rect1 = new Rectangle( 10,4);
rect1.draw();
我测试过,整个代码是如此明显,并且可以正常工作。现在的问题是,为什么要在ecma脚本中使用类似import,export的机制。
解决方法
使用模块,您可以约束脚本中变量的范围。
想象一下,您有一个很大的页面,其中包含许多不同的部分-您可能有10或20个不同的脚本。如果没有模块,则在每个不同脚本中在顶层声明的每个变量都是全局变量。例如,您的sayHello
和Rectangle
都是全局的。一个脚本和代码越多,此类全局变量偶然冲突的可能性就越大(例如,也许您在一个脚本中定义了名为handleClick
的函数,而在另一个脚本中也定义了handleClick
的函数一个不同的脚本)。会有问题。
使用导入不仅可以消除全局变量的问题(因为模块变量的作用域仅限于其模块),而且还使依赖项链显式,即很有用。例如,您可以看到脚本A依赖于脚本B中的功能fn
。(否则,您可能一眼就能看到,脚本A依赖于某个功能fn
,这大概是在代码库中的 somewhere 中定义。)
明确的进出口还允许在构建系统中进行摇树(自动删除未使用的变量)。
使用模块可以使较大的代码库更易于维护。
但是,在您的示例这样的小页面中,您是对的-一个很好的结论是,当只有几行代码时,它不会提供任何真正的好处
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。