1. Introducción a la Modularización
La modularización en el campo de la programación consiste en seguir reglas fijas y dividir un archivo grande en varios módulos pequeños que son independientes e interdependientes. Encapsule un programa complejo en varios bloques de acuerdo con ciertas reglas y combínelos; los datos internos y la implementación del bloque son privados, y solo algunas interfaces y métodos están expuestos al exterior.
Los beneficios del código de división modular:
- Reutilización de código mejorada
- Mantenibilidad de código mejorada
- Se puede lograr la carga a pedido
- evitar conflictos de nombres
2.ComúnJS
Descripción detallada de la característica de CommonJS :
- Cada archivo JavaScript es un módulo independiente y su alcance está solo dentro del módulo, sin contaminar el alcance global.
- La carga es síncrona (tal vez de bloqueo) en el lado del servidor, se carga en el orden escrito;
- En el lado del navegador, se requiere el procesamiento de extracción, compilación y empaquetado;
- Los módulos se pueden cargar varias veces, pero solo se ejecutarán una vez la primera vez que se carguen y luego los resultados se almacenarán en caché. La próxima recarga es leer el resultado almacenado en caché directamente. La memoria caché del módulo se puede borrar.
Sintaxis básica :
Módulo de exposición: la esencia de la exposición es el objeto de exportación
module.exports=value exports.xxx=value
- module.exports es el [rol importante] que realmente decide exportar objetos
- exportaciones es solo [una referencia] a module.exports
- La asignación a module.exports debe realizarse de inmediato, no en ninguna devolución de llamada (debe realizarse en una tarea síncrona).
- Cuando el atributo module.exports se reemplaza completamente por un nuevo objeto, las exportaciones generalmente también se reasignan "automáticamente". Si usa la variable export para exportar un nuevo objeto, debe asociar "manualmente" module.exports y exportaciones; El valor no se puede generar como se esperaba.
CommonJS afirma:
① Dentro de cada módulo, la variable del módulo representa el módulo actual.
② La variable del módulo es un objeto y su propiedad de exportación (a saber, module.exports) es una interfaz externa.
③ Cargar un módulo es en realidad cargar el atributo module.exports del módulo. El método require() se usa para cargar módulos.
module.exports={
msg:'m1',
foo(){
}
}
exports.foo=function(){
}
exports.arr=[1,2,4]
Módulo de importación: el módulo personalizado xxx es la ruta del archivo; el módulo de terceros xxx es el nombre del módulo
require(xxx)
let m1=require('../m1')
m1.foo();
let m2=require('../m2')
m2.foo();
lograr :
- Lado del servidor: Node.js
- Lado del navegador: Browserify
Dentro de cada módulo, hay un objeto de módulo, que representa el módulo actual; el módulo de módulo almacena información relacionada con el módulo actual; cuando el mundo exterior usa el método require() para importar un módulo personalizado, lo que se obtiene es el objeto al que apunta por module.exports.
// Module 构造函数
function Module(id = '', parent) {
this.id = id
this.path = path.dirname(id)
this.exports = {
}
moduleParentCache.set(this, parent)
updateChildren(parent, this, false)
this.filename = null
this.loaded = false
this.children = []
}
Mecanismo de carga del módulo :
- Cargar desde caché primero: los módulos se almacenan en caché después de la primera carga. Esto también significa que llamar a require() varias veces no hará que el código del módulo se ejecute varias veces.
- Los módulos integrados son módulos proporcionados oficialmente por Node.js, y la prioridad de carga de los módulos integrados es la más alta.
- Al usar require() para cargar un módulo personalizado, debe especificar un identificador de ruta que comience con ./ o .../.
- Si el identificador del módulo pasado a require() no es un módulo integrado, ni comienza con './' o '.../', Node.js comienza desde el directorio principal del módulo actual e intenta cargarlo desde la carpeta /node_modules módulos de terceros.
3.ES6
Los módulos dependientes deben compilarse y empaquetarse
Exponer respectivamente :
export function foo() {
console.log('foo()');
}
export function bar() {
console.log('bar()');
}
export let arr = [1, 2, 3, 4, 5]
Exposición uniforme :
function fun() {
console.log('fun()');
}
function fun2() {
console.log('fun2()');
}
export {
fun, fun2 }
Exposición predeterminada :
un módulo solo puede tener una exportación predeterminada. Para la exportación predeterminada, el nombre de la importación puede ser incoherente con el nombre de la exportación.
export default {
msg: 'hello......',
fun: () => {
console.log('aaaaaaaaaaaaa');
}
}
Introducir :
// 引入其他的模块
// 如果是单个的js文件 引入时要加上后缀
// 引入的是一个npm下载的包，就不需要加后缀
import {
foo, bar} from './module1.js'
import {
fun, fun2} from './module2.js'
import module3 from './module3.js'
import $ from 'jquery'
import express from 'express'
Denominación pesada :
import {
fun as fun1} from 'fun.js'