ES6之module语法（export和import）

迈不过友情╰ 2022-01-26 00:47 370阅读 0赞

## 前言：ES6 在语言标准的层面上，实现了模块功能。 ##

## 模块化语法 ##

## 一、export ##

*  export：用来定义模块，可以导出对象、函数、类、字符串等等

#### 1、输出变量 ####

// profile.js
    export var firstName = 'lisa';
    export var lastName = 'guagua';
    export var age = 18;

// profile.js
    var firstName = 'lisa';
    var lastName = 'guagua';
    var age = 18;
    
    export {  firstName, lastName, age  };

以上 **↑** 两种写法完全等同。  
**注意点：export输出的必须是接口，并且要与模块内的变量相对应。**

// 报错
    export 1;
    
    // 报错
    var m = 1;
    export m;

报错原因：第一种直接输出1，第二种输出变量m同样是输出1，只是一个数据而不是接口。  
正确写法如下 **↓**

// 写法一
    export var m = 1;
    
    // 写法二
    var m = 1;
    export { m};
    
    // 写法三
    var n = 1;
    export { n as m};
    export { n as p};

**注释：使用as关键字，可以重命名了对外接口，并且可以命名两次。**

#### 2、输出函数或类（class） ####

function v1() {  ... }
    function v2() {  ... }
    
    export { 
      v1 as streamV1,
      v2 as streamV2
    };

## 二、import ##

*  import：用于引入其他模块提供的功能，输入的变量都是只读的，不可更改

// main.js
    import {  firstName, lastName, age } from './profile.js';
    
    function setName(element) { 
      element.textContent = firstName + ' ' + lastName;
    }

> import命令可以使用as关键字，将输入的变量重命名。

import {  lastName as surname } from './profile.js';

# 三、export default #

export default 命令为模块指定默认输出

**与export 区别：**

1.  一模块中只允许出现一个export default；
2.  通过export方式导出，在导入时要加\{ \}，exportdefault则不需要加\{ \}
3.  export default与普通的export不要同时使用