JavaScript模块化规范(ES6)学习笔记-2_es6模块规范-优快云博客

1.ES6模块化规范

ES6模块化规范是一个官方标准的规范，它是在语言标准的层面上实现了模块化功能，是目前最流行的模块化规范，且浏览器与服务端均支持该规范

2.导出数据

ES6模块化提供3种导出方式：1.分别导出 2.统一导出 3.默认导出

1.分别导出

export const name = "es6模块"

export const slogan = "可在服务端和浏览器端运行的模块规范"

export function getTel() {
    return "010-56253825"
}

2.统一导出

const name = "ES6"

const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}

// 导出
export {
    name, slogan, getTel
}

注意：export { }中{ }只是一个标记，并不代表一个对象

3.默认导出

const name = "ES6"
const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}

// export default + 值
export default {
    name,
    slogan
}

注意：export default 后为要输出的值，故{ }在此处代表对象

4.附加

以上所有的导出可以一起用

// 分别导出
export const name = "ES6"
const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}
// 统一导出
export { slogan }
// 默认导出
export default {
    getTel
}

导出效果：

3.导入数据

1.全部导入（通用）

 // school 为自定义名称 ./school 为引入文件的路径
import * as school from './school.js'

2.命名导入（对应导出方式：分别导出、统一导出）

// school.js
// 分别导出
export const name = "ES6"
const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}
// 统一导出
export { slogan }


// index.js
// name,solgan 为school.js中导出的名字，SchoolName,SchoolSolgan 为自定义名称
import { name as SchoolName, slogan as SchoolSolgan } from './school.js'

console.log(SchoolName, SchoolSolgan);

3.默认导入（对应导出方式：默认导出）

// school.js
const name = "ES6"
const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}
// 默认导出
export default {
    name,
    slogan
}


//index.js
// school 为自定义名称  
import school from './school.js'
console.log(school);

4.命名导入与默认导入可以混合使用

// school.js
// 分别导出
export const name = "ES6"
const slogan = "可在服务端和浏览器端运行的模块规范！"

function getTel() {
    return "010-56253825"
}
// 统一导出
export { slogan }
//默认导出
export default getTel

// index.js
import LMZ, { name, slogan } from './school.js'

console.log(LMZ, name, slogan);

5.动态导入（通用）

// student.js
const name = "INTJ"
const motto = "敢抛弃一切的坦诚,是明知而无畏的骁勇"
function getTel() {
    return "13800000000"
}
function getHobby() {
    return ['唱歌', '跳舞', '健身', '电影']

}
export { name, motto, getTel }

// index.js
// 在引入的html页面添加按钮
const btn = document.getElementById('btn')
// 点击触发引入student模块
btn.onclick = async () => {
    const result = await import('./student.js')
    console.log(result)
}

6.import可以不接受任何数据

例如：当某文件不需要导出任何数据，只需要在项目刚开始时运行一次

// log.js  不需要导出的文件
 console.log('随机数', Math.random())

// index.js
import './log.js'

以上：模块化解决了：1.全局污染问题，2.依赖混乱问题，3.数据安全问题

解释：

1.全局污染问题

当我们以
 <script type="module" src="./index.js"></script>
形式引入js文件，且type类型为module时，代表一个模块，我们的变量或者函数将不会在全局上

但是，当我们以
 <script type="text/javascript" src="./index.js"></script>
形式引入js文件，type类型为text/javascript时，该文件就是为js文件引入，index.js中的变量将会被挂载到全局上