ES6模块化基础 使用

• 模块化是指解决一个复杂的大的问题时通过一定的规范(规则),划分成多个模块封装的过程.

• 对于整个文件来说.模块是可组合,分解和更换的单元.

模块化有什么好处

• 避免命名冲突(减少命名空间污染)

• 更好的分离, 按需加载

• 更高复用性

• 高可维护性

• 遵守规范,降低沟通成本,方便各个模块的互相调用.

ES6模块化规范

ES6模块化规范是浏览器与服务器端通用的开发规范

ES6模块化规范定义:

• 每个js 文件都是一个独立的模块

• 导入需要使用 import 关键字

• 对外共享是用 export 关键字

通过npm init -y 在 package.json 中第一条配置 "type":"module", 可以体验ES6模块化

默认导出 , 导入

export default  默认导出的成员

//.当前模块01.js
let n1 = 10 
let n2 = 20
function show(){}
export default {  //挂载你想共享的成员
    n1,
    show
}

import m1 from 默认导入的成员

//当前模块02.js
import m1 from './01.js'
console.log(m1)
导入时接收的名字可以任何名称(m1),只要合法的成员名称即可.
数字开头的名称就是不合法的,声明变量和常量都不可以设置数字开头的名字

注意:

每个模块中,只允许使用唯一的一次 export default.否则会报错.

错误示范:
let n1 = 10 
let n2 = 20
function show(){}
export default {  //挂载你想共享的成员
    n1,
    show
}
 export default {
     n2
 }
 //因为使用了两次导出.所以报错.

按需导出 , 按需导入

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

//当前模块 03.js
​
//向外按需导出变量 s1
export let s1 = 'aaa'
//向外按需导出变量 s2
export let s2 = 'bbb'
//向外按需导出方法  say
export function say() {}

按需导入的语法 :import{s1} from''模块标识符''

// 当前模块 04.js
import {s1 ,s2 ,say} from './03.js'
console.log(s1) //aaa
console.log(s2) //bbb
console.log(say) // function : say方法

按需导出和按需导入的注意:

• 每个模块可以使用多次按需导出

• 按需导入的成员名称必须和按需导出的名称保持一致对应

• 按需导入时,可以使用as 关键字进行重命名

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

//向外按需导出变量 s1
export let s1 = 'aaa'
//向外按需导出变量 s2
export let s2 = 'bbb'
//向外按需导出方法  say
​
export default {
    a:20
}
​
export function say() {}
import {s1 ,s2 as s3 ,say} from './03.js'//as关键字重命名
export default{}只能一次  , 按需导入可以多次
import info,{s1 ,s2 as s3 ,say} from './03.js'//默认导入一个成员叫info  info 指向 默认导入

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

//当前  05.js模块
//当前模块是一个for 循环
for (let i = 0 ;i < 3 ; i++){
    console.log(i)
}
//当前  06.js 模块
//直接导入并执行模块中的代码   不需要得到模块向外共享的成员
import './05.js'