Analyse détaillée de la modularisation frontale dans JS et comparaison de ses différences

Ce que cet article vous apporte, c'est une analyse détaillée et une comparaison de la modularisation frontale dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

pose des questions :

• sont souvent utilisés lors de l'importation de modules pendant le développement ; requireimport

Utilisez
• ou

  ; lors de l'exportation d'un module ; ? ? ? Quelle est la différence entre eux ? module.exports/exportsexport/export default

Il existe donc un processus de recherche de rookies pour résoudre leurs doutes. . . . .

• Remontez à la cause première et revenez à la spécification modulaire Jsrequireimport1 spécification CommonJS (chargement synchrone des modules)

Autoriser les modules à. passez la méthode require

Chargez de manière synchrone les autres modules dont

dépend, puis exportez les interfaces qui doivent être exposées via exports ou module.exports.

Utilisation :

• Car les modules sont placés côté serveur, pour le côté serveur Pour le temps de chargement des modules

// 导入
require("module");
require("../app.js");
// 导出
exports.getStoreInfo = function() {};
module.exports = someValue;

et pour le côté navigateur, comme les modules sont placés côté serveur, le temps de chargement dépend également de facteurs tels que la vitesse du réseau. Si vous devez attendre longtemps, l’intégralité de l’application sera bloquée.

• Par conséquent, les modules côté navigateur ne peuvent pas utiliser le « chargement synchrone » (CommonJs), mais ne peuvent utiliser que le « chargement asynchrone » (AMD).

• Avantages :

• Inconvénients :

• ?
Pourquoi le navigateur ne peut-il pas utiliser le chargement synchrone, alors que le serveur le peut ?

• La méthode de chargement synchrone ne convient pas à une utilisation dans un environnement de navigateur. La synchronisation signifie bloquer le chargement et les ressources du navigateur sont chargées de manière asynchrone

Impossible de charger plusieurs modules en parallèle sans bloquer

1. Simple et facile à utiliser

2. Les modules côté serveur sont faciles à réutiliser

1. Référez-vous au module CommonJs pour représenter le système de modules de node.js

2. AMD (Module de chargement asynchrone)

• Charger le module de manière asynchrone Le chargement du module n'affecte pas l'exécution des instructions suivantes. Toutes les instructions qui dépendent des modules sont définies dans une fonction de rappel. La fonction de rappel n'est exécutée qu'une fois le chargement terminé.

Exemple d'utilisation :

Charger le module
• Le premier paramètre [module] est un tableau dont les membres sont les modules à charger ; le deuxième paramètre de rappel est la fonction de rappel après un chargement réussi.

Avantages :

// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});

• require([module], callback);Convient au chargement asynchrone de modules dans un environnement de navigateur

• Plusieurs modules peuvent être chargés en parallèle

1. Inconvénients :

2. Augmente les coûts de développement et est difficile à lire et écrire du code , la sémantique de la méthode de définition du module n'est pas fluide

, ce qui n'est pas conforme à la façon de penser modulaire générale et est une implémentation compromise

1. L'implémentation de la spécification AMD représente

2. L'attitude de RequireJS envers les modules est la pré-exécution. Puisque RequireJS est une spécification AMD implémentée, tous les modules dépendants sont exécutés en premier ; c'est-à-dire que RequireJS exécute les modules dépendants à l'avance, ce qui équivaut à avancer le processus d'exécution require

RequireJS : require.js

La fonction require vérifie les modules dépendants et obtient le chemin réel du fichier js selon le fichier de configuration

• Selon le chemin réel du fichier js, insérez le nœud de script dans le dom et liez l'événement onload pour recevoir une notification indiquant que le module est chargé.

1. Une fois tous les scripts dépendants chargés, appelez la fonction de rappel

2. Spécification CMD (module de chargement asynchrone)

3. La spécification CMD est très similaire à AMD, simple, et maintient une grande compatibilité avec la spécification Modules de CommonJS et Node.js dans la spécification CMD, un module est un fichier ;

Le module de définition utilise la fonction globale définir, qui reçoit le paramètre factory. Factory peut être une fonction, un objet ou une chaîne

factory est une fonction avec trois paramètres, function(require, exports, module):
• require est une méthode qui accepte l'ID du module comme seul paramètre pour obtenir d'autres interface fournie par le module : require(id)

• exports est un objet, utilisé pour fournir l'interface du module avec le monde extérieur

. Le module est un objet. Certaines propriétés et méthodes associées au module actuel sont stockées ci-dessus
2. Instance :

define(function(require, exports, module) {
  var a = require('./a');
  a.doSomething();
  // 依赖就近书写，什么时候用到什么时候引入
  var b = require('./b');
  b.doSomething();
});

• 优点：

1. 依赖就近，延迟执行

2. 可以很容易在 Node.js 中运行

• 缺点：

1. 依赖 SPM 打包，模块的加载逻辑偏重

• 实现代表库sea.js：SeaJS对模块的态度是懒执行, SeaJS只会在真正需要使用(依赖)模块时才执行该模块

AMD 与 CMD 的区别

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从2.0开始，也改成了可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

2. AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。

// AMD
define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好  
   a.doSomething()    
   // 此处略去 100 行    
   b.doSomething()    
   ...
});
// CMD
define(function(require, exports, module) {
   var a = require('./a')   
   a.doSomething()   
   // 此处略去 100 行   
   var b = require('./b') 
   // 依赖可以就近书写   
   b.doSomething()
   // ... 
});

UMD

• UMD是AMD和CommonJS的糅合

• AMD 以浏览器第一原则发展异步加载模块。

• CommonJS 模块以服务器第一原则发展，选择同步加载，它的模块无需包装。

• UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式；在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object') {
    
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
    
        define(factory);
    } else {
    
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

ES6模块化

• ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

• ES6 模块设计思想：尽量的静态化、使得编译时就能确定模块的依赖关系，以及输入和输出的变量（CommonJS和AMD模块，都只能在运行时确定这些东西）。

• 使用方式：

// 导入
import "/app";
import React from “react”;
import { Component } from “react”;
// 导出
export function multiply() {...};
export var year = 2018;
export default ...
...

• 优点：

1. 容易进行静态分析

2. 面向未来的 EcmaScript 标准

• 缺点：

1. 原生浏览器端还没有实现该标准

2. 全新的命令字，新版的 Node.js才支持。

回到问题“require与import的区别”

• require使用与CommonJs规范，import使用于Es6模块规范；所以两者的区别实质是两种规范的区别；

• CommonJS：

1. 对于基本数据类型，属于复制。即会被模块缓存；同时，在另一个模块可以对该模块输出的变量重新赋值。

2. 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。

3. 当使用require命令加载某个模块时，就会运行整个模块的代码。

4. 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

5. 循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

• ES6模块

1. ES6模块中的值属于【动态只读引用】。

2. 对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

3. 对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。

4. 循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

• Enfin : require/exports est nécessaire, universel et nécessaire car en fait, l'import/export que vous écrivez actuellement est finalement compilé dans require/exports pour exécution.

Recommandations associées :

Code js pour implémenter le transfert de données entre les pages

Tutoriel JS - Algorithme de programmation dynamique problème de capacité du sac à dos

Explication des connaissances sur la portée et la fermeture en 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!