📌  相关文章
📜  ES6模块

📅  最后修改于: 2021-01-01 04:16:55             🧑  作者: Mango

ES6模块

模块是写在文件中的JavaScript代码的一部分。 JavaScript模块通过将整个代码划分为可以从任何地方导入的模块，来帮助我们将代码模块化。模块使维护代码，调试代码和重用代码段变得容易。每个模块都是一段代码，一旦加载，便会执行。

ES6中的模块是必不可少的概念。尽管并不是到处都有它，但是今天我们可以使用它，并且可以将其转换为ES5代码。编译是将代码从一种语言转换为等效语言的过程。 ES6模块转译器工具负责获取ES6模块，并将其转换为AMD (异步模块定义是JavaScript编程语言的规范)或CommonJS风格的ES5兼容代码。

在构建过程中，我们可以使用Gulp，Babel，Grunt或其他编译器来编译模块。除非文件将其导出，否则模块中的变量和函数将无法使用。

导出和导入模块

导出模块

JavaScript允许我们使用export关键字导出函数，对象，类和原始值。有两种出口：

  • 命名出口：以名称区分的出口称为命名出口。我们可以使用命名的export导出多个变量和函数。
  • 默认导出：使用默认导出最多可以导出一个值。

导入模块

要导入模块，我们需要使用import关键字。从模块导出的值可以使用import关键字导入。我们可以在另一个模块中导入导出的变量，函数和类。要导入模块，我们只需指定它们的路径。

导入命名的导出时，必须使用与相应对象相同的名称。当您导入默认导出时，我们可以使用相应对象的任何名称。

让我们详细说明这些进出口。

命名进出口

命名出口以其名称来区分。使用命名导出导出的类，变量或任何函数只能使用相同的名称导入。

可以使用命名的export导入和导出多个变量和函数。

句法

让我们看看在类，函数或变量中使用命名导出的语法。下面我们展示了如何使用命名的export分别导出类，变量和函数。

//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};

我们可以在一个模块中应用多个命名导出。我们可以在模块中使用多个命名导出的语法，如下所示：

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 Nokia
device.show // if we have a function show
device.a // if we have a variable a

让我们尝试在一个示例中了解命名的导出和导入。

我们必须制作两个JavaScript模块来执行导出和导入。在第一个模块中，我们导出类，函数和变量。在第二个模块中，我们将使用命名的import导入它们。

示例-命名为导出和导入

在这里，我们正在创建两个JavaScript模块，其中第一个JavaScript模块是Mobile.js，第二个模块名称是App.js。我们还将创建一个HTML文件Example.html。然后，我们将在服务器中执行此.html文件。

接下来，我们必须使用 Document

ES6 Modules import and export

Mobile.js

class Display{
    show(){
        console.log("Hello World :)");
    }
}
function javaT(){
    console.log("Welcome to javaTpoint");
}
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 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




    
    
    
    
    Document


    
ES6 Modules import and export

    
Default import and export

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




    
    
    
    
    Document


    
ES6 Cyclic dependencies

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);

输出量