这可能是一个非常基本的问题，当脚本以正确的顺序包含时，函数效果很好
索引.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>
件.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 );
}
}
应用.js
//function invocation
sayHello();
// Object creation
rect1 = new Rectangle( 10, 4);
rect1.draw();
整个代码是如此明显，而且它有效，我已经测试过了。现在的问题是，为什么我们应该在 ecma 脚本中有一个像导入、导出这样的机制。
使用模块可以限制脚本中变量的作用域。
想象一下，你有一个包含许多不同部分的大页面 - 你可能有 10 或 20 个不同的脚本。如果没有模块，每个不同脚本中在顶层声明的每个变量都是全局的。例如，您的sayHello和Rectangle都是全局的。脚本和代码越多，此类全局变量意外冲突的可能性就越大(例如，也许您在一个脚本中定义了一个名为handleClick的函数，而另一个函数也在另一个脚本中也定义了名为handleClick的函数)。会有问题。
改用导入不仅可以消除全局变量的问题(因为模块变量的作用域仅限于其模块)，而且还使依赖链显式，这非常有用。例如，您可以看到脚本 A 依赖于脚本 B 中的函数fn(否则，您可能一目了然地看到脚本 A 依赖于某个函数fn该函数可能在代码库中的某个位置定义。
显式导入和导出还允许在构建系统中摇树(自动删除未使用的变量)。
使用模块可以说可以使更大的代码库更易于维护。
但是，在像您的示例中这样的小页面中，您是对的 - 人们很可能会得出结论，当只有几行代码时，它不会提供任何真正的好处。