Web-Frontend
js-Tutorial
Detaillierte Erläuterung der Modulspezifikationen in JS (CommonJS, AMD, CMD)
Detaillierte Erläuterung der Modulspezifikationen in JS (CommonJS, AMD, CMD)
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.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="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>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.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="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>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="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="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="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.
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="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>Nach dem Login kopieren
使用的时候，先将上面的代码放入页面。然后，将模块放在如下的立即执行函数里面，就可以调用了。
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="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 为例。
<span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="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>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:
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O. Beste grafische Einstellungen4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌Assassin's Creed Shadows: Seashell Riddle -Lösung2 Wochen vor By DDDR.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌WWE 2K25: Wie man alles in Myrise freischaltet1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
CakePHP-Tutorial1378
52
Hongmeng native Anwendung zufälliger Poesie
Feb 19, 2024 pm 01:36 PM
Um mehr über Open Source zu erfahren, besuchen Sie bitte: 51CTO Hongmeng Developer Community https://ost.51cto.com Laufumgebung DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Um eine Anwendung zu erstellen, klicken Sie auf Datei- >newFile->CreateProgect. Vorlage auswählen: [OpenHarmony] EmptyAbility: Geben Sie den Projektnamen, shici, den Namen des Anwendungspakets com.nut.shici und den Speicherort der Anwendung XXX ein (kein Chinesisch, Sonderzeichen oder Leerzeichen). CompileSDK10, Modell: Stage. Gerät
So optimieren Sie die Wartbarkeit von Java-Code: Erfahrungen und Ratschläge
Nov 22, 2023 pm 05:18 PM
So optimieren Sie die Wartbarkeit von Java-Code: Erfahrungen und Ratschläge Im Softwareentwicklungsprozess ist das Schreiben von Code mit guter Wartbarkeit von entscheidender Bedeutung. Wartbarkeit bedeutet, dass Code leicht verstanden, geändert und erweitert werden kann, ohne dass es zu unerwarteten Problemen oder zusätzlichem Aufwand kommt. Für Java-Entwickler ist die Optimierung der Wartbarkeit von Code ein wichtiges Thema. In diesem Artikel werden einige Erfahrungen und Vorschläge geteilt, um Java-Entwicklern dabei zu helfen, die Wartbarkeit ihres Codes zu verbessern. Befolgen Sie standardisierte Benennungsregeln. Standardmäßige Benennungsregeln können die Lesbarkeit des Codes verbessern.
Wie kann der Codekomplexitätsfehler im Python-Code behoben werden?
Jun 24, 2023 pm 05:43 PM
Python ist eine einfache, leicht zu erlernende und effiziente Programmiersprache. Wenn wir jedoch Python-Code schreiben, können Probleme mit übermäßiger Codekomplexität auftreten. Wenn diese Probleme nicht gelöst werden, wird es schwierig, den Code zu warten, fehleranfällig zu machen und die Lesbarkeit und Skalierbarkeit des Codes zu verringern. In diesem Artikel besprechen wir daher, wie man Codekomplexitätsfehler in Python-Code beheben kann. Verständnis der Codekomplexität Die Codekomplexität ist ein Maß für die Art des Codes, der schwer zu verstehen und zu warten ist. In Python gibt es einige Indikatoren, die verwendet werden können
Wie kann der Fehler der schlechten Wartbarkeit von Python-Code behoben werden?
Jun 25, 2023 am 11:58 AM
Python wird als höhere Programmiersprache häufig in der Softwareentwicklung verwendet. Obwohl Python viele Vorteile bietet, besteht ein Problem, mit dem viele Python-Programmierer häufig konfrontiert sind, darin, dass der Code weniger wartbar ist. Die Wartbarkeit von Python-Code umfasst die Lesbarkeit, Skalierbarkeit und Wiederverwendbarkeit des Codes. In diesem Artikel konzentrieren wir uns darauf, wie das Problem der schlechten Wartbarkeit von Python-Code gelöst werden kann. 1. Lesbarkeit des Codes Die Lesbarkeit des Codes bezieht sich auf die Lesbarkeit des Codes, die den Kern der Wartbarkeit des Codes darstellt.
Was ist der Unterschied zwischen comcn und com
May 12, 2023 pm 04:08 PM
Der Unterschied zwischen comcn und com: 1. Es gibt Unterschiede in der Bedeutung zwischen comcn und com, aber keinen Unterschied in der Zugriffsgeschwindigkeit. 2. comcn ist ein internationaler Domainname und ein globaler Top-Level-Domainname zur Verwendung durch kommerzielle Institutionen , während cn ein chinesischer Unternehmensdomänenname ist, können sich nur inländische kommerzielle Institutionen registrieren. 3. Die Suchpriorität besteht darin, dass cn zuerst nach dem .cn-Server sucht Suchen Sie dann nach .com. 4. cn wird von cnnic China Internet Center Management bereitgestellt, die Verwaltungsorganisation von com befindet sich im Ausland.
Leitfaden zur Implementierung der modularen Entwicklung in Vue-Großprojekten
Jun 09, 2023 pm 04:07 PM
In der modernen Webentwicklung wird Vue als flexibles, benutzerfreundliches und leistungsstarkes Frontend-Framework häufig bei der Entwicklung verschiedener Websites und Anwendungen eingesetzt. Bei der Entwicklung großer Projekte ist die Vereinfachung der Codekomplexität und die einfachere Wartung des Projekts ein Problem, mit dem sich jeder Entwickler auseinandersetzen muss. Die modulare Entwicklung kann uns helfen, Code besser zu organisieren, die Entwicklungseffizienz und die Lesbarkeit des Codes zu verbessern. Im Folgenden werde ich einige Erfahrungen und Richtlinien für die Implementierung der modularen Entwicklung in Vue-Großprojekten teilen: 1. Klare Arbeitsteilung in einem Großprojekt
Was ist Modularität in Vue?
Dec 23, 2022 pm 06:06 PM
In Vue besteht die Modularisierung darin, eine einzelne Funktion in einem Modul (einer Datei) zu kapseln. Die Module sind voneinander isoliert, interne Mitglieder können jedoch über bestimmte Schnittstellen verfügbar gemacht werden und können sich auch auf andere Module verlassen (um die Wiederverwendung von Code zu erleichtern). Verbessern Sie die Entwicklungseffizienz und erleichtern Sie die spätere Wartung. Die Vorteile der modularen Entwicklung: 1. Klare Organisation und einfache Wartung. 2. Alle Daten werden nicht auf einmal angefordert. Die Benutzererfahrung ist gut. 3. Module sind voneinander isoliert, aber interne Mitglieder können durch spezifische Informationen verfügbar gemacht werden Schnittstellen oder Hängt von anderen Modulen ab.
So verwenden Sie die Go-Sprache für die Praxis der Code-Modularisierung
Aug 03, 2023 am 10:31 AM
So verwenden Sie die Go-Sprache für die Praxis der Code-Modularisierung: In der Softwareentwicklung ist die Code-Modularisierung eine gängige Entwicklungsmethode. Durch die Aufteilung des Codes in wiederverwendbare Module können die Wartbarkeit, Testbarkeit und Wiederverwendbarkeit des Codes verbessert werden. In diesem Artikel wird die Verwendung der Go-Sprache zum Üben der Codemodularisierung vorgestellt und entsprechende Codebeispiele bereitgestellt. 1. Die Vorteile der Modularisierung verbessern die Wartbarkeit des Codes: Durch die Modularisierung wird der Code in unabhängige Funktionsmodule unterteilt, und jedes Modul ist für bestimmte Aufgaben verantwortlich, wodurch der Code klarer und einfacher zu ändern ist. Der Code kann verbessert werden
