Importation et exportation modulaire Js

Importation et exportation modulaire Js

CommonJs, AMD, CMD, ES6Sont définis dans les spécifications pour une utilisation modulaire, pour lequel la dépendance entre le module de traitement et la mise en place de la structure des modules standardisés et résoudre les conflits de noms, et à faire usage d'une approche modulaire pour décomposer des systèmes complexes de code est plus raisonnable , Un module gérable avec une maintenabilité plus élevée.

CommonJS

CommonJSIl s'agit de NodeJsla spécification des modules côté serveur. Selon cette spécification, chaque fichier est un module avec sa propre portée. Les variables, fonctions et classes définies dans un fichier sont privées et invisibles aux autres fichiers. CommonJSLa spécification stipule que dans chaque module, les modulevariables représentent le module actuel. Cette variable est un objet et ses exportsattributs sont des interfaces externes. Le chargement d'un module revient en fait à charger les exportspropriétés du module . Bref, les CommonJSspécifications sont requireimportées module.exportset exportsexportées.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

module.exports = {
    a: a,
    b: b
}

/*
// 当导出的模块名与被导出的成员或方法重名时可以有如下写法
module.exports = {
    a,
    b
}
*/

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

Il peut également être utilisé exportspour l'exportation, mais vous ne devez pas réécrire exportsle pointeur, car il exportsne s'agit que d'un pointeur et pointe vers module.exportsla zone de mémoire, c'est-à-dire que la exports = module.exports = {}réécriture exportsmodifie le pointeur au point que le module ne peut pas être exporté, ce qui exportsfournit simplement une solution simple pour l'écriture En fin de compte, en fait, tous utilisent l' module.exportsexportation. En outre si elles sont utilisées simultanément dans un seul fichier module.exportset exportspuis exporter uniquement le module.exportscontenu

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

exports.a = a;
exports.b = b;

// exports = { a, b } // 不能这么写，这样就改变了exports的指向为一个新对象而不是module.exports

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

AMD

AMDLa spécification ne l'est pas AMD YES, la AMDdéfinition du module asynchrone, le nom complet de la Asynchronous Module Definitionspécification, est une solution modulaire côté navigateur. Le CommonJSmodule d'introduction de spécification est chargé de manière synchrone, ce qui n'est pas un problème côté serveur, car ses modules sont stockés sur le disque dur et peuvent attendre la fin du chargement synchrone Dans le navigateur, le module est chargé via le réseau. S'il est bloqué de manière synchrone et attend que le module se charge, il peut y avoir une situation où la page du navigateur est suspendue AMD. Le module est chargé de manière asynchrone. Le chargement du module n'affecte pas le fonctionnement des instructions qui se trouvent derrière. Toutes les instructions qui dépendent de ce module sont définies dans une fonction de rappel. Cette fonction de rappel ne s'exécutera pas tant que le chargement n'est pas terminé, ce qui RequireJScorrespond à la AMDspécification.

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
});

define(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
    return {};
});

/**
define和require在依赖处理和回调执行上都是一样的，不一样的地方是define的回调函数需要有return语句返回模块对象(注意是对象)，这样define定义的模块才能被其他模块引用；require的回调函数不需要return语句，无法被别的模块引用
*/

// html的<script>标签也支持异步加载
// <script src="require.js" defer async="true" ></script> <!-- async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 -->

CMD

CMDLa définition générale du module est SeaJSla sortie standardisée de la définition du module dans le processus de promotion, et est également une solution modulaire asynchrone côté navigateur. La différence entre le CMDet AMDest principalement due à:

• Pour les modules dépendants, il AMDest exécuté à l'avance (fonction de rappel relativement définie, le AMDchargeur doit charger toutes les dépendances à l'avance et appeler l'exécution puis exécuter la fonction de rappel), il CMDs'agit d'une exécution différée (fonction de rappel relativement définie, le CMDchargeur doit charger toutes les dépendances Après l'exécution de la fonction de rappel, lorsque l'exécution nécessite le module dépendant, la dépendance chargée est appelée et renvoyée à la fonction de rappel), mais RequireJSdepuis le 2.0début, elle peut également être modifiée pour retarder l'exécution
• AMDIl dépend de l'avant (lorsque vous définissez le module, vous devez déclarer le module dont il dépend), et il CMDest le plus proche de la dépendance (ne partez que lorsque vous avez requirebesoin d' un certain module de charge à la demande, retournez immédiatement après utilisation ).

define(function(require,exports,module){
　　var a = reuire('require.js');
　　a.dosomething();
　　return {};
});

ES6

ES6La fonction du module est implémentée au niveau des standards linguistiques, afin de devenir une solution de module commune pour les navigateurs et les serveurs. Le ES6standard utilise exportet export defaultpour exporter le module et utilise le importmodule d'importation. De plus , le module qui peut être utilisé requirepour importer exportet export defaultexporter dans l'environnement du navigateur est toujours recommandé, mais il est toujours recommandé d'utiliser le importmodule d'importation standard.
exportLes export defaultprincipales différences sont les suivantes:

• exportPeut être importé sur demande, export defaultnon
• exportIl peut y en avoir plusieurs, export defaultun seul
• exportPeut exporter directement des expressions variables, export defaultnon
• exportExporter par le biais de {}, export defaultil doit être ajouté lors de l'importation , il n'est pas nécessaire

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

var c = 3;
var d = a + c;

var obj = { a,b,c }



export {a,b};

export {c,d};

export default obj;

<!-- 3.html 由于浏览器限制，需要启动一个server服务 -->
<!DOCTYPE html>
<html>
<head>
    <title>ES6</title>
</head>
<body>

</body>
<script type="module">
    import {a,b} from "./1.js"; // 导入export
    import m1 from "./1.js"; // 不加{}即导入export default 
    import {c} from "./1.js"; // 导入export 按需导入
    
    console.log(a); // 1
    console.log(b); // ƒ (){ console.log(a); }
    console.log(m1); // {a: 1, c: 3, b: ƒ}
    console.log(c); // 3
</script>
</html>

Référence

https://segmentfault.com/a/1190000010426778
https://www.cnblogs.com/leftJS/p/11073481.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html