CommonJs hat viele hervorragende Funktionen. Schauen wir uns diese im Folgenden kurz an: CommonJs 有很多优秀的特性,下面我们再简单的回顾一下:
天下苦 CommonJs 久矣
Es Module 的独特之处在于,既可以通过浏览器原生加载,也可以与第三方加载器和构建工具一起加载。
支持 Es module 模块的浏览器可以从顶级模块加载整个依赖图,且是异步完成。浏览器会解析入口模块,确定依赖,并发送对依赖模块的请求。这些文件通过网络返回后,浏览器就会解析它们的依赖,,如果这些二级依赖还没有加载,则会发送更多请求。
这个异步递归加载过程会持续到整个应用程序的依赖图都解析完成。解析完成依赖图,引用程序就可以正式加载模块了。
Es Module 不仅借用了 CommonJs 和 AMD 的很多优秀特性,还增加了一些新行为：
export 和 import
export的基本使用
export const nickname = "moment";
export const address = "广州";
export const age = 18;
Nach dem Login kopieren
const nickname = "moment";
const address = "广州";
const age = 18;
export { nickname, address, age };Nach dem Login kopieren
export function foo(x, y) {
return x + y;
}
export const obj = {
nickname: "moment",
address: "广州",
age: 18,
};
// 也可以写成这样的方式
function foo(x, y) {
return x + y;
}
const obj = {
nickname: "moment",
address: "广州",
age: 18,
};
export { foo, obj };Nach dem Login kopieren
- 通常情况下，
export输出的变量就是本来的名字，但是可以使用as关键字重命名。
const address = "广州";
const age = 18;
export { nickname as name, address as where, age as old };Nach dem Login kopieren
- 默认导出,值得注意的是,一个模块只能有一个默认导出:
export default "foo";
export default { name: 'moment' }
export default function foo(x,y) {
return x+y
}
export { bar, foo as default };Nach dem Login kopieren
export 的错误使用
if(true){
export {...};
}Nach dem Login kopieren
// 1只是一个值,不是一个接口
export 1
// moment只是一个值为1的变量
const moment = 1
export moment
// function和class的输出，也必须遵守这样的写法
function foo(x, y) {
return x+y
}
export fooNach dem Login kopieren
import的基本使用
- 使用
export 命令定义了模块的对外接口以后,其他js文件就可以通过 import 命令加载整个模块
import {foo,age,nickname} form '模块标识符'Nach dem Login kopieren
- 模块标识符可以是当前模块的相对路径,也可以是绝对路径,也可以是纯字符串,但不能是动态计算的结果,例如凭借的字符串。
import 命令后面接受一个花括弧,里面指定要从其他模块导入的变量名,而且变量名必须与被导入模块的对外接口的名称相同。- 对于导入的变量不能对其重新赋值,因为它是一个只读接口,如果是一个对象,可以对这个对象的属性重新赋值。导出的模块可以修改值,导入的变量也会跟着改变。
- 从上图可以看得出来,对象的属性被重新赋值了,而变量的则报了
Assignment to constant variable 的类型错误。 - 如果模块同时导出了命名导出和默认导出,则可以在
import 语句中同时取得它们。可以依次列出特定的标识符来取得,也可以使用 * 来取得:
// foo.js
export default function foo(x, y) {
return x + y;
}
export const bar = 777;
export const baz = "moment";
// main.js
import { default as foo, bar, baz } from "./foo.js";
import foo, { bar, baz } from "./foo.js";
import foo, * as FOO from "./foo.js";Nach dem Login kopieren
动态 import
- 标准用法的
import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。 - 关键字
import 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promiseDer Modulcode ist nur in Run nach dem Laden;
- Module können nur einmal geladen werden;Module können das Laden anderer Module anfordern;🎜
- 🎜Unterstützt zirkuläre Abhängigkeiten;🎜🎜
- 🎜Module können öffentlich definieren Schnittstellen können andere Module basierend auf dieser öffentlichen Schnittstelle beobachten und interagieren nativ über den Browser oder mit Ladeprogrammen und Build-Tools von Drittanbietern geladen werden. 🎜🎜Browser, die das Modul
Es module unterstützen, können das gesamte Abhängigkeitsdiagramm asynchron vom Modul der obersten Ebene laden. Der Browser analysiert das Eingabemodul, ermittelt die Abhängigkeiten und sendet eine Anfrage für das abhängige Modul. Nachdem diese Dateien über das Netzwerk zurückgegeben wurden, löst der Browser ihre Abhängigkeiten auf. Wenn diese sekundären Abhängigkeiten nicht geladen wurden, werden weitere Anfragen gesendet. 🎜🎜Dieser asynchrone rekursive Ladevorgang wird fortgesetzt, bis das Abhängigkeitsdiagramm der gesamten Anwendung aufgelöst ist. Nachdem das Abhängigkeitsdiagramm analysiert wurde, kann das Referenzprogramm das Modul offiziell laden. 🎜🎜Es Module übernimmt nicht nur viele hervorragende Funktionen von CommonJs und AMD, sondern fügt auch einige neue Verhaltensweisen hinzu: 🎜- 🎜
Es Module wird standardmäßig im strikten Modus ausgeführt; 🎜🎜 - 🎜
Es Module teilt das Globale nicht namespace; 🎜🎜 - 🎜
Es Module Der Wert von this auf oberster Ebene ist undefiniert (normales Skript ist window</ code>); 🎜🎜<li>🎜Die <code>var-Deklaration im Modul wird nicht zum window-Objekt hinzugefügt 🎜🎜 - 🎜
Es Modul wird asynchron geladen und ausgeführt;🎜🎜🎜🎜export und import🎜
- 🎜Die Modulfunktion besteht hauptsächlich aus zwei Befehlen:
exports< /code> und <code >import. 🎜🎜 - Der Befehl
export wird verwendet, um die externe Schnittstelle des Moduls anzugeben, und der Befehl import wird verwendet, um die von anderen Modulen bereitgestellten Funktionen zu importieren. 🎜🎜🎜🎜🎜Grundlegende Verwendung von Export🎜🎜🎜- Grundform des Exports: 🎜🎜
import("./foo.js").then((module) => {
const { default: foo, bar, baz } = module;
console.log(foo); // [Function: foo]
console.log(bar); // 777
console.log(baz); // moment
});Nach dem Login kopieren
- Natürlich kann man es auch in folgender Form schreiben: 🎜🎜
const p = new Promise((resolve, reject) => {
resolve(111);
});
// SyntaxError: await is only valid in async functions and the top level bodies of modules
const result = await p;
console.log(result);Nach dem Login kopieren
Nach dem Login kopieren
< li>Exportieren Sie ein Objekt und eine Funktion nach außen 🎜🎜const p = new Promise((resolve, reject) => {
resolve(777);
});
const result = await p;
console.log(result); // 777正常输出Nach dem Login kopieren
Nach dem Login kopieren
- Normalerweise ist die von
export ausgegebene Variable ihr ursprünglicher Name, Sie können jedoch as< verwenden /code> Schlüsselwort Umbenennen. 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 错误
import { &#39;b&#39; + &#39;ar&#39; } from &#39;./foo.js&#39;;
// 错误
let module = &#39;./foo.js&#39;;
import { bar } from module;
// 错误
if (x === 1) {
import { bar } from &#39;./foo.js&#39;;
} else {
import { foo } from &#39;./foo.js&#39;;
}</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><ul><li>Standardexport, es ist zu beachten, dass ein Modul nur einen Standardexport haben kann: 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><script type="module" src="./main.mjs"></script>
<script type="module"></script></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜🎜export falsche Verwendung🎜🎜🎜<ul><li>Die Exportanweisung muss in sein Das Modul oberste Ebene, kann nicht in einem Block verschachtelt werden: 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <script type="module">
console.log("模块情况下的");
</script>
<script src="./main.js" type="module" defer></script>
<script>
console.log("正常 script标签");
</script></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><ul><li><code>export Muss eine externe Schnittstelle bereitstellen: 🎜🎜 <script src="./foo.js"></script>
<script src="./foo.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js"></script>Nach dem Login kopieren
Nach dem Login kopieren
- Nachdem der Befehl
export zum Definieren der externen Schnittstelle des Moduls verwendet wurde, können andere js-Dateien das gesamte Modul über den Befehl import laden🎜🎜// main.js
import { bar } from "./bar.js";
export const main = "main";
console.log("main");
// foo.js
import { main } from "./main.js";
export const foo = "foo";
console.log("foo");
// bar.js
import { foo } from "./foo.js";
export const bar = "bar";
console.log("bar");Nach dem Login kopieren
Nach dem Login kopieren
- Modulidentifikation Das Zeichen kann ein relativer Pfad zum aktuellen Modul, ein absoluter Pfad oder eine reine Zeichenfolge sein, es kann jedoch nicht das Ergebnis einer dynamischen Berechnung sein, z. B. eine Abhängigkeitsfolge. 🎜
import Der Befehl akzeptiert eine geschweifte Klammer, die den Variablennamen angibt, der aus anderen Modulen importiert werden soll, und der Variablenname muss mit dem Namen der externen Schnittstelle des importierten Moduls identisch sein . 🎜- Die importierte Variable kann nicht neu zugewiesen werden, da es sich um eine schreibgeschützte Schnittstelle handelt. Wenn es sich um ein Objekt handelt, können die Eigenschaften des Objekts neu zugewiesen werden. Exportierte Module können Werte ändern, und importierte Variablen ändern sich ebenfalls entsprechend. 🎜🎜🎜🎜
