Dieser Artikel bietet Ihnen eine detaillierte Analyse und einen Vergleich der Front-End-Modularisierung. Ich hoffe, dass er Ihnen als Referenz dienen wird.
wirft Fragen auf:
werden häufig beim Importieren von Modulen während der Entwicklung verwendet. requireimport
- oder
beim Exportieren eines Moduls; ? ? ? Was ist der Unterschied zwischen ihnen? module.exports/exportsexport/export default
Es gibt also einen Suchprozess für Neulinge, um ihre Zweifel auszuräumen. . . . . Zurück zur Grundursache und zur Js-Modulspezifikation kommenrequireimport1. CommonJS-Spezifikation (synchrones Laden von Modulen)
Module zulassen Übergeben Sie die Anforderungsmethode
Laden Sie synchron andere Module, von denen
abhängt, und exportieren Sie dann die Schnittstellen, die verfügbar gemacht werden müssen, über Exporte oder module.exports.
Da die Module auf der Serverseite platziert sind, hängt die Ladezeit auch von Faktoren wie der Geschwindigkeit des Netzwerks ab Wenn Sie lange warten, wird die gesamte Anwendung blockiert.
Daher können browserseitige Module kein „synchrones Laden“ (CommonJs), sondern nur „asynchrones Laden“ (AMD) verwenden.
Vorteile:
Nachteile:
-
?
Warum kann der Browser das synchrone Laden nicht nutzen, der Server jedoch schon? Die Methode des synchronen Ladens ist nicht für die Verwendung in einer Browserumgebung geeignet. Synchronisierung bedeutet, dass das Laden blockiert wird und Browserressourcen asynchron geladen werden
Kann nicht mehrere Module parallel laden, ohne zu blockieren
-
Serverseitige Module sind einfach wiederzuverwenden
Laden Sie das Modul asynchron. Das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen. Alle Anweisungen, die von Modulen abhängen, werden in einer Callback-Funktion definiert. Die Callback-Funktion wird erst ausgeführt, wenn der Ladevorgang abgeschlossen ist.
Verwendungsbeispiel:
-
// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});Nach dem Login kopieren
Modul laden- Der erste Parameter [Modul] ist ein Array, das Die darin enthaltenen Mitglieder sind die zu ladenden Module. Der zweite Parameterrückruf ist die Rückruffunktion nach erfolgreichem Laden.
Vorteile:
-
Nachteile:
, was nicht der allgemeinen modularen Denkweise entspricht und eine kompromittierte Implementierung darstellt
-
Die Implementierung der AMD-Spezifikation repräsentiert
require.js
Die Require-Funktion prüft die abhängigen Module und ermittelt den tatsächlichen Pfad der js-Datei gemäß der Konfigurationsdatei
Fügen Sie gemäß dem tatsächlichen Pfad der JS-Datei den Skriptknoten in den Dom ein und binden Sie das Onload-Ereignis, um eine Benachrichtigung zu erhalten, dass das Modul geladen ist.
CMD-Spezifikation (asynchrones Lademodul)
-
Die CMD-Spezifikation ist AMD sehr ähnlich, einfach und behält eine große Kompatibilität mit der Modulspezifikation von CommonJS und Node.js bei. In der CMD-Spezifikation ist ein Modul eine Datei.
Das Definitionsmodul verwendet die globale Funktion define, die den Factory-Parameter empfangen kann.
factory ist eine Funktion mit drei Parametern, function(require, exports, module):
-
require ist eine Methode, die die Modul-ID als einzigen Parameter akzeptiert, um andere zu erhalten Vom Modul bereitgestellte Schnittstelle: require(id)
-
exports ist ein Objekt, das verwendet wird, um die Modulschnittstelle für die Außenwelt bereitzustellen Modul ist ein Objekt. Einige Eigenschaften und Methoden, die mit dem aktuellen Modul verknüpft sind, werden oben gespeichert:
define(function(require, exports, module) {
var a = require('./a');
a.doSomething();
// 依赖就近书写，什么时候用到什么时候引入
var b = require('./b');
b.doSomething();
});Nach dem Login kopieren
依赖就近，延迟执行
可以很容易在 Node.js 中运行
依赖 SPM 打包，模块的加载逻辑偏重
AMD 与 CMD 的区别
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从2.0开始，也改成了可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
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()
// ...
});Nach dem Login kopieren
UMD
(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 ...
});Nach dem Login kopieren
ES6模块化
// 导入
import "/app";
import React from “react”;
import { Component } from “react”;
// 导出
export function multiply() {...};
export var year = 2018;
export default ...
...Nach dem Login kopieren
容易进行静态分析
面向未来的 EcmaScript 标准
原生浏览器端还没有实现该标准
全新的命令字，新版的 Node.js才支持。
回到问题“require与import的区别”
对于基本数据类型，属于复制。即会被模块缓存；同时，在另一个模块可以对该模块输出的变量重新赋值。
对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
当使用require命令加载某个模块时，就会运行整个模块的代码。
当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
ES6模块中的值属于【动态只读引用】。
对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。
Abschließend: „require/exports“ ist notwendig, universell und notwendig, da der Import/Export, den Sie derzeit schreiben, tatsächlich zur Ausführung in „require/exports“ kompiliert wird.
Verwandte Empfehlungen:
JS-Code zur Implementierung der Datenübertragung zwischen Seiten
JS-Tutorial – dynamischer Programmieralgorithmus Rucksackkapazitätsproblem
Erläuterung des Wissens über Umfang und Verschluss in JavaScript
Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Front-End-Modularisierung in JS und Vergleich ihrer Unterschiede. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
