ES6模块化-介绍

之前在nodejs中学习模块化，名称为“CommonJS模块化”

导出：module.exports=对象

导入：var 名称 = require(文件名字)

为什么要使用模块化？

模块化是代码共享机制体现

有一份代码(例如axios、vue等等)在许多场合下都要进行使用，那么不要自己开发，直接把别人开发好的代码共享给我们使用即可

在浏览器里边可以通过

相反在nodejs中，不能使用

现在我们通过VueCLI脚手架创建的项目，内部的源码也都是nodejs的体现，所以要向共享代码使用，这样也需要使用模块化技术

之前的CommonJS模块化是民间的

官方正式的名称为 ES6模块化

目前：commonjs和es6模块化都不能在浏览器中直接使用

​ commonjs模块化在nodejs中可以使用

​ es6模块化不能在nodejs中应用，还需要时间融入

​ 现在浏览器中可以使用模块化技术，名称为 CMD和AMD，它们都是commonjs的衍生产品

ES6模块化-默认导出和导入

代码共享需要有内容提供方 和 内容使用方

提供方：导出

使用方：导入

默认导出：通过一个对象对模块的全部信息做输出处理

默认导入：对默认导出的信息做导入使用

注意：

​ es6模块化需要在当前的脚手架项目中使用，零散文件不能用

语法：

默认导出的语法：

export default { name:'jack', height: 170, age:23 }

默认导入的语法：

import 接收名称 from '模块名称'

注意：一个模块中只能用一次默认导出

使用示例：

ES6模块化-按需导出和导入

按需：根据实际需要把一个模块中的个别成员信息给导出使用

导出语法：

export const a = 10
export function xx(){} 

导入：

import {xx,xx,xx} from  模块文件名字
import {xx as 别名,xx,xx} from  模块文件名字

xx代表实际导出的成员名称

根据需要，尽管导出了多个成员，但是导入的时候，可以都使用，也可以使用一部分

导入的xx名称不设置别名情况下，需要与导出的名称一致

使用示例：

ES6模块化-默认和按需同时导出和导入

默认和按需同时存在的导出：

export default 对象    // 默认导出
export const a = 10    // 按需导出
export const b = 20

默认导出 的摆放位置没有要求

单个模块文件中 默认导出 只能设置一个

默认和按需同时存在的导入：

1. 各自导入

   import 名称 from  模块   // 默认导入
   
   import {xx,xx,xx}  from  模块  // 按需导入
   

2. 同时导入

   import 名称,{xx,xx,xx}  from  模块  // 默认和按需同时导入
   

   注意：默认成员导入在"前"，按需导入在"后"

使用实例：

ES6模块化-没有导出应用

在有的js模块文件中，其没有做导出动作，那么这个文件可以直接引入，其内部代码会自然在引入的同时就发生执行了

导入语法：

import 模块文件名称

使用示例：

后期，其他有许多文件例如css、less等它们就做直接导入即可 (css、less本身没有导出动作)

ES6模块化-小结

1. 导出，就是共享内容提供方，导出的内容可以被导入者抓取到
2. 导入，就是共享内容使用者
3. 默认导出就是通过一个对象把全部的内容都提供出来
4. 按需导出就是需要哪个信息就导哪个出来，不需要的不操作
5. 一个模块只能做一次默认导出，但是可以做多次按需导出
   导出动作)

ES6模块化-小结

1. 导出，就是共享内容提供方，导出的内容可以被导入者抓取到
2. 导入，就是共享内容使用者
3. 默认导出就是通过一个对象把全部的内容都提供出来
4. 按需导出就是需要哪个信息就导哪个出来，不需要的不操作
5. 一个模块只能做一次默认导出，但是可以做多次按需导出