JavaScript模块化——ES6模块化规范

最新推荐文章于 2025-04-21 04:00:00 发布

PleaSure乐事

最新推荐文章于 2025-04-21 04:00:00 发布

阅读量814

点赞数 25

文章标签： javascript es6 vscode 开发语言前端 CommonJS

本文链接：https://blog.youkuaiyun.com/m0_75262255/article/details/141898813

版权

作者：优快云-PleaSure乐事

欢迎大家阅读我的博客希望大家喜欢

使用环境：vscode Chrome浏览器

1.ES6

1.1ES6介绍

ES6的全称是ECMAScript 6，也称为ES2015，是JavaScript的一个重要版本，它引入了许多新特性和改进，极大地增强了语言的表达能力和开发者的生产力。ES6是ECMAScript 标准的一个重大更新，旨在解决早期版本中存在的许多问题，并为开发者提供更现代化的语言特性。

1.2ES6学习前置准备

1.2.1准备school.js

school.js需要准备以下代码：

const name = 'PleaSure乐事'
const slogan = '唱跳RAP'

function getTel (){
  return '114514'
}

function getCities(){
  return ['北京','上海','深圳','杭州','济南','坤']
}

1.2.2准备student.js

student.js需要准备以下代码：

const name = '张三'
const motto = '相信明天会更好！'

function getTel (){
  return '0987654321'
}

function getHobby(){
  return ['铁山靠','乌鸦坐飞机','背带裤']
}

1.2.3准备index.html

此外，为了能顺利使用上述两个js文件，我们要新建一个html文件并引入他们。

需要注意的是，这里因为es6为模块化内容，因此需要将script的type改为moudle，否则会产生报错：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>index</title>
  </head>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

1.3运行ES6模块

1.3.1在网页中导入

如果我们想要进行导入，我们可以使用如下方法：

import * as school from './student.js'

进行打印输出后，会得到一个对象：

1.3.2使用nodejs导入

使用nodejs有两种方法进行导入。

方法一是将js文件的后缀改为mjs后即可运行，例如：

方法二则是配置如下json文件，随机即可完成配置，也无需改变js文件的后缀名即可完成使用：

{
  "type":"module"
}

1.4ES6导出数据

需要说明的是，ES6当中的导出方式可以混用

1.4.1分别导出

分别导出最简单，添加export关键词即可，如下：

export const slogan = '唱跳RAP'

1.4.2统一导出

统一导出的格式类似于对象，但是需要注意，它仅限于格式类似，但不是对象，~~需要对象的可以去Java当中new一个~~，具体格式如下：

export {name,motto,getTel}

1.4.3默认导出

默认导出导出的是对象，格式如下：

export default {name,motto,getTel}

1.5ES6导入数据

1.5.1导入全部

导入全部是将所有导出的内容整合到一个对象当中：

import * as school from './student.js'

1.5.2命名导入

命名导入对应分别导出和统一导出，在导入时可以进行命名：

import {name,motto,getTel} from './student.js'

1.5.3默认导入

默认导入对应默认导出，在导入时可以任意起名：

import xyz from './school.js

很神奇的地方在于命名导入和默认导入可以混用，代码如下：

import {name,motto,getTel} from './student.js'

1.5.4动态导入

动态导入允许在某个时刻进行导入，比如按下按钮，延时3秒后导入等等。

因此我们可以写下一个按钮，并绑定导入事件，来进行导入，这就是动态导入：

const btn = document.getElementById('btn')
btn.onclick = async()=>{
   const result = await import('./student.js')
   console.log(result)
}

作者：优快云-PleaSure乐事

希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！