理解JS ES6中的模块化（export和import）-青岛软件培训-Java培训-Python培训学校-万码学堂

2021-05-07 11:52

理解JS ES6中的模块化（export和import）

王姐姐

WEB前端

(1461)

(0)

(3)

由于历史原因，直接引入的多个JS文件之间可能会产生互相污染（变量、函数等），为了解决这个问题，在ES标准中引入了模块化的概念。

在ES5中使用commonJS 的方式进行模块化引入方式

<script src="XXX/AAA.js" type="module"></script>
<script src="XXX/BBB.js" type="module"></script>

表示使用模块化，在这种方式下，以上述代码为例，则由于模块作用域（每个模块文件都是独立的作用域，不是全局的），BBB中不能使用AAA文件中定义的东西，不加则都会变成全局的，别人就能直接访问了。

ES6中使用新的方法进行模块化：使用 export 和 import 关键字

一、导出

方法1.声明时直接导出

// AAA文件中
export var a1 = '1';

export function f1() {

} 

export const f2 = () => {
/ / 箭头函数导出
}

方法2.统一在最后导出

// AAA文件中
var a1 = '1';

function f1() {

} 

const f2 = () => {
/ / 箭头函数导出
}

export {
    a1,
    f1,
    f2,
}

方法3.导出时特殊操作：起别名

// AAA文件中
var a1 = '1';

function f1() {

} 

const f2 = () => {
/ / 箭头函数导出
}

// as 后跟的名字是导出的别名
export {
    a1 as A1,
    f1 as F1,
    f2 as F2,
}

方法4.导出时特殊操作：直接导出导入内容

// 意思是导出 从XXX中导入的a1,f1,f2, 常写在一个文件中用于导出全部js，类似于库的头文件去给别人导入
export {a1,f1,f2} from './XXX.js'

方法4.导出时特殊操作：使用default默认导出

export default function() {}

这种导出方式在导入时即可自己定义名称且不需要加{}，和其他导出方式共存，但是一个js文件只能有一个default

方法5.导出时特殊操作：导出类

ES6中类的本就是函数，使用时需要创建一个实例，也可以直接导出一个实例（类似于导出变量）

// AAA文件中
export class Dog {

    eat(){
        console.log('吃饭')
    }
}
// BBB 文件中
import {Dog} from './XXX'

const dog = new Dog();
dog.eat();

6.注意

export 是关键字，后面跟的并不是对象，而已一个导出列表，这里的a1,f1,f2的写法并不是ES6中属性的增强写法。

二、导入

方法1：直接导入

a1,f1,f2 是导出的时候的名称，不能更改，如果导出时有别名则这里导入的就是别名。

import {a1,f1,f2} from './XXX.js'

方法2：导入时起别名

import {a1 as A1 ,f1 as F1 ,f2 as F2} from './XXX.js'

方法3：导入时使用*

import  * as aaa from './XXX.js'

// aaa 此时是一个对象
aaa.a1;
aaa.f1;
aaa.f2;

方法4：导入使用default方式导出的模块

// aaa 此时即是导出的内容
import  aaa  from './XXX.js'

5.注意

import 是关键字，后面跟的并不是对象.

from 后面必须有.js 。如果是在框架中（比如Vue），则可以不写，框架会处理自动添加上。

原文链接：https://www.jianshu.com/p/2822e717592f

三、附示例:

a.js

export var name = "wanma";
var sex="male";
function f1(){
    console.log("f1...")
}
export {sex,f1};

b.js

import {name,sex} from './a.js';
/*export default function showInfo(){
    console.log(name+sex);
}*/
function showInfo(){
    console.log(name+sex);
}
export {showInfo};

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
  
    <script type="module">        
        console.log(dev);
        import {showInfo} from './b.js';
        showInfo();
    </script>

</body>
</html>