模块的定义
模块是自动运转在严厉形式下而且没有办法退出运转的JavaScript代码。
模块可所以函数、数据、类，须要指定导出的模块名，才被其他模块接见。
//数据模块
const obj = {a: 1}
//函数模块
const sum = (a, b) => {
return a + b
}
//类模块
class My extends React.Components {
}
模块的导出
给数据、函数、类增加一个export，就能够导出模块。一个设置型的JavaScript文件中，你能够会封装多种函数，然后给每一个函数加上一个export关键字，就能够在其他文件接见到。
//数据模块
export const obj = {a: 1}
//函数模块
export const sum = (a, b) => {
return a + b
}
//类模块
export class My extends React.Components {
}
模块的援用
在别的的js文件中，我们能够援用上面定义的模块。运用import关键字，导入分2种状况，一种是导入指定的模块，别的一种是导入悉数模块。
1、导入指定的模块。
//导入obj数据，My类
import {obj, My} from './xx.js'
//运用
console.log(obj, My)
2、导入悉数模块
//导入悉数模块
import * as all from './xx.js'
//运用
console.log(all.obj, all.sun(1, 2), all.My)
默许模块的运用
假如给我们的模块加上default关键字，那末该js文件默许只导出该模块，你还须要把大括号去掉。
//默许模块的定义
function sum(a, b) {
return a + b
}
export default sum
//导入默许模块
import sum from './xx.js'
模块的运用限定
不能在语句和函数以内运用export关键字，只能在模块顶部运用，作为react和vue开辟者的你，这个限定你应当很熟悉了。
在react中，模块顶部导入其他模块。
import react from 'react'
在vue中，模块顶部导入其他模块。
<script>
import sum from './xx.js'
</script>
修正模块导入和导着名
有2种修正体式格局，一种是模块导出时修正，一种是导入模块时修正。
1、导出时修正：
function sum(a, b) {
return a + b
}
export {sum as add}
import { add } from './xx.js'
add(1, 2)
2、导入时修正：
function sum(a, b) {
return a + b
}
export sum
import { sum as add } from './xx.js'
add(1, 2)
无绑定导入
当你的模块没有可导出模块，全都是定义的全局变量的时刻，你能够运用无绑定导入。
模块：
let a = 1
const PI = 3.1314
无绑定导入：
import './xx.js'
console.log(a, PI)
浏览器加载模块
有用过webpack打包js模块的同砚能够有履历，运用webpack打包了多个js文件，然后放到HTML运用script加载时，假如加载递次不对，就会涌现找不到模块的毛病。
这是由于模块之间是有依靠关联的，就像你运用jQuery的时刻，必须先加载jQuery的代码，才运用jQuery供应的要领。
加载模块的要领，老是先加载模块1，再加载模块2，由于module范例默许运用defer属性。
<script type="module" src="module1.js"></script>
<script type="module" src="module2.js"></script>
总结
模块另有许多有意思的特征，对react和vue开辟有肯定履历的人对这些基本知识应当管窥蠡测，新手不相识也不必太心急，写几个module.js做一下尝试。假如浏览器报错，不能辨认export模块，你能够须要先加载babel的js插件来编译它。
