时间戳

首页 > 解决方案 > 当以正确的顺序包含脚本时，为什么我们应该在 ecmascript 中进行导入导出

javascript - 当以正确的顺序包含脚本时，为什么我们应该在 ecmascript 中进行导入导出

问题描述

这可能是一个非常基本的问题，当脚本包含以正确的顺序适用于函数时

索引.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 脚本中拥有像导入、导出这样的机制。

标签： javascriptecmascript-6ecmascript-5ecma

解决方案

使用模块可以限制脚本中变量的范围。

想象一下，您有一个包含许多不同部分的大页面——您可能有 10 或 20 个不同的脚本。如果没有模块，在每个不同脚本的顶层声明的每个变量都是全局的。例如，您的sayHello和Rectangle都是全局的。脚本和代码越多，此类全局变量意外冲突的可能性就越大（例如，您可能定义了一个handleClick在一个脚本中命名的函数，而另一个函数也在另一个脚本中命名handleClick）。会有问题。

使用导入不仅消除了全局变量的问题（因为模块变量的作用域仅限于它们的模块），而且它还使依赖链显式，这非常有用。例如，您可以看到脚本 A 依赖于fn脚本 B 中的函数。（否则，您可能一眼就能看到脚本 A 依赖于可能在代码库中某处fn定义的某个函数。）

显式导入和导出还允许在构建系统中进行 tree-shaking（自动删除未使用的变量）。

可以说，使用模块可以使更大的代码库更易于维护。

但是，在像您的示例中这样的小页面中，您是对的 - 人们很可能会得出结论，当只有几行代码时，它不会提供任何真正的好处。

推荐阅读