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方法
26 5
|
7月前
|
JavaScript 前端开发
ES6模块化
ES6模块化
23 0
|
12月前
|
JavaScript
|
JavaScript
ES6 ------ 基础(六)—— 模块化
ES6 ------ 基础(六)—— 模块化
123 0
|
存储 JSON 自然语言处理
ES基础
ES基础
444 0
|
JSON 前端开发 JavaScript
常用ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性归纳
js ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性归纳
293 0
|
存储 JavaScript 前端开发
es6基础(1)
es6基础(1)
97 0
es6基础(1)
es6的模块化
Module 一种将程序拆分成一个个小模块的支持,或者说是可以将一个个小模块加入到程序中去。 在ES6的module之前,比较流行的模块加载方案有:CommonJS和AMD,前者用于服务器(node),后者用于浏览器。
78 0
9、面向对象(ES5、ES6)
9、面向对象(ES5、ES6)
45 0

热门文章

最新文章