Heim > Web-Frontend > js-Tutorial > Hauptteil

So lesen Sie modulare JavaScript-Dateien mit require

不言
Freigeben: 2019-01-14 14:37:28
Original
4328 Leute haben es durchsucht

require wird normalerweise zum Lesen modularer JavaScript-Dateien verwendet. In diesem Artikel stellen wir Ihnen vor, wie Sie require zum Lesen modularer JavaScript-Dateien verwenden.

So lesen Sie modulare JavaScript-Dateien mit require

Normalerweise verwenden wir beim Lesen von JavaScript-Programmen Skript-Tags, um HTML zu beschreiben, aber wenn JavaScript separat auf der Serverseite ausgeführt wird, wie z. B. Node.js, dann kann das Script-Tag nicht verwendet werden. Daher kann daraus eine modulare JavaScript-Datei gelesen und ausgeführt werden.

Werfen wir zunächst einen Blick auf die grundlegende Verwendung von require

Require in Node.js ist eine Methode, die auf der JavaScript-Seite für von gelesene Module verwendet werden kann npm.

var 变量 = require( 模块名称 );
Nach dem Login kopieren

Im obigen Code geben wir lediglich den Namen des zu ladenden Moduls als Anforderungsparameter an.

Da das geladene Modul in der angegebenen Variablen gespeichert wird, ähnelt es dem Erstellen einer generischen JavaScript-Instanz.

Dadurch können Sie Module (Bibliotheken) allein mit JavaScript lesen und verwenden, ohne Skript-Tags zu verwenden.

Mal sehenWie lädt man das Modul?

Sehen Sie sich das Beispiel unten an

var gulp = require('gulp');
gulp.task('clean', function() {
    //在此描述gulp的处理
});
Nach dem Login kopieren

In diesem Beispiel können Sie sehen, dass gulp als zu lesender Modulname im Parameter require angegeben ist.

Damit können Sie gulp auf der JavaScript-Seite verwenden und dann den Aufgabenprozess schreiben, den Sie automatisieren möchten.

Wie verwende ich RequireJS?

Verwende RequireJS zum Lesen von JavaScript-Dateien

So verwende ich Require in Front-End-Browsern

Da JavaScript-Dateien aufgeteilt werden und die Anzahl zunimmt, wird es schwierig, sie nur mithilfe von Skript-Tags zu verwalten.

Das Frontend (Browser) bietet jedoch nicht die Möglichkeit, erforderliche Dateien wie Node.js zu verwenden.

Daher kann eine Bibliothek namens RequireJS verwendet werden.

Dadurch können wir Dateien über das Front-End laden.

Da die Syntax (Schreibweise) jedoch etwas anders ist, prüfen Sie bitte die folgenden Beispiele sorgfältig!

require(加载的文件名,函数处理)
Nach dem Login kopieren

Der einzige Unterschied besteht darin, dass die zu lesende JavaScript-Datei im ersten Parameter von require angegeben wird. Sie kann als Array angegeben werden, sodass sogar das Lesen mehrerer Dateien unterstützt wird.

Danach schreiben wir JavaScript-Code basierend auf der Datei, die in der Funktionsverarbeitung des zweiten Parameters gelesen wird.

So laden Sie eine JS-Datei mit RequireJS

Zum Laden mit RequireJS ist es notwendig, den Code der ursprünglichen JavaScript-Datei in define() zu beschreiben.

Erstellen Sie beispielsweise eine Datei mit dem Namen „sample.js“ und schreiben Sie sie wie folgt.

define(function() {
    return function(num) {
 
        return num * num;
 
    };
});
Nach dem Login kopieren

Dies ist eine einfache Funktion, die jede Zahl quadrieren kann.

Dies geschieht, indem dieser Vorgang in define() beschrieben und mit „return“ zurückgegeben wird.

Als nächstes verwenden Sie require, um sample.js wie folgt zu lesen.

require(['sample'], function(num) {
 
  var result = num(10);
  
  console.log(result);
 
});
Nach dem Login kopieren

Das Ausführungsergebnis

100
Nach dem Login kopieren

kann angezeigt werden, indem „sample“ als Dateiname als erster Parameter von require festgelegt und „square“ in der Funktion zurückgegeben wird.

Die in „sample.js“ definierte Funktion kann durch Schreiben von num(10) verwendet werden.

Wenn Sie sich die Ausführungsergebnisse ansehen, können Sie sehen, dass der Quadratwert erhalten wurde!

Das obige ist der detaillierte Inhalt vonSo lesen Sie modulare JavaScript-Dateien mit require. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!