Une introduction détaillée à la modularité Javascript

Cet article vous apporte une introduction détaillée à la modularisation Javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Avec le développement vigoureux de la technologie Web et l'infrastructure de plus en plus parfaite sur laquelle elle s'appuie, le domaine du front-end s'est progressivement étendu des navigateurs aux serveurs (Node.js), aux ordinateurs de bureau (PC , Android , iOS), et même les appareils Internet des objets (IoT), parmi lesquels JavaScript représente la partie centrale de ces applications. À mesure que leur ampleur et leur complexité augmentent de façon exponentielle, leurs systèmes d'ingénierie logicielle sont également établis (développement collaboratif, tests unitaires, exigences). et gestion des défauts, etc.), le besoin d'une programmation modulaire se fait de plus en plus urgent.

La prise en charge de JavaScript pour la programmation modulaire n'a pas encore été standardisée, et il est difficile d'assumer cette tâche importante ; pendant un certain temps, les guerriers se sont avancés et ont surmonté les obstacles jusqu'au bout, passant de l'agriculture sur brûlis à l'agriculture sur brûlis. solutions modulaires tournées vers l'avenir ;

Concept

La programmation modulaire consiste à réaliser des fonctions en combinant certains __modules relativement indépendants et réutilisables__. Les deux parties principales sont __define module__ et __introduce module__ ;

• Lors de la définition d'un module, la logique d'exécution à l'intérieur de chaque module n'est pas perçue par l'extérieur. Exportez (exposez) uniquement certaines méthodes et données. ;

• Lors de l'introduction d'un module, charger le code à introduire de manière synchrone/asynchrone, exécuter et obtenir ses méthodes et données exposées ;

Slash et Burn

Bien que JavaScript ne fournisse pas de solution modulaire au niveau du langage, il peut utiliser ses fonctionnalités de langage __orientées objet__, ainsi que ses __modèles de conception_ _Blessing, il peut réaliser une architecture modulaire simple ; le mode singleton pour réaliser la modularisation, qui peut mieux encapsuler le module et n'exposer qu'une partie des informations aux endroits où le module doit être utilisé

// Define a module
var moduleA = (function ($, doc) {
  var methodA = function() {};
  var dataA = {};
  return {
    methodA: methodA,
    dataA: dataA
  };
})(jQuery, document);

// Use a module
var result = moduleA.mehodA();

Intuitivement, en utilisant des fonctions d'exécution immédiate (IIFE) pour ; déclarer les dépendances et exporter les données n'est pas significativement différent de la solution modulaire actuelle, mais elle est essentiellement différente et présente des problèmes importants qui ne peuvent pas être résolus

• Lors de la définition d'un module, le. les dépendances déclarées ne sont pas forcées d'être introduites automatiquement, c'est-à-dire qu'avant de définir le module, le code du module dépendant doit être introduit manuellement

• Lorsqu'un module est défini, son code est déjà terminé ; le processus d'exécution et ne peut pas être chargé à la demande ;

• Lors de l'utilisation d'un module dans plusieurs fichiers, le module doit être monté sur une variable globale (fenêtre ); 🎜>

  AMD & CMD divisent le monde
Digression : au fil du temps, ces deux solutions modulaires ont progressivement disparu de la scène de l'histoire, et leurs caractéristiques spécifiques ne seront pas abordées en détail Afin de répondre aux besoins restants de l'ère du « slash-and-burn », les spécifications modulaires AMD et CMD ont été publiées pour résoudre le besoin de programmation modulaire asynchrone du côté du navigateur. Le principe de base est de charger dynamiquement des scripts et des événements. auditeurs. pour charger les modules de manière asynchrone ; __

Les deux œuvres les plus représentatives d'AMD et CMD correspondent respectivement à require.js et sea.js, la principale différence réside dans le moment de la déclaration des dépendances et du chargement des dépendances ; require.js est par défaut Exécuté lorsqu'il est déclaré, sea.js préconise le chargement paresseux et l'utilisation à la demande ; il convient également de mentionner que la méthode d'écriture de la spécification CMD est très similaire à CommonJS et peut être utilisée dans CommonJS avec seulement de légères modifications ; . Il est plus facile de comprendre en se référant au cas suivant :

CommonJS

En 2009, Ty a publié la première version de Node.js. Comme l'une des fonctionnalités principales, CommonJS est. applicable Basé sur des scénarios côté serveur ; après des années d'inspection et de baptême du temps, ainsi qu'une prise en charge complète de l'ingénierie frontale, CommonJS est largement utilisé dans Node.js et les navigateurs

// AMD
define(['./a','./b'], function (moduleA, moduleB) {
  // 依赖前置
  moduleA.mehodA();
  console.log(moduleB.dataB);
  // 导出数据
  return {};
});
 
// CMD
define(function (requie, exports, module) {
  // 依赖就近
  var moduleA = require('./a');
  moduleA.mehodA();     

  // 按需加载
  if (needModuleB) {
    var moduleB = requie('./b');
    moduleB.methodB();
  }
  // 导出数据
  exports = {};
});

Standards

// Core Module
const cp = require('child_process');
// Npm Module
const axios = require('axios');
// Custom Module
const foo = require('./foo');

module.exports = { axios };
exports.foo = foo;

module (Objet) : le module lui-même

• exports (*) : la partie exportée du module, c'est-à-dire le contenu exposé

• require (Fonction) : Fonction pour charger le module, obtenir la valeur d'exportation du module cible (le type de base est la copie, le type de référence est la copie superficielle), vous pouvez charger le construit- dans les modules, les modules npm et les modules personnalisés

• Implémentation
  1 Définition du module

Par défaut, tout fichier .node .js .json est un. module conforme à la spécification ;

2. Le module d'introduction

lit d'abord le module à partir du cache (require.cache) si le cache n'est pas atteint, une analyse du chemin est effectuée, et puis traités selon différents types de modules :

Les modules intégrés sont chargés directement depuis la mémoire

• Les modules externes effectuent d'abord l'adressage des fichiers et positionnement, puis compiler et exécuter, et enfin obtenir la valeur d'exportation correspondante

• Pendant le processus de compilation, Node encapsule le contenu du fichier JavaScript obtenu. Les résultats sont les suivants. :

Résumé des fonctionnalités

(function (exports, require, module, __filename, __dirname) {
    var circle = require('./circle.js');
    console.log('The area of a circle of radius 4 is ' + circle.area(4));
});

Synchronisez l'exécution des déclarations de module et la logique d'introduction, et vous devez faire attention lors de l'analyse de certaines références de dépendances complexes (telles que circulaires dépendances);

• Le mécanisme de mise en cache a de meilleures performances et limite l'utilisation de la mémoire;

• Le module Module est très flexible pour la modification et peut répondre à une certaine personnalisation exigences (telles que la mise à jour à chaud, la prise en charge du module pour tout type de fichier

  ) ;

ES Module（推荐使用）

ES Module 是语言层面的模块化方案，由 ES 2015 提出，其规范与 CommonJS 比之 ，导出的值都可以看成是一个具备多个属性或者方法的对象，可以实现互相兼容；但写法上 ES Module 更简洁，与 Python 接近；

import fs from 'fs';
import color from 'color';
import service, { getArticles } from '../service'; 

export default service;
export const getArticles = getArticles;

主要差异在于：

• ES Module 会对静态代码分析，即在代码编译时进行模块的加载，在运行时之前就已经确定了依赖关系（可解决循环引用的问题）；

• ES Module 关键字：import export 以及独有的 default  关键字，确定默认的导出值；

• ES Module 中导入模块的属性或者方法是强绑定的，包括基础类型；

UMD

通过一层自执行函数来兼容各种模块化规范的写法，兼容 AMD / CMD / CommonJS 等模块化规范，贴上代码胜过千言万语，需要特别注意的是 ES Module 由于会对静态代码进行分析，故这种运行时的方案无法使用，此时通过 CommonJS 进行兼容；

(function (global, factory) {
  if (typeof exports === 'object') {   
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    this.eventUtil = factory();
  }
})(this, function (exports) {
  // Define Module
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = 42;
});

构建工具中的实现

为了在浏览器环境中运行模块化的代码，需要借助一些模块化打包的工具进行打包（ 以 webpack 为例），定义了项目入口之后，会先快速地进行依赖的分析，然后将所有依赖的模块转换成浏览器兼容的对应模块化规范的实现；

模块化的基础

从上面的介绍中，我们已经对其规范和实现有了一定的了解；在浏览器中，要实现 CommonJS 规范，只需要实现 module / exports / require / global 这几个属性，由于浏览器中是无法访问文件系统的，因此 require 过程中的文件定位需要改造为加载对应的 JS 片段（webpack 采用的方式为通过函数传参实现依赖的引入）。具体实现可以参考：tiny-browser-require。

webpack 打包出来的代码快照如下，注意看注释中的时序；

(function (modules) {
  // The module cache
  var installedModules = {};
  // The require function
  function __webpack_require__(moduleId) {}
  return __webpack_require__(0); // ---> 0
})
({
  0: function (module, exports, __webpack_require__) {
    // Define module A
    var moduleB = __webpack_require__(1); // ---> 1
  },
  1: function (module, exports, __webpack_require__) {
    // Define module B
    exports = {}; // ---> 2
  }
});

实际上，ES Module 的处理同 CommonJS 相差无几，只是在定义模块和引入模块时会去处理 __esModule 标识，从而兼容其在语法上的差异。

异步和扩展

1、浏览器环境下，网络资源受到较大的限制，因此打包出来的文件如果体积巨大，对页面性能的损耗极大，因此需要对构建的目标文件进行拆分，同时模块也需要支持动态加载；

webpack 提供了两个方法 require.ensure() 和 import() （推荐使用）进行模块的动态加载，至于其中的原理，跟上面提及的 AMD & CMD 所见略同，import() 执行后返回一个 Promise 对象，其中所做的工作无非也是动态新增 script 标签，然后通过 onload / onerror 事件进一步处理。

2、由于 require 函数是完全自定义的，我们可以在模块化中实现更多的特性，比如通过修改 require.resolve 或 Module._extensions 扩展支持的文件类型，使得 css / .jsx / .vue / 图片等文件也能为模块化所使用；

附录：特性一览表

模块化规范	加载方式	加载时机	运行环境	备注
AMD	异步	运行时	浏览器
CMD	异步	运行时	浏览器
CommonJS	同步/异步	运行时	浏览器 / Node
ES Module	同步/异步	编译阶段	浏览器 / Node	通过 import() 实现异步加载

相关推荐：

javascript模块化编程(转载)，javascript模块化

JavaScript模块化思想

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!