1. Introduction à la modularisation
La modularisation dans le domaine de la programmation consiste à suivre des règles fixes et à diviser un gros fichier en plusieurs petits modules indépendants et interdépendants. Encapsuler un programme complexe en plusieurs blocs selon certaines règles et les combiner ensemble ; les données internes et l'implémentation du bloc sont privées, et seules certaines interfaces et méthodes sont exposées à l'extérieur.
Les avantages du code de fractionnement modulaire :
- Amélioration de la réutilisabilité du code
- Amélioration de la maintenabilité du code
- Le chargement à la demande peut être réalisé
- éviter les conflits de nom
2.CommonJS
Description détaillée des fonctionnalités de CommonJS :
- Chaque fichier JavaScript est un module indépendant, et sa portée est uniquement à l'intérieur du module, sans polluer la portée globale.
- Le chargement est synchrone (peut-être bloquant) côté serveur, chargé dans l'ordre écrit ;
- Du côté du navigateur, un traitement d'extraction, de compilation et d'empaquetage est nécessaire ;
- Les modules peuvent être chargés plusieurs fois, mais ne seront exécutés qu'une seule fois lors de leur premier chargement, puis les résultats seront mis en cache. Le prochain rechargement consiste à lire directement le résultat mis en cache. Le cache du module peut être vidé.
Syntaxe de base :
Module d'exposition : l'essence de l'exposition est l'objet d'exportation
module.exports=value exports.xxx=value
- module.exports est le [rôle important] qui décide vraiment d'exporter des objets
- exports est juste [une référence] à module.exports
- L'affectation à module.exports doit être effectuée immédiatement, et non dans un rappel (elle doit être effectuée dans une tâche synchrone).
- Lorsque l'attribut module.exports est complètement remplacé par un nouvel objet, les exportations sont généralement également réaffectées "automatiquement". Si vous utilisez la variable exports pour exporter un nouvel objet, vous devez associer "manuellement" module.exprots et exports, sinon le module la valeur ne peut pas être sortie comme prévu.
CommonJS déclare :
① A l'intérieur de chaque module, la variable module représente le module courant.
② La variable de module est un objet et sa propriété exports (à savoir module.exports) est une interface externe.
③ Charger un module revient en fait à charger l'attribut module.exports du module. La méthode require() est utilisée pour charger les modules.
module.exports={
msg:'m1',
foo(){
}
}
exports.foo=function(){
}
exports.arr=[1,2,4]
Module d'importation : le module personnalisé xxx est le chemin du fichier ; le module tiers xxx est le nom du module
require(xxx)
let m1=require('../m1')
m1.foo();
let m2=require('../m2')
m2.foo();
Atteindre :
- Côté serveur : Node.js
- Côté navigateur : Browserify
À l'intérieur de chaque module, il y a un objet module, représentant le module courant ; le module module stocke les informations relatives au module courant ; lorsque le monde extérieur utilise la méthode require() pour importer un module personnalisé, ce qui est obtenu est l'objet pointé par 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 = []
}
Mécanisme de chargement des modules :
- Charger d'abord depuis le cache : les modules sont mis en cache après le premier chargement. Cela signifie également que l'appel multiple de require() n'entraînera pas l'exécution multiple du code du module.
- Les modules intégrés sont des modules officiellement fournis par Node.js, et la priorité de chargement des modules intégrés est la plus élevée.
- Lorsque vous utilisez require() pour charger un module personnalisé, vous devez spécifier un identifiant de chemin commençant par ./ ou .../.
- Si l'identifiant de module passé à require() n'est pas un module intégré, ni ne commence par './' ou '.../', Node.js démarre à partir du répertoire parent du module actuel et essaie de le charger à partir de les modules tiers du dossier /node_modules.
3.ES6
Les modules dépendants doivent être compilés et empaquetés
Exposez respectivement :
export function foo() {
console.log('foo()');
}
export function bar() {
console.log('bar()');
}
export let arr = [1, 2, 3, 4, 5]
Exposition uniforme :
function fun() {
console.log('fun()');
}
function fun2() {
console.log('fun2()');
}
export {
fun, fun2 }
Exposition par défaut :
un module ne peut avoir qu'une seule exportation par défaut. Pour l'exportation par défaut, le nom de l'importation peut être incohérent avec le nom de l'exportation.
export default {
msg: 'hello......',
fun: () => {
console.log('aaaaaaaaaaaaa');
}
}
Présentez :
// 引入其他的模块
// 如果是单个的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'
Dénomination lourde :
import {
fun as fun1} from 'fun.js'