js模块化，导入和导出函数写法

目录

一、什么是模块

二、导出

2.1 声明时直接导出

2.2 统一在最后导出

2.3 导出时起别名

2.4 默认导出

2.5 导出模块合集

三、导入

3.1 直接导入

3.2 导入时起别名

3.3 导入时使用*

3.4 导入使用default方式导出的模块

---

背景：随着我们的应用越来越大，我们想要将其拆分成多个文件，即所谓的“模块（module）”。一个模块可以包含用于特定目的的类或函数库。

一、什么是模块

一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。

模块之间可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数：

• export 关键字标记了可以从当前模块外部访问的变量和函数。
• import 关键字允许从其他模块导入功能。

二、导出

在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

2.1 声明时直接导出

export const a1 = '1';
export function FunctionName(){}
export const FunctionName2 = () => {
}

2.2 统一在最后导出

 const a1 = '1';
 function FunctionName(){}
 const FunctionName2 = () => {
}
//最后统一导出
​export {
    a1,
    FunctionName,
    FunctionName2,
}

​

2.3 导出时起别名

​
 const a1 = '1';
 function FunctionName(){}
 const FunctionName2 = () => {
}
//最后统一导出，并且起别名
​export {
    a1 as A1，
    FunctionName as FunctionName1,
    FunctionName2 as FunctionName3 ,
}

2.4 默认导出

export default function() {} 

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

2.5 导出模块合集

export * from …; 
export * as name1 from …;

三、导入

3.1 直接导入

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

import {a1,FunctionName,FunctionName2} from './XXX.js'

3.2 导入时起别名

import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

3.3 导入时使用*

import  * as aaa from './XXX.js'
 
// aaa 此时是一个对象
aaa.a1;
aaa.f1;
aaa.f2;

3.4 导入使用default方式导出的模块

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