ES6 模块化

模块化是指将一个大的程序文件， 拆分成许多小的文件，然后将小文件组合起来.
1.模块化的优势:
(1)防止命名冲突
(2)代码复用
(3)高维护性
2.模块化规范产品
ES6之前的模块化规范有:
(1)CommonJS规范=>nodejs,browserify
(2)AMD =>REQUIREjs
(3)CMD =>seaJS
3.ES6模块化语法
模块功能主要由两个命令构成:export和import.
export命令用于规定模块的对外接口
案例1：浏览器使用es6模块引入模块
demo.js

export const name = '小猪'
export function sayHi() {
    console.log('你好啊');
}

demo.html

demo的打印结果如下所示:

1.png

本例中的这种导出变量的方式我们称之为分别暴露，接下来一起来看下统一暴露的案例
案例2:统一暴露
demo.js

const name = '小猪'

function sayHi() {
    console.log('你好啊');
}
//统一暴露
export {
    name,
    sayHi
}

demo.html

打印结果如下所示:

1.png

还有一种是默认暴露，一起来看下:
案例3：默认暴露
demo.js

// 默认暴露
export default {
    name: 'zhangsna',
    age: 18,
    sayHello() {
        console.log('Hello');
    }
}

demo.html

打印结果如下所示:

1.png

以上总结了三种模块导出的方式，接下来再来看看模块导入的各种方式

import命令用于输入其他模块提供的功能
在上面演示模块导出方法的时候我们用的导入方式是通用的导入方式，也就是我们要讲的第一种模块导入的方式
案例4：通用的导入方式

案例5：解构赋值的导入方式

最后一种，简便形式(只针对默认暴露)
案例6：简便形式导入方式

打印结果和上面一样，如下所示:

简便形式导入.png

关于es6模块化导入导出我们就写这么多