Module模块

Frank
  • 前端进阶
  • ES6
  • Module
  • export
  • export default
大约 2 分钟约 660 字...

ES6 入门教程:Module 的语法open in new window

Module 模块介绍

  • Module模块:一个一个的局部作用域的代码块
  • Module 解决的问题:

(1) 模块化的问题

(2) 消除全局变量

(3) 管理加载顺序

  • 使用 script 标签加载模块:只要用到 importexport,在使用 script 标签加载的时候,就要加上 type="module"
<script src="./xxx.js" type="module"></script>
<!--以下写法和👆的写法等价-->
<script type="module">
  import 'xxx.js'
</script>

导入与导出

如果一个模块没有导出,也可以进行导入,被导入的代码都会执行一遍,也仅仅会执行一遍

<script type="module">
  import 'xxx.js'
</script>

提示

使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。

export default 和对应的 import

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字,正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句

一个模块只能有一个 export default

// 导出
const age =123
export default age
// 导入
import age from './module.js'
// 导入,可以随意命名,但不建议这样使用
import xxx from './module.js'
//--------------------------------------
// 导出匿名函数
export default ()=>{
	console.log('123')
}
// 导出具名函数,在模块外部是无效的。加载的时候,视同匿名函数加载
export default function foo() {
  console.log('foo');
}

export 和对应的 import

  1. 单个导出
// 第一种
export const age = 18
// 第二种
const age = 18
export { age }
// ------------
// 导入
import { age } from './module.js'
  1. 多个导出
// 导出
export { Person, age }
// ------------
// 导入
import { Person, age } from './module.js'
  1. 导出或导入时起别名
// 导出
export { Person as ren, age }
// ------------
// 导入
import { ren, age as sui } from './module.js'

整体导入

整体导入中包括了export 导出 和 export default 导出 的所有内容

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

同时导入

注意

export default 导出的内容必须写在最前面

同时导入export dafaultexport

import age2, { func, age } from './module.js'
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1