ES6 模块
ES6 模块
模块是 JavaScript 的一部分或大块写在文件中的代码。 JavaScript 模块通过将整个代码划分为可以从任何地方导入的模块来帮助我们模块化代码。模块使维护代码、调试代码和重用代码段变得容易。每个模块都是一段代码，一旦加载就会执行。
ES6 中的模块是必不可少的概念。虽然不是处处可用，但今天我们可以使用它并且可以转译成 ES5 代码。转译是将代码从一种语言转换为其等效语言的过程。 ES6 模块转译工具负责将 ES6 模块转换为 AMD 中兼容 ES5 的代码(异步模块定义是 JavaScript 编程语言的规范) 或 CommonJS 风格。
在构建过程中，我们可以使用Gulp、Babel、Grunt或其他转译器来编译模块。模块中的变量和函数不可用，除非文件导出它们。
导出和导入模块
导出模块
JavaScript 允许我们使用export 关键字导出函数、对象、类和原始值。有两种导出:
命名导出: 以名称区分的导出称为命名导出。我们可以使用命名导出导出多个变量和函数。
默认导出: 使用默认导出最多可以导出一个值。
导入模块
要导入模块，我们需要使用import关键字。从模块导出的值可以使用 import 关键字导入。我们可以在另一个模块中导入导出的变量、函数和类。要导入一个模块，我们只需指定它们的路径。
当您导入named 导出时，您必须使用与相应对象相同的名称。当您导入默认导出时，我们可以使用相应对象的任何名称。
让我们详细说明这些导出和导入。
命名导出和导入
命名导出通过它们的名称来区分。使用命名导出导出的类、变量或任何函数只能使用相同的名称导入。
多个变量和函数可以通过使用命名导出。
语法
让我们看看在类中使用命名导出的语法、函数或变量。下面我们将展示如何使用 named 导出单独导出类、变量和函数。
//Named export in class
class Nokia{
//properties
//methods
}
export {Nokia}; //Named export
//Named export in functions
function show(){
}
export {show};
//Named export in Variables
const a = 10;
export {a};
我们可以在一个模块中应用多个命名导出。我们可以在一个模块中使用多个 named 导出的语法，如下所示:
Mobile.js
class Nokia{
//properties
//methods
}
function show(){
}
const a = 10;
export {Nokia, show};
让我们看看如何导入命名导出。
导入命名导出
导入绑定由另一个模块导出，我们必须使用静态 import 语句。 导入的模块始终处于严格模式，无论我们是否在严格模式下声明它们。
语法
App.js
import {Nokia, show} from './Mobile.js';
全部导入
如果我们想同时导入所有导出语句，那么我们可以单独导入它们。
但它会当我们有这么多命名的导出时很难。所以，为了方便起见，我们可以这样做:
import * as device from './Mobile.js'; // Here, the device is an alias, and Mobile.js is the module name.
假设，我们在Mobile.js模块中定义了一个Nokia类，如果我们想使用它，那么通过使用别名，我们可以执行它如:
device.Nokia //if we have a class Nokia
device.show // if we have a function show
device.a // if we have a variable a
让我们试着在一个例子中理解 Named 导出和导入。
我们必须制作两个 JavaScript 模块来执行导出和导入。在第一个模块中，我们导出类、函数和变量。在第二个模块中，我们将使用 named 导入来导入它们。
示例-命名导出和导入
在这里，我们正在创建两个 JavaScript 模块，其中第一个 JavaScript 模块是 Mobile.js，，第二个模块名称是 App.js。 我们还创建了一个 HTML 文件 Example.html. 然后，我们将在
接下来，我们必须手动链接 HTML 文件中的 JavaScript 文件使用
标签中的 src 属性。但是该模块仍然无法工作。要启用模块，我们必须在
标记中使用 type = "module"。
示例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type = "module" src = "App.js"></script>
<title>Document</title>
</head>
<body>
<h1>ES6 Modules import and export</h1>
</body>
</html>
Mobile.js
class Display{
show(){
console.log("Hello World :)");
}
}
function javaT(){
console.log("Welcome to lidihuo");
}
export {Display,javaT};
App.js
import {Display,javaT} from "./Mobile.js";
const d = new Display();
d.show();
javaT();
输出
在实时服务器中运行上述Example.html文件。然后，使用 ctrl+shift+I 在浏览器中打开终端。执行成功后会得到如下输出:
Default导出和导入
我们在一个模块中只能有一个默认导出。 默认导出可以使用任何名称导入。
语法
让我们看看语法在类、函数或变量中使用默认导出。下面我们将展示如何使用默认导出单独导出类、变量和函数。
与命名导出不同，我们不能同时导出在默认导出中创建多个导出语句。
//default export in class
class Nokia{
//properties
//methods
}
export default Nokia; //default export
//Deafult export in functions
function show(){
}
export default show;
//default export in Variables
const a = 10;
export default a;
导入默认导出
要导入由另一个模块导出的绑定，我们必须使用静态import 语句。 导入的模块始终处于严格模式，无论我们是否在严格模式下声明它们。
语法
Mobile.js
class Nokia{
//properties
//methods
}
export default Nokia;
App.js
import Nokia from './Mobile.js';
示例-默认导入和导出
Example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type = "module" src = "App.js"></script>
<title>Document</title>
</head>
<body>
<h1>ES6 Modules import and export</h1>
<h2>default import and export</h2>
</body>
</html>
Mobile.js
class Display{
show(){
console.log("Hello World :)");
console.log("default Import and Export Example");
}
}
export default Display;
App.js
import Display from "./Mobile.js";
const d = new Display();
d.show();
输出
在实时服务器中运行上述Example.html文件。然后，使用 ctrl+shift+I 在浏览器中打开终端。执行成功后会得到如下输出:
ES6循环依赖
循环依赖是两个或多个相互依赖的模块之间的直接或间接关系。此类模块称为相互递归模块。
ES6 中的模块自动支持循环依赖。两个模块，例如 A 和 B，如果 A 导入 B 和 B 以传递或间接方式导入 A，则它们循环依赖于彼此。
假设我们有三个名为 A、B、 和 C 的模块。它们的依赖链就像A->B->C->A，即A依赖于B； B 依赖于 C，C 依赖于 A。
CommonJS 和其他一些库支持循环依赖，但是从一个循环依赖模块。
ES6 通过在导出中共享值的绑定而不是值本身来解决这个问题。这意味着可以完成与模块主体中声明的变量的连接。我们可以在以下代码中看到相同的演示:
Example
Example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type = "module" src = "App.js"></script>
<title>Document</title>
</head>
<body>
<h1>ES6 Cyclic dependencies</h1>
</body>
</html>
Mobile.js
export let count = 0;
export function show() {
count++;
}
App.js
import { show, count } from './Mobile.js';
console.log(count);
show();
console.log(count);
输出
