ES6 modular
Que es modular
Objetivo: hacer que un archivo .js (A.js) pueda hacer referencia al código en otro archivo .js (B.js)
Módulo: solo un archivo.
Especificación modular:
- especificación commonjs. Nodejs es la especificación commonjs.
- especificación es6. Especificación ECMAScript.
En nodejs, la especificación modular: CommonJS
- Exportar:
module.exports = '导出的内容'exports.xxx = '导出的内容' - Importar:
const path = require('path')
La modularidad en nodejs es diferente de la modularidad en es6.
ES6 modular
ES6 también proporciona una especificación modular: módulos ES6
- Importación y exportación por defecto
- Exportar:
export default 导出内容 - Importar:
import 变量名 from 'js模块路径'
- Exportar:
- Importación y exportación bajo demanda
- Exportar:
export const 成员变量名1 = '导出内容1'export const 成员变量名2 = '导出内容2'
- Importar:
import {成员变量名1} from 'js模块路径'
- Exportar:
Los pasos básicos
Definir módulo
- Crea un archivo .js, en el que, escribe algunas variables, funciones ...
// 创建一个模块
// 如何把es6module/a.js中的fn这个函数给main.js中去使用？
const a = 100
function fn(x,y) {
return x + y
}
Módulo de exportación
// 创建一个模块
// 如何把es6module/a.js中的fn这个函数给main.js中去使用？
// const a = 100
function fn(x,y) {
return x + y
}
// 导出模块中的fn
export {
fn }
Módulo de importación
main.js
import {
fn } from './es6module/a.js'
console.log(fn(100,200)) // 300
Importación y exportación por defecto
module-a.js
// 模块a 默认导出
// 可以导出任何格式的内容：字符串 数字 函数 对象 数组 ...
export default {
name: '模块A',
attr: '属性'
}
main.js
import obj from './module-a'
console.log(obj) // {name: "模块A", attr: "属性"}
Importación y exportación bajo 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
Otra forma de escribir:
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)
Importación completa
// 按需导入（全部成员导入）
import * as all from './module-b'
console.log(all) // 收集了所有成员的变量（对象）
Coexistencia de exportación predeterminada y exportación bajo 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 y exportar renombrar
Un nombre exportado en a.js también es este nombre;
También hay un nombre duplicado en main.js, por lo que debe cambiar el nombre:
- Cambiar el nombre al exportar en a.js
- Cambie el nombre al importar en 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"
Si hay alguna deficiencia, por favor avise,
continúe, ¡continúe actualizando!
¡Progresen juntos!