suchen

Heim >Web-Frontend >js-Tutorial >requireJS-Nutzungsanleitung_others

requireJS-Nutzungsanleitung_others

WBOY
WBOYOriginal
2016-05-16 15:03:361308Durchsuche

Die meisten Projekte nutzen die modulare Entwicklung. requireJS ist ein Modell der AMD-Modulentwicklung, daher ist es notwendig, es zu erlernen. Indem Sie requireJS verwenden, um Schritt für Schritt Demos zu schreiben, können Sie den gesamten Entwicklungsprozess von requireJS und einige Ihrer eigenen Gefühle zur Verwendung von requireJS kennenlernen.

AMD: Ein modulbasierter Mechanismus zum asynchronen Laden von JavaScript-Code. Die Abhängigkeit von globalen Objekten wird zu einer Abhängigkeit von anderen Modulen. Lösen Sie individuelle Modulabhängigkeiten durch verzögertes und bedarfsgesteuertes Laden. Die Vorteile von modularisiertem JavaScript-Code liegen auf der Hand. Die lose Kopplung der einzelnen Funktionskomponenten kann die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich verbessern. Durch dieses nicht blockierende, gleichzeitige und schnelle Laden von JavaScript-Code können andere UI-Elemente auf der Webseite, die nicht auf JavaScript-Code angewiesen sind, wie Bilder, CSS und andere DOM-Knoten, zuerst geladen werden bessere Ergebnisse. Gute Erfahrung.

1. RequireJS herunterladen

Vor der modularen Entwicklung mit requireJS müssen wir einige Dinge vorbereiten. Dann müssen Sie die Datei require.js herunterladen, hahaha, weil sie darauf basiert.

2. Erstellen Sie eine HTML-Datei

Nachdem Sie eine HTML-Datei erstellt haben, müssen Sie beim Importieren von requireJS den Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a verwenden. Dann gibt es in diesem Tag ein Datenhauptattribut, das als Ein- und Ausgang fungiert, dh nach dem Laden von requireJS wird über das Datenhauptattribut eingegeben.

Zum Beispiel: 

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

Wenn ich js/require.js lade, dann führe ich die js-Datei von js/main aus. main ist ebenfalls eine js-Datei. Wir können das Suffix .js weglassen und requireJS wird es hinzufügen.

3. Daten-Hauptdaten

Wenn das Programm e4e68973213230bde45ab37f3eb5d0cc2cacc6d41bbb37262a98f745aa00fbf0 ausführt, geben Sie main.js über data-main ein und führen Sie main.js aus. Was ist also in main.js?

Bitte beachten Sie den Code: 

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

Aus dem obigen Code können Sie ersehen, dass main.js zwei Module enthält: require.config und require.

Die Funktion von require.config besteht darin, einige Parameter von requireJS zu konfigurieren und sie dann öffentlich zu referenzieren.

Beispielsweise besteht die Funktion der oben genannten baseUrl darin, sie als Basispfad zu verwenden und unter diesem Pfad nach Dateien zu suchen. Ich habe alle .js-Dateien im js-Ordner abgelegt. Daher werden zukünftige Dateien nach der Konfiguration dieses Attributs nach Inhalten unter dem js-Pfad suchen.

Wie folgt: 

require(['monkey'], function(monkey){
  monkey.init();
});

Wenn es sich um einen Affen handelt, bezieht es sich auf einen Affen, nicht auf js/monkey.

Welche Rolle spielen Pfade? Ersetzen Sie einfach einige häufig verwendete js-Dateien durch gebräuchliche Namen. Zum Beispiel jquery-1.8.2.min.js, wir können dies nicht jedes Mal schreiben, wenn wir es aufrufen. Der Einfachheit halber werden wir jquery-1.8.2.min.js durch jquery ersetzen. Von nun an können Sie es verwenden jquery direkt, was schnell und bequem ist.

Okay, require.config kommt mir bekannt vor. Kurz gesagt, seine Funktion besteht darin, requireJS zu konfigurieren.

Was ist mit „require“?

Die Funktion von require ist die Ausführung. Hier benötige ich zum Beispiel nur Monkey.js zum Ausführen, also habe ich Monkey importiert und dann den Parameter mk verwendet, um den Rückgabewert nach der Ausführung von Monkey zu erhalten. Wenn es einen Rückgabewert gibt, können wir mk entsprechend behandeln.

Hey, was ist in dem Affen?

Mal sehen: 

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

definieren! Seine Funktion besteht darin, ein JS-Modul zu definieren, das von anderen Modulen verwendet oder benötigt wird. Die Methode zum Verweisen auf andere js-Module ähnelt der Anforderung. Dabei werden die erforderlichen js-Dateien importiert, und die Parameter entsprechen dann eins zu eins. Was jeder beachten muss, ist, dass andere Module nicht auf die in define definierten Methoden oder Variablen zugreifen können. Wenn Sie möchten, dass andere Module Zugriff haben, werfen Sie einfach das entsprechende Objekt oder die Funktion zurück. Hier gebe ich ein Objekt zurück, das Init für den Aufruf anderer Module bereitstellt.

Stellungnahme：
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
Vorheriger Artikel：Die JS-Komponente Bootstrap implementiert Code_Javascript-Fähigkeiten mit Popup-Box-EffektNächster Artikel：Die JS-Komponente Bootstrap implementiert Code_Javascript-Fähigkeiten mit Popup-Box-Effekt

In Verbindung stehende Artikel

Mehr sehen