ES6模块化

特点

1.使用依赖“预声明”的方式导入模块

         1.依赖延迟声明（CommonJS）

                1.优点：某些时候可以提高效率

                2.缺点：无法在一开始就确定模块的依赖关系

         2.依赖预声明（ES6）

               1.优点：在一开始就可以确定模块的依赖关系

               2.缺点：某些时候效率较低

2.灵活的多种导入导出方式

3.规范的路径表示法：所有的路径必须以./或者../开头

基本的导入导出

基本导出

1.export 声明表达式

export var a = 1

2.export {具名符号}

var age = 10;
var name = 'hexiaobian'
export { age, name }

注意：基本导出必须具有名称，所以要求导出的内容必须跟上声明表达式或具名符

基本导入（导入的具名符号是常量，不能被修改）

注意：由于使用的是依赖预加载，因此，导入任何其他模块，导入的代码必须放置到所有代码之前，不能在判断语句中进行导入操作，否则会出错，对于不合理的导入（不出错的情况下），浏览器会对不合理的导入进行处理，将不合理的导入操作移至所有代码之前。

import {导入的具名符号列表} from '模块路径'

//对模块进行重命名操作
import { age as age1, name as name1 } from './a.js   
//对导入的age重命名为age1，对导入的name重命名为name1
//导入所有的基本导出
import * as obj from './b.js'

默认的导入导出（一个模块只能有一个默认的导入和一个默认的导出）

默认导出

注意：default时不需要导出变量名，所以不能导出表达式和具名符号，直接导出某个变量或者某个数据即可

//方式1
export default 要导出的数据
//方式2
export { 默认的导出数据 as default }

默认导入

//仅导入默认导出的变量
import 自定义的变量名 from '模块路径'
//导入所有导出的变量（默认导出变量+基本导出变量）
import * as obj form '模块路径'
//导入默认导出变量和部分基本导出变量
import 自定义变量名（用于导入默认导出变量）, { name, age } from '模块路径'

 

ES6模块化的其他细节

1. 尽量导出不可变值
2. 可以使用无绑定的导入用于执行一些初始化代码

import '模块路径'  //执行模块内的代码，此方法可以用于初始化操作

     3. 可以使用绑定再导出，来重新导出来自另一个模块的内容

直接在模块内导出该模块导入的其他模块的变量

export {其他模块的基本导出} 变量名(其他模块的默认导出) from '其他模块的模块路径'
export {当前模块的基本导出} 变量名（当前模块的默认导出）