Antworten Sie mir zuerst: Warum sind Module wichtig?
Antwort: Dank der Module können wir den Code anderer Leute bequemer verwenden und beliebige Module für alle gewünschten Funktionen laden.
Hierfür gibt es allerdings eine Voraussetzung, das heißt, jeder muss das Modul gleich schreiben, sonst hat man seine Schreibweise, und ich habe meine Schreibweise, nicht es wird ein Durcheinander sein!
Daher wurden die folgenden drei Module standardisiert und dieser Artikel auch veröffentlicht (buchstabiert {Gesichtsbedeckung und Lachen}).
Modulspezifikation in JS (CommonJS, AMD, CMD), wenn Sie von js-Modularisierung gehört haben, dann sollten Sie davon gehört haben oder von CommonJS oder AMD oder sogar ich Ich habe von diesen CMD-Vorschriften gehört, aber bevor ich sie mir wirklich angehört habe. Schauen wir uns nun an, was diese Spezifikationen sind und was sie bewirken. Dieser Artikel enthält die Quellen dieser drei Spezifikationen und die Prinzipien der entsprechenden Produkte.
1. CommonJS
1. Zuerst dachten alle, JS sei eine heiße Frau , es ist nutzlos. Die offiziell definierte API kann nur browserbasierte Anwendungen erstellen, das ist zu eng (ein High-End-Wort wird verwendet, CommonJS-API kann es nicht mehr ertragen). Gemeinsame APIs, die von Anwendungen (hauptsächlich Nicht-Browser-Anwendungen) verwendet werden, schließen diese Lücke. Das ultimative Ziel besteht darin, eine Standardbibliothek bereitzustellen, die Python, Ruby und Java ähnelt. In diesem Fall können Entwickler die CommonJS-API zum Schreiben von Anwendungen verwenden, und diese Anwendungen können dann in verschiedenen JavaScript-Interpretern und verschiedenen Hostumgebungen ausgeführt werden.
In Systemen, die mit CommonJS kompatibel sind, können Sie JavaScript verwenden, um die folgenden Programme zu entwickeln:
(1) Serverseitige JavaScript-Anwendung
(2). Befehlszeilentool
(3). Titanium oder Adobe AIR)
Im Jahr 2009 erstellte der amerikanische Programmierer Ryan Dahl das Projekt node.js, um die Javascript-Sprache für die serverseitige Programmierung zu verwenden. Dies markiert die offizielle Geburtsstunde der „modularen Javascript-Programmierung“. Denn um ehrlich zu sein: In einer Browserumgebung ist das Fehlen von Modulen kein großes Problem. Schließlich ist die Komplexität von Webprogrammen begrenzt, aber auf der Serverseite müssen Module vorhanden sein, um mit dem Betriebssystem und anderen Anwendungen zu interagieren. sonst gibt es keine Möglichkeit. NodeJS ist eine Implementierung der CommonJS-Spezifikation, und Webpack ist ebenfalls in Form von CommonJS geschrieben.
Das Modulsystem von node.js wird unter Bezugnahme auf die CommonJS-Spezifikation implementiert. In CommonJS gibt es eine globale Methode require() zum Laden von Modulen. Vorausgesetzt, es gibt ein Mathematikmodul math.js, kann es wie folgt geladen werden.
var math = require('math');
Dann können Sie die von bereitgestellte Methode aufrufen Modul:
var math = require('math');
math.add(2,3); 5
Von CommonJS definierte Module sind unterteilt in: {Modulreferenz (erforderlich)} {Moduldefinition (Exporte)} {Modulidentifikation (Modul)}
require() wird zum Einführen externer Module verwendet. Das Exportobjekt wird zum Exportieren der Methoden oder Variablen des aktuellen Moduls verwendet. Der einzige Exportport repräsentiert das Modul selbst.
Obwohl Node den Spezifikationen von CommonJS folgt, wurden einige Kompromisse eingegangen und einige neue Dinge hinzugefügt.
Nachdem wir jedoch über CommonJS und auch über Node gesprochen haben, denke ich, dass wir zuerst NPM verstehen müssen. Als Paketmanager von Node soll NPM Node nicht bei der Lösung des Installationsproblems abhängiger Pakete unterstützen. Dann muss es auch der CommonJS-Spezifikation folgen. CommonJS WIKI spricht über seine Geschichte und stellt auch Module, Pakete usw. vor.
Lassen Sie uns über das Prinzip und die einfache Implementierung von commonJS sprechen:
Prinzip
Durchsuchen Der Hauptgrund, warum der Server nicht mit CommonJS kompatibel ist, ist das Fehlen von vier Node.js-Umgebungsvariablen.
Modul
Exporte
erforderlich
global
Solange diese vier Variablen bereitgestellt werden, kann der Browser das CommonJS-Modul laden.
Hier ist ein einfaches Beispiel.
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br><span class="token keyword">var module <span class="token operator">= <span class="token punctuation">{<br> exports<span class="token punctuation">: <span class="token punctuation">{<span class="token punctuation">}<br><span class="token punctuation">}<span class="token punctuation">;<br><br><span class="token punctuation">(<span class="token keyword">function<span class="token punctuation">(module<span class="token punctuation">, exports<span class="token punctuation">) <span class="token punctuation">{<br> exports<span class="token punctuation">.multiply <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(n<span class="token punctuation">) <span class="token punctuation">{ <span class="token keyword">return n <span class="token operator">* <span class="token number">1000 <span class="token punctuation">}<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">(module<span class="token punctuation">, module<span class="token punctuation">.exports<span class="token punctuation">)<span class="token punctuation">)<br><br><span class="token keyword">var f <span class="token operator">= module<span class="token punctuation">.exports<span class="token punctuation">.multiply<span class="token punctuation">;<br><span class="token function">f<span class="token punctuation">(<span class="token number">5<span class="token punctuation">)<span class="token comment"> // 5000 <br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>Nach dem Login kopieren
Der obige Code stellt zwei externe Variablen, module und exports, für eine Funktion zur sofortigen Ausführung bereit. Das Modul wird innerhalb dieser Funktion platziert Ausführungsfunktion. Der Ausgabewert des Moduls wird in module.exports abgelegt, wodurch das Laden des Moduls realisiert wird.
2. Implementierung von Browserify
Wenn Sie das Prinzip kennen, können Sie es schaffen Werkzeuge . Browserify ist derzeit das am häufigsten verwendete Tool zur Konvertierung des CommonJS-Formats.
Sehen Sie sich ein Beispiel an, in dem das Modul main.js das Modul foo.js lädt.
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><span class="token comment"><br>// foo.js<br>module<span class="token punctuation">.exports <span class="token operator">= <span class="token keyword">function<span class="token punctuation">(x<span class="token punctuation">) <span class="token punctuation">{<br> console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(x<span class="token punctuation">)<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">;<br><span class="token comment"><br>// main.js<br><span class="token keyword">var foo <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">"./foo"<span class="token punctuation">)<span class="token punctuation">;<br><span class="token function">foo<span class="token punctuation">(<span class="token string">"Hi"<span class="token punctuation">)<span class="token punctuation">;<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>Nach dem Login kopieren
Verwenden Sie den folgenden Befehl, um main.js in ein vom Browser verwendbares Format zu konvertieren.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ browserify main<span class="token punctuation">.js <span class="token operator">> compiled<span class="token punctuation">.js<br/></span></span></span></code></span>
Nach dem Login kopieren
Was genau macht Browserify? Installieren Sie browser-unpack und Sie können klar sehen.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ npm install browser<span class="token operator">-unpack <span class="token operator">-g<br/></span></span></code></span>
Nach dem Login kopieren
Entpacken Sie dann die zuvor generierte Datei „compile.js“.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ browser<span class="token operator">-unpack <span class="token operator">< compiled<span class="token punctuation">.js<br/><br/><span class="token punctuation">[<br/><span class="token punctuation">{<br/><span class="token string">"id"<span class="token punctuation">:<span class="token number">1<span class="token punctuation">,<br/><span class="token string">"source"<span class="token punctuation">:<span class="token string">"module.exports = function(x) {\n console.log(x);\n};"<span class="token punctuation">,<br/><span class="token string">"deps"<span class="token punctuation">:<span class="token punctuation">{<span class="token punctuation">}<br/><span class="token punctuation">}<span class="token punctuation">,<br/><span class="token punctuation">{<br/><span class="token string">"id"<span class="token punctuation">:<span class="token number">2<span class="token punctuation">,<br/><span class="token string">"source"<span class="token punctuation">:<span class="token string">"var foo = require(\"./foo\");\nfoo(\"Hi\");"<span class="token punctuation">,<br/><span class="token string">"deps"<span class="token punctuation">:<span class="token punctuation">{<span class="token string">"./foo"<span class="token punctuation">:<span class="token number">1<span class="token punctuation">}<span class="token punctuation">,<br/><span class="token string">"entry"<span class="token punctuation">:<span class="token boolean">true<br/><span class="token punctuation">}<br/><span class="token punctuation">]<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>Nach dem Login kopieren
Wie Sie sehen können, fügt browerify alle Module in ein Array ein, das id-Attribut ist die Nummer des Moduls und die Das Quellattribut ist der Quellcode des Moduls, das Deps-Attribut ist die Abhängigkeit des Moduls.
Da foo.js in main.js geladen wird, gibt das deps-Attribut ./foo entsprechend Modul Nr. 1 an. Wenn der Browser während der Ausführung auf die Anweisung require('./foo') stößt, führt er automatisch das Quellattribut von Modul Nr. 1 aus und gibt den ausgeführten Attributwert module.exports aus.
3. Tiny Browser erforderlich
Obwohl Browserify sehr leistungsfähig ist, kann es nicht im Browser bedient werden, was manchmal sehr umständlich ist.
Ich habe einen reinen Browser-CommonJS-Modullader tiny-browser-require basierend auf der internen Implementierung von Mocha erstellt. Es ist überhaupt keine Befehlszeile erforderlich. Geben Sie sie einfach direkt in den Browser ein. Der gesamte Code umfasst nur mehr als 30 Zeilen.
Die Logik ist sehr einfach: Das Modul wird in ein Array eingelesen, und der Ladepfad ist die ID des Moduls.
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br/><span class="token keyword">function <span class="token function">require<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">{<br/><span class="token keyword">var path <span class="token operator">= require<span class="token punctuation">.<span class="token function">resolve<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token keyword">var mod <span class="token operator">= require<span class="token punctuation">.modules<span class="token punctuation">[path<span class="token punctuation">]<span class="token punctuation">;<br/><span class="token keyword">if <span class="token punctuation">(<span class="token operator">!mod<span class="token punctuation">) <span class="token keyword">throw <span class="token keyword">new <span class="token class-name">Error<span class="token punctuation">(<span class="token string">'failed to require "' <span class="token operator">+ p <span class="token operator">+ <span class="token string">'"'<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token keyword">if <span class="token punctuation">(<span class="token operator">!mod<span class="token punctuation">.exports<span class="token punctuation">) <span class="token punctuation">{<br/> mod<span class="token punctuation">.exports <span class="token operator">= <span class="token punctuation">{<span class="token punctuation">}<span class="token punctuation">;<br/> mod<span class="token punctuation">.<span class="token function">call<span class="token punctuation">(mod<span class="token punctuation">.exports<span class="token punctuation">, mod<span class="token punctuation">, mod<span class="token punctuation">.exports<span class="token punctuation">, require<span class="token punctuation">.<span class="token function">relative<span class="token punctuation">(path<span class="token punctuation">)<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token punctuation">}<br/><span class="token keyword">return mod<span class="token punctuation">.exports<span class="token punctuation">;<br/><span class="token punctuation">}<br/><br/>require<span class="token punctuation">.modules <span class="token operator">= <span class="token punctuation">{<span class="token punctuation">}<span class="token punctuation">;<br/><br/>require<span class="token punctuation">.resolve <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(path<span class="token punctuation">)<span class="token punctuation">{<br/><span class="token keyword">var orig <span class="token operator">= path<span class="token punctuation">;<br/><span class="token keyword">var reg <span class="token operator">= path <span class="token operator">+ <span class="token string">'.js'<span class="token punctuation">;<br/><span class="token keyword">var index <span class="token operator">= path <span class="token operator">+ <span class="token string">'/index.js'<span class="token punctuation">;<br/><span class="token keyword">return require<span class="token punctuation">.modules<span class="token punctuation">[reg<span class="token punctuation">] <span class="token operator">&& reg<br/><span class="token operator">|| require<span class="token punctuation">.modules<span class="token punctuation">[index<span class="token punctuation">] <span class="token operator">&& index<br/><span class="token operator">|| orig<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">;<br/><br/>require<span class="token punctuation">.register <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(path<span class="token punctuation">, fn<span class="token punctuation">)<span class="token punctuation">{<br/> require<span class="token punctuation">.modules<span class="token punctuation">[path<span class="token punctuation">] <span class="token operator">= fn<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">;<br/><br/>require<span class="token punctuation">.relative <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(parent<span class="token punctuation">) <span class="token punctuation">{<br/><span class="token keyword">return <span class="token keyword">function<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">{<br/><span class="token keyword">if <span class="token punctuation">(<span class="token string">'.' <span class="token operator">!<span class="token operator">= p<span class="token punctuation">.<span class="token function">charAt<span class="token punctuation">(<span class="token number">0<span class="token punctuation">)<span class="token punctuation">) <span class="token keyword">return <span class="token function">require<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token keyword">var path <span class="token operator">= parent<span class="token punctuation">.<span class="token function">split<span class="token punctuation">(<span class="token string">'/'<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token keyword">var segs <span class="token operator">= p<span class="token punctuation">.<span class="token function">split<span class="token punctuation">(<span class="token string">'/'<span class="token punctuation">)<span class="token punctuation">;<br/> path<span class="token punctuation">.<span class="token function">pop<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<br/><br/><span class="token keyword">for <span class="token punctuation">(<span class="token keyword">var i <span class="token operator">= <span class="token number">0<span class="token punctuation">; i <span class="token operator">< segs<span class="token punctuation">.length<span class="token punctuation">; i<span class="token operator">++<span class="token punctuation">) <span class="token punctuation">{<br/><span class="token keyword">var seg <span class="token operator">= segs<span class="token punctuation">[i<span class="token punctuation">]<span class="token punctuation">;<br/><span class="token keyword">if <span class="token punctuation">(<span class="token string">'..' <span class="token operator">== seg<span class="token punctuation">) path<span class="token punctuation">.<span class="token function">pop<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token keyword">else <span class="token keyword">if <span class="token punctuation">(<span class="token string">'.' <span class="token operator">!<span class="token operator">= seg<span class="token punctuation">) path<span class="token punctuation">.<span class="token function">push<span class="token punctuation">(seg<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token punctuation">}<br/><br/><span class="token keyword">return <span class="token function">require<span class="token punctuation">(path<span class="token punctuation">.<span class="token function">join<span class="token punctuation">(<span class="token string">'/'<span class="token punctuation">)<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>Nach dem Login kopieren
使用的时候，先将上面的代码放入页面。然后，将模块放在如下的立即执行函数里面，就可以调用了。
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-html"><br/><script src="require.js" /><br/><br/><script><br/>require.register("moduleId", function(module, exports, require){<br/> // Module code goes here<br/>});<br/>var result = require("moduleId");<br/></script><br/></code></span>Nach dem Login kopieren
还是以前面的 main.js 加载 foo.js 为例。
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br/>require<span class="token punctuation">.<span class="token function">register<span class="token punctuation">(<span class="token string">"./foo.js"<span class="token punctuation">, <span class="token keyword">function<span class="token punctuation">(module<span class="token punctuation">, exports<span class="token punctuation">, require<span class="token punctuation">)<span class="token punctuation">{<br/> module<span class="token punctuation">.exports <span class="token operator">= <span class="token keyword">function<span class="token punctuation">(x<span class="token punctuation">) <span class="token punctuation">{<br/> console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(x<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">;<br/><span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;<br/><br/><span class="token keyword">var foo <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">"./foo.js"<span class="token punctuation">)<span class="token punctuation">;<br/><span class="token function">foo<span class="token punctuation">(<span class="token string">"Hi"<span class="token punctuation">)<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>Nach dem Login kopieren
注意，这个库只模拟了 require 、module 、exports 三个变量，如果模块还用到了 global 或者其他 Node 专有变量（比如 process），就通过立即执行函数提供即可。
二、AMD
基于commonJS规范的nodeJS出来以后，服务端的模块概念已经形成，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上面的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require(['math'], function (math) {
math.add(2, 3);
});
math.add() und das Laden des Mathematikmoduls sind nicht synchronisiert und der Browser friert nicht ein. Daher ist AMD offensichtlich besser für die Browserumgebung geeignet. Derzeit gibt es zwei Haupt-Javascript-Bibliotheken, die die AMD-Spezifikation implementieren: require.js und curl.js.
RequireJS implementiert die AMD-Spezifikation.
Detaillierte Zusammenfassung: Im Folgenden wird RequireJS als Beispiel zur Veranschaulichung der AMD-Spezifikation verwendet
1. Warum require .js verwenden?
In den Anfängen wurden alle Javascript-Codes in einer Datei geschrieben, und es reichte aus, diese eine Datei zu laden. Später gab es immer mehr Codes und eine Datei reichte nicht mehr aus. Sie musste in mehrere Dateien aufgeteilt und nacheinander geladen werden. Ich glaube, viele Leute haben den folgenden Webseitencode
< gesehen 🎜>
Dieser Code lädt mehrere JS-Dateien nacheinander.
Diese Schreibweise hat große Nachteile. Erstens stoppt der Browser beim Laden das Rendern der Webseite Wie im obigen Beispiel sollte 1.js vor 2.js stehen und das Modul mit der größten Abhängigkeit muss zuletzt geladen werden. Wenn die Abhängigkeiten komplex sind, wird das Schreiben und Warten von Code schwierig.
require.js wurde geboren, um diese beiden Probleme zu lösen:
(1) Implementieren Sie das asynchrone Laden von JS-Dateien, um zu vermeiden, dass Webseiten die Reaktion verlieren.
(2) Die Verwaltung zwischen Modulabhängigkeiten erleichtert das Schreiben von Code und Wartung.
2. Laden von require.js
Verwenden Sie require.js Der erste Schritt besteht darin, auf die offizielle Website zu gehen, um die neueste Version herunterzuladen.
Nach dem Herunterladen wird davon ausgegangen, dass Sie es im Unterverzeichnis js abgelegt haben und es geladen werden kann.
Manche Leute denken vielleicht, dass das Laden dieser Datei auch dazu führen kann, dass die Webseite nicht mehr reagiert. Es gibt zwei Lösungen: Eine besteht darin, es unten auf der Webseite zu laden, die andere darin, es wie folgt zu schreiben:
< script src=" js/require.js" defer async="true" >
Das async-Attribut gibt an, dass diese Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite nicht mehr reagiert. Der IE unterstützt dieses Attribut nicht und unterstützt nur die Verzögerung, sodass auch die Verzögerung geschrieben wird.
Nach dem Laden von require.js besteht der nächste Schritt darin, unseren eigenen Code zu laden. Angenommen, unsere eigene Codedatei ist main.js und befindet sich ebenfalls im js-Verzeichnis. Dann schreiben Sie es einfach wie folgt:
