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

相关文章
|
7月前
|
JavaScript
es5和es6的区别
es5和es6的区别
64 0
|
7月前
|
存储 JavaScript 前端开发
|
3月前
|
存储 JavaScript 前端开发
[JS] ES Modules的运作原理
【9月更文挑战第16天】ES Modules(ECMAScript Modules)是 JavaScript 中的一种模块化开发规范,适用于浏览器和 Node.js 环境。它通过 `export` 和 `import` 关键字实现模块的导出与导入。模块定义清晰,便于维护和测试。JavaScript 引擎会在执行前进行静态分析,确保模块按需加载,并处理循环依赖。ES Modules 支持静态类型检查,现代浏览器已原生支持,还提供动态导入功能,增强了代码的灵活性和性能。这一规范显著提升了代码的组织和管理效率。
|
4月前
|
JavaScript 前端开发 Java
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
|
7月前
|
前端开发 JavaScript
前端最常见的es6,es7,es8方法
【4月更文挑战第3天】 前端最常见的es6,es7,es8方法
77 5
|
7月前
|
前端开发 JavaScript API
ES6和ES5的区别
ES6和ES5的区别
54 0
|
7月前
|
JSON 前端开发 数据格式
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
131 0
|
7月前
|
前端开发 JavaScript Java
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
109 0