模块化开发的导出导入

ES6 的模块化开发主要包含如下 3 种用法：

① 默认导出与默认导入

② 按需导出与按需导入

③ 直接导入并执行模块中的代码

1.默认导出与默认导入

默认导出的语法： export default 默认导出的成员

let n1 = 10  //定义模块私有成员
let n2 = 20  //定义模块私有成员(外界访问不到,因为他没有被共享出去)
function show() {} //定义模块私有方法

export default {  //使用export default 默认导出语法,向外界共享n1,show两个成员
  n1,
  show
}

默认导入的语法： import 接收名称 from '模块标识符'

//从01.默认导出.js导入 export default 向外共享的成员
//并使用m1成员接收
import m1 from './01.默认导出.js' 

//打印输出结果为:
//{n1:10,show:[Function:show]}
console.log(m1)

默认导出的注意事项

每个模块中，只允许使用唯一的一次 export default，否则会报错！
SyntaxError: Identifier '.default' has already been declared

默认导入的注意事项

默认导入时的接收名称可以任意名称，只要是合法的成员名称即可：

import m1 from './01.默认导出.js'
// m1是合法的名称
import 123m from './01.默认导出.js' 
//出现报错
// 123m不是合法的名称,因为成员不能以数字开头
console.log(m1)

2.按需导出与按需导入

按需导出的语法： export 按需导出的成员

//向外按需导出变量 s1
export let s1 = 'aaa'

//向外按需导出变量 s2
export let s2 = 'ccc'

//向外按需导出方法 say
export function say() {}

按需导入的语法： import { 按需导出的成员名称 } from '模块标识符'

import  { s1, s2 as str2, say } from './03.按需导出.js'
console.log(s1) //输出打印aaa
console.log(str2) //输出打印ccc
console.log(say) //输出打印[Function:say]

按需导出与按需导入的注意事项

1.每个模块中可以使用多次按需导出

2.按需导入的成员名称必须和按需导出的名称保持一致

3.按需导入时，可以使用 as 关键字进行重命名

4.按需导入可以和默认导入一起使用

3.直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：

在当前模块中执行一个for循环
for (let i = 0; i < 3; i++) {
  console.log(i)
}

//在另一个模块中直接导入并执行模块代码,不需要得到模块向外共享的成员

import './05.直接运行模块中的代码.js'
此时 05.直接运行模块中的代码.js 里的循环开始执行