ES6模块化
ES6模块化规范
ES6模块化规范中定义:
- 每个js文件都是一个独立的模块
- 导入模块成员使用
import
关键字 - 暴露模块成员使用
export
关键字
ES6模块化的基本语法
-
默认导出与默认导入
-
默认导出语法exprot default 默认导出成员
//当前文件模块为m1.js //定义私有成员a和c let a = 10; let c = 20; //外界访问不到d因为没有暴露出去 let d = 30; function show(){} export default { a, c, show }
-
默认导入模块成员
//导入模块成员 import m1 from './m1.js' console.log(m1) //打印输出结果为: //{a: 10,c: 20, show:[Function: show]}
-
ES6按需导出与按需导入
-
按需导出语法
export let s1 = 10
//当前文件模块为 m1.js //向外按需导出变量s1 export let s1 = 'aa' //向外按需导出变量s2 export let s2 = 'bbb' //向外按需导出方法say export function say = function() {}
-
按需导入语法
import {s1} from ‘模块标识符’
import {s1,s2 as ss2,say} from './m1.js' //默认导入和按需导入同时存在import m1, {s1,s2 as ss2,say} from './m1.js' console.log(s1) //打印输出aa console.log(ss2) //打印输出bbb console.log(say) //打印输出[Function: say]
-
默认导出只能使用一次,按需导出可以使用多次
ES6直接导入并执行模块代码
有时候,我们只想单纯的执行某个模块中的代码,并不需要得到模块中向外暴露的成员,此时可以直接导入并执行模块代码
//当前文件模块为m2.js
//在当前模块中执行一个for循环操作
for(let i = 0;i<3 ;i++){
console.log(i);
}
//直接导入并执行模块代码
import './m2.js'