ES6----ES6模块化

简介: ES6----ES6模块化

ES6模块化规范

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

ES6模块化规范中的定义

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

导入其他模块成员使用import关键字

向外共享模块成员使用export关键字

nodejs中体验ES6模块化

nodejs中默认支持commonjs模块化规范,若想基于nodejs体验ES6模块化,需要:

安装14.15.1或以上的nodejs版本

在package.json根节点中添加"type":"module"节点

ES6模块化的基本语法

ES6模块化主要有3种用法:

1.默认导出、默认导入

2.按需导出、按需导入

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

默认导出

语法:

export default 默认导出的成员
let n1 = 10
let n2 = 20
function show() {}
// 向外导出n1,show成员
export default {
  n1,
  show

注意:

每个模块中,只能使用一次export default,否则会报错

let n1 = 10
let n2 = 20
function show() {}
// 向外导出n1,show成员
export default {
  n1,
  show
}
export default {
}
file:///D:/%E6%A1%8C%E9%9D%A2%E6%96%87%E4%BB%B6/%E6%96%87%E4%BB%B6/nodejs/ES6%E6%A8%A1%E5%9D%97%E5%8C%96/1%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%87%BA.js:11
export default {
SyntaxError: Identifier '.default' has already been declared

默认导入

语法:

import 接受名称 from '模块标识符'
//导入 ./1默认导出.js 中默认导出的成员
import m1 from './1默认导出.js'
//打印导入的模块中成员
console.log( m1 );
{ n1: 10, show: [Function: show] }

注意:

默认导入时的接受名称可以是任意名称,只要是合法的成员名称即可。

按需导出

语法:

export 按需导出的成员
// export导出的成员应该为语句或声明
export let n1 = 10
export let n2 = 20
export function show() {}

按需导入

语法:

import { 模块成员 } from '模块标识符'
import { n1, n2, show } from './3按需导出.js'
console.log( n1 );
console.log( n2 );
console.log( show );
10
20
[Function: show]

按需导入和按需导出的注意事项

1.每个模块中可以使用多次按需导出

2.按需导入的成员名称必须和按需导出的名称保持一致

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

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


import { n1, n2 as nn, show } from './3按需导出.js'
console.log( n1 );
console.log( nn );
console.log( show );

// export导出的成员应该为语句或声明
export let n1 = 10
export let n2 = 20
export function show() {}
function say() {}
export default {
  say
}
import say, { n1, n2 as nn, show } from './3按需导出.js'
console.log( n1 );
console.log( nn );
console.log( show );
console.log(say);
10
20
[Function: show]
{ say: [Function: say] }

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

for ( let i=0; i<5; i++ ) {
  console.log( i )
}
import './5.js'
0
1
2
3
4

相关文章
|
1月前
|
前端开发 JavaScript
前端最常见的es6,es7,es8方法
【4月更文挑战第3天】 前端最常见的es6,es7,es8方法
29 5
|
1月前
|
前端开发 JavaScript Java
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
|
1月前
|
JSON 前端开发 数据格式
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
|
11月前
|
JavaScript 前端开发
模块化开发:CommonJS、AMD 和 ES6 Modules 的区别与使用方式
在前端开发中,模块化开发是一种重要的编程方法,它可以帮助我们更好地组织和管理代码,提高代码的可维护性和复用性。在JavaScript中,有多种模块化开发的标准,包括CommonJS、AMD和ES6 Modules。让我们逐一了解它们的区别和使用方式:
127 0
|
JavaScript
ES6 ------ 基础(六)—— 模块化
ES6 ------ 基础(六)—— 模块化
125 0
|
机器学习/深度学习 边缘计算 运维
es学习笔记2-es组件
es学习笔记2-es组件
144 0
|
JavaScript 前端开发
每天3分钟,重学ES6-ES12(十八)ES Module(二)
每天3分钟,重学ES6-ES12(十八)ES Module
61 0
|
JavaScript 前端开发
每天3分钟,重学ES6-ES12(十八)ES Module(一)
每天3分钟,重学ES6-ES12(十八)ES Module
60 0
|
存储 JSON 自然语言处理
ES基础
ES基础
451 0