本文概述
- 导出和导入模块
- 命名进出口
- 默认进出口
- ES6循环依赖
ES6中的模块是必不可少的概念。尽管并不是到处都有它, 但是今天我们可以使用它, 并且可以将其转换为ES5代码。编译是将代码从一种语言转换成等效语言的过程。 ES6模块转译器工具负责获取ES6模块, 并将其转换为AMD(异步模块定义是JavaScript编程语言的规范)或CommonJS样式的ES5兼容代码。
在构建过程中, 我们可以使用Gulp, Babel, Grunt或其他编译器来编译模块。除非文件将其导出, 否则模块中的变量和函数将无法使用。
导出和导入模块 导出模块
JavaScript允许我们使用export关键字导出函数, 对象, 类和原始值。有两种出口:
- 命名出口:以名称区分的出口称为命名出口。我们可以使用命名的export导出多个变量和函数。
- 默认导出:使用默认导出最多可以导出一个值。
【ES6模块介绍和用法示例】要导入模块, 我们需要使用import关键字。从模块导出的值可以使用import关键字导入。我们可以在另一个模块中导入导出的变量, 函数和类。要导入模块, 我们只需指定它们的路径即可。
导入命名的导出时, 必须使用与相应对象相同的名称。导入默认导出时, 我们可以使用相应对象的任何名称。
让我们详细说明这些进出口。
命名进出口 命名出口以其名称来区分。使用命名导出导出的类, 变量或任何函数只能使用相同的名称导入。
可以使用命名的export导入和导出多个变量和函数。
语法
让我们看看在类, 函数或变量中使用命名导出的语法。下面我们展示了如何使用命名的export分别导出类, 变量和函数。
//Named export in classclass Nokia{//properties//methods}export {Nokia};
//Named export//Named export in functionsfunction show(){}export {show};
//Named export in Variablesconst a = 10;
export {a};
我们可以在一个模块中应用多个命名导出。我们可以在模块中使用多个命名导出的语法, 如下所示:
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中定义了一个诺基亚类, 如果要使用它, 那么通过使用别名, 我们可以执行以下操作:
device.Nokia //if we have a class Nokiadevice.show // if we have a function showdevice.a // if we have a variable a
让我们尝试在一个示例中了解命名的导出和导入。
我们必须制作两个JavaScript模块来执行导出和导入。在第一个模块中, 我们导出类, 函数和变量。在第二个模块中, 我们将使用命名的import导入它们。
示例-命名为导出和导入
在这里, 我们正在创建两个JavaScript模块, 其中第一个JavaScript模块是Mobile.js, 第二个模块名称是App.js。我们还将创建一个HTML文件Example.html。然后, 我们将在服务器中执行此.html文件。
接下来, 我们必须使用< script> < / script> 标记中的src属性来手动链接HTML文件中的JavaScript文件。但是该模块仍然无法正常工作。要启用该模块, 我们必须在< script> < / script> 标记中使用type =” module” 。
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 = "http://www.srcmini.com/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 srcmini");
}export {Display, javaT};
App.js
import {Display, javaT} from "./Mobile.js";
const d = new Display();
d.show();
javaT();
输出如下
在实时服务器中运行上面的Example.html文件。然后, 使用ctrl + shift + I在浏览器中打开终端。成功执行后, 你将获得以下输出:
文章图片
默认进出口 一个模块中只能有一个默认导出。可以使用任何名称导入默认导出。
语法
让我们看看在类, 函数或变量中使用默认导出的语法。下面我们展示了如何使用默认导出分别导出类, 变量和函数。
与命名导出不同, 我们不能在默认导出中同时创建多个导出语句。
//Default export in classclass Nokia{//properties//methods}export default Nokia;
//Default export//Deafult export in functionsfunction show(){}export default show;
//Default export in Variablesconst 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 = "http://www.srcmini.com/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和B进口都是传递性或间接地, 则两个模块(例如A和B)周期性地相互依赖。
假设我们有三个名为A, B和C的模块。它们的依存关系链就像A-> B-> C-> A, 即A依赖于B; B依赖于C, C依赖于A。
CommonJS和其他一些库支持循环依赖关系, 但是从循环依赖模块导入和使用命名导出存在问题。
ES6通过共享对值的绑定而不是导出中的值本身来解决此问题。这意味着可以与模块主体中声明的变量进行连接。我们可以在以下代码中看到相同的演示:
例子
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 = "http://www.srcmini.com/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);
输出如下
文章图片
推荐阅读
- ES6数字介绍和用法示例
- ES6循环语句解释和用法示例
- ES6 map介绍和用法详解
- ES6立即调用函数表达式(IIFE)
- ES6事件介绍和用法示例
- ES6生成器介绍和用法
- ES6函数介绍和用法示例
- 动态桌面软件,本文教您动态桌面软件Wallpaper Engine的运用
- 笔记本风扇控制软件,本文教您戴尔笔记本风扇控制软件