ES6 modular
O que é modular
Objetivo: fazer com que um arquivo .js (A.js) possa fazer referência ao código em outro arquivo .js (B.js)
Módulo: apenas um arquivo.
Especificação modular:
- especificação commonjs. Nodejs é a especificação commonjs.
- especificação es6. Especificação ECMAScript.
Em nodejs, a especificação modular: CommonJS
- Exportar:
module.exports = '导出的内容'exports.xxx = '导出的内容' - Importar:
const path = require('path')
A modularidade em nodejs é diferente da modularidade em es6.
ES6 modular
ES6 também fornece uma especificação modular: módulos ES6
- Importação e exportação padrão
- Exportar:
export default 导出内容 - Importar:
import 变量名 from 'js模块路径'
- Exportar:
- Importar e exportar sob demanda
- Exportar:
export const 成员变量名1 = '导出内容1'export const 成员变量名2 = '导出内容2'
- Importar:
import {成员变量名1} from 'js模块路径'
- Exportar:
Os passos básicos
Definir módulo
- Crie um arquivo .js, no qual, escreva algumas variáveis, funções ...
// 创建一个模块
// 如何把es6module/a.js中的fn这个函数给main.js中去使用？
const a = 100
function fn(x,y) {
return x + y
}
Módulo de exportação
// 创建一个模块
// 如何把es6module/a.js中的fn这个函数给main.js中去使用？
// const a = 100
function fn(x,y) {
return x + y
}
// 导出模块中的fn
export {
fn }
Módulo de importação
main.js
import {
fn } from './es6module/a.js'
console.log(fn(100,200)) // 300
Importação e exportação padrão
module-a.js
// 模块a 默认导出
// 可以导出任何格式的内容：字符串 数字 函数 对象 数组 ...
export default {
name: '模块A',
attr: '属性'
}
main.js
import obj from './module-a'
console.log(obj) // {name: "模块A", attr: "属性"}
Importar e exportar sob demanda
module-b.js
// 模块B 按需导出
export function fn(x,y) {
return x + y
}
export function fn1(x,y,z) {
return x + y +z
}
export const a = 314
Outra forma de escrever:
function fn(x,y) {
return x + y
}
function fn1(x,y,z) {
return x + y +z
}
const a = 314
export {
fn, fn1, a}
main.js
// 按需导入
import {
a,b} from './module-b'
console.log(a,b)
Importação inteira
// 按需导入（全部成员导入）
import * as all from './module-b'
console.log(all) // 收集了所有成员的变量（对象）
Coexistência de exportação padrão e exportação sob demanda
module-c.js
// 混合导入
// 同时有默认导出和 按需导出
const fn = function(x,y) {
return x + y
}
const a = 100
const fn1 = function(x,y,z) {
return x + y+z
}
// 按需导出
export {
a, fn1
}
// 默认导出
export default {
fn
}
main.js
// 有混合导入
import obj, {
fn1} from './es6module/c.js'
console.log(obj,fn1)
Importar e exportar renomear
Um nome exportado em a.js também é este nome;
Também há um nome duplicado em main.js, então você deve alterar o nome:
- Altere o nome ao exportar em a.js
- Altere o nome ao importar em main.js
export {
xxx as 新名字}
import {
xxx as 新名字}
// tool.js
const fn = function(x,y) {
return x + y
}
// 导出重命名
export {
fn as f2}
// index.js
import {
f2 as f1} from "./tool.js"
Se houver alguma falha, por favor, avise, para
continuar, continue atualizando!
Faça progressos juntos!