在ES5中使用commonJS 的方式进行模块化
引入方式
<script src="XXX/AAA.js" type="module"></script>
<script src="XXX/BBB.js" type="module"></script>
type="module"表示使用模块化，在这种方式下，以上述代码为例，则由于模块作用域（每个模块文件都是独立的作用域，不是全局的），BBB中不能使用AAA文件中定义的东西，不加type="module"则都会变成全局的，别人就能直接访问了。
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），则可以不写，框架会处理自动添加上。
三、import()函数
有时需要再代码中再去加载某个模块，而不是一开是就加载，这样可能会写如下代码
if(dev){
import('./XXX.js')
}
此时不能去写关键字方式的导入，因为关键字是编译时期解析，这里有js代码那么是运行时去解析的，运行时去解析编译时期解析的东西是错误的。ES6中提供了import函数去处理这样的情况。
需要注意的是import函数是一个异步加载的，返回的是个promise对象，所以完整的写法如下
if(dev){
import('./XXX.js').then(res=>{
// res 即是导出的内容
}).catch(err=>{
})
}
读者还可以对比Node环境下模块化这篇文章
网友评论