ES6模块化

ES6模块化

// !ES6模块化:每个js文件都是一个单独的作用域,要想时js文件之间可以进行数据共享就要使用export/import(导出/导入)来进行数据共享,避免造成全局变量的污染

//在使用ES6模块化的时候需要在script标签上加type = module ,并且打开html的网络协议是http或者https协议

1，环境配置

1.1 在当前目录的终端下输入,会生成一个package.json的文件

npm init -y

1.2 在package文件里添加配置项

"type":"module"

2,基础语法

2.1 默认导出(一个模块中只能使用一次默认导出)

语法：export default
let a = 1
let b = 2
let fn = function(){}
export default {a,fn} //默认导出了a,fn

2.2 默认导入

语法：import 接收名称 from '模块标识符'
//接收名称必须合法，和变量命名规范一样
import res from './01.默认导出.js'
console.log(res) // { a: 10, fn: [Function: fn] }

2.3 按需导出(每个模块可以多次按需导出)

let b = 2
let fn = function(){}
export b
export fn

2.4 按需导入(按需导入的名称必须要和按需导出的名称保持一致,导入时可以用as将导入的变量改名,底层原理就是结构赋值)

import {接收名称 as 变量名} from ’模块标识符‘，// !导入的变量名不能重新赋值,因为他就相当于是const声明的一样
import {b,fn} from './按需导出.js' //按需导入多个，中间用，隔开
import obj from './a.js' //默认导出的导入时不加{}

2.5 直接导入

语法：import '模块标识符' //这样就可以直接运行模块中的代码

2.6 全部导入 * 变量名

import * as obj from './a.js'