模块并不是对象,模块的使用分为两部分:定义模块和使用模块。它们一般位于不同的文件中,使用模块的文件可以调用定义模块的文件中导出的内容,有点像我们平时在一个页面中导入其他的js文件,但模块调用要比导入js文件更加强大。
#### 模块的基本用法
模块最基础的用法就是导出和导入,分别使用export和import关键字来操作。只有模块中导出的变量(可以是变量,函数,类等)才可以被其他文件导入。
下面使用一个React示例,展示下基本用法,以及导入后重命名,默认导出,打包导出。
> 原因:如果通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误,因为Javascript 模块安全性需要。**你需要通过一个服务器来测试**。
html加载方式:<script type="module" src="module.mjs"></script>
导出模块: export.js
```
export const name = 'zzh'; // method 1, 基本导出方式
const getAge = () => 18;
const getSex = () => 'male';
export { getAge, getSex} // method 2, 打包导出方式
```
导入模块;import.jsx, 里面包含一个默认导出TestModule
```
import React from 'react'
import { name, getAge as getAgeTest, getSex } from './export';
// getAge as getAgeTest: 利用as重命名
function TestModule () {
return (<div> name is {name}, age is {getAgeTest()}, sex is {getSex()} </div>);
}
export default TestModule;
```
调用export方式:
```
import React from 'react';
import Test from './import' // 可自定义名
ReactDOM.render(
<Test />,
document.getElementById('root')
);
```
调试结果:
name is zzh, age is 18, sex is male
一个小示例,包含了基本用法,以及导入后重命名,默认导出,打包导出,还有一种导入方式就是导入命名空间,用星号(*)将模块中导出的所有变量全部导入,这时需要一个命名空间,调用时使用命名空间调用就好了,例如将上面的导入改写:
import.jsx
```
import React from 'react'
import * as exportModule from './export';
function TestModule () {
return (<div> name is {exportModule.name}, age is {exportModule.getAge()}, sex is {exportModule.getSex()} </div>);
}
export default TestModule;
```