JS-Modularisierungstool RequireJS-Tutorial (2): Grundlagen

Zurück:JS-Modularisierungstool RequireJS-Tutorial (1): Erster Blick auf RequireJSWir haben RequireJS auf sehr einfache Weise eingeführt. Dieser Artikel behandelt einige Grundlagen von RequireJS, einschließlich API-Nutzung usw.

Grundlegende API

require definiert drei Variablen: define, require, requirejs. Dabei gilt require === requirejs, und es ist im Allgemeinen kürzer, require zu verwenden.

define: Wie der Name schon sagt, wird diese API verwendet, um ein Modul zu definieren.
require: Lädt abhängige Module und führt nach dem Laden die Callback-Funktion aus.

a.js aus dem vorherigen Artikel:

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

Ein Modul wird über die define-Funktion definiert und dann auf der Seite verwendet:

require(["js/a"]);

um das Modul zu laden (Beachten Sie, dass die Abhängigkeiten in require ein Array sind. Selbst wenn es nur eine Abhängigkeit gibt, müssen Sie sie mit einem Array definieren.), ist der zweite Parameter der require-API callback, eine Funktion, die verwendet wird, um die Logik nach dem Laden zu verarbeiten, wie z. B.:

require(["js/a"],function(){
    alert("load finished");
})

Dateien laden

In den vorherigen Beispielen waren die geladenen Module alle lokale JS-Dateien. In den meisten Fällen kann das JS, das eine Webseite laden muss, jedoch von einem lokalen Server, anderen Websites oder einem CDN stammen, sodass es nicht auf diese Weise geladen werden kann. Nehmen wir das Laden einer jQuery-Bibliothek als Beispiel:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Dies beinhaltetrequire.config，require.configwird verwendet, um den Ladeort für Module zu konfigurieren. Einfach ausgedrückt, verleiht es einem Modul einen kürzeren und leichter zu merkenden Namen. Zum Beispiel markieren Sie die jQuery-Bibliotheksadresse von Baidu alsjquery, sodass Sie beim Aufruf von require nur["jquery"]schreiben müssen, um dieses JS zu laden. Lokale JS-Dateien können wir auf die gleiche Weise konfigurieren:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Das Konfigurieren von paths macht unsere Modulnamen prägnanter. paths hat außerdem eine wichtige Funktion: Sie können mehrere paths konfigurieren. Wenn die Remote-CDN-Bibliothek nicht geladen werden kann, kann eine lokale Bibliothek geladen werden, z. B.:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Mit dieser Konfiguration wird jQuery im lokalen js-Verzeichnis geladen, wenn Baidus jQuery nicht geladen werden kann.

Bei der Verwendung von RequireJS musst du nicht.jsals Suffix schreiben. Natürlich darfst du das Suffix auch nicht schreiben.
In der Callback-Funktion im obigen Beispiel kannst du den$Parameter sehen. Dies ist diejqueryAusgabevariable des abhängigen Moduls. Wenn du von mehreren Modulen abhängst, kannst du mehrere Parameter in der Reihenfolge angeben, um sie zu verwenden:

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

Wenn ein Modul keinen Variablenwert ausgibt, gibt es keinen entsprechenden Parameter. Versuche daher, zuerst Module zu schreiben, die einen Wert ausgeben, um Verwirrung durch nicht übereinstimmende Positionen zu vermeiden.

Globale Konfiguration

In den obigen Beispielen taucht die Konfiguration wiederholt auf.require.configWenn du die Konfiguration zu jeder Seite hinzufügst, sieht das unweigerlich unschön aus. RequireJS bietet eine Funktion namens "main data". Wir erstellen zuerst eine main.js:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

Verwende dann die folgende Methode auf der Seite, um RequireJS zu verwenden:

<script data-main="js/main" src="js/require.js.html"></script>

Ich erkläre: Das Script-Tag, das das RequireJS-Skript lädt, hat dasdata-mainAttribut hinzugefügt. Das durch dieses Attribut angegebene JS wird verarbeitet, nachdem require.js geladen wurde. Wir fügen dasrequire.configKonfiguration zudata-main, damit jede Seite diese Konfiguration verwenden kann. Dann kann die Seite direkt verwendenrequire, um alle kurzen Modulnamen zu laden.

data-mainEs gibt eine weitere wichtige Funktion: Wenn das script-Tag das data-main-Attribut angibt, verwendet require standardmäßig das von data-main angegebene JS als Stammpfad. Was bedeutet das? Wie im obigendata-main="js/main"nach der Einstellung, wenn wir verwendenrequire(['jquery'])(ohne die Pfade von jQuery zu konfigurieren), lädt require automatisch die Datei js/jquery.js anstelle von jquery.js, was der Standardkonfiguration entspricht:

require.config({
    baseUrl : "js"
})

Drittanbieter-Module

Durchrequiregeladene Module müssen im Allgemeinen der AMD-Spezifikation entsprechen, d. h. verwendendefineum Module zu deklarieren. Manchmal müssen wir jedoch JS laden, das nicht der AMD-Spezifikation folgt. In solchen Fällen benötigen wir eine weitere Funktion: shim. shim ist auch etwas schwer zu erklären. shim wird direkt mit "pad" übersetzt, und es hat tatsächlich diese Bedeutung. Derzeit verwende ich es hauptsächlich an zwei Stellen.
1. Nicht-AMD-Modul-Ausgabe: Verwandeln Sie Nicht-Standard-AMD-Module mit shim in verwendbare Module. Zum Beispiel wurde in älteren Versionen von jQuery die AMD-Spezifikation nicht vererbt, sodass Sie nicht direkt require["jquery"] verwenden können. In diesem Fall wird shim benötigt. Wenn ich beispielsweise die Underscore-Bibliothek verwenden möchte, die AMD-Spezifikation aber nicht implementiert, können wir sie wie folgt konfigurieren:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

Nach dieser Konfiguration können wir das Underscore-Modul in anderen Modulen referenzieren:

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

Nicht-AMD-Module in Plugin-Form: Wir verwenden oft jQuery-Plugins, und diese Plugins entsprechen grundsätzlich nicht der AMD-Spezifikation, wie das jquery.form-Plugin. In diesem Fall müssen wir das Form-Plugin in jQuery shimmen:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

Es kann auch abgekürzt werden als:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

Nach dieser Konfiguration können wir jQuery mit dem geladenen Plugin verwenden.

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

Okay, das ist ungefähr die gesamte Basiskonfiguration für RequireJS. Es gibt einige erweiterte Funktionen, die in späteren Artikeln erwähnt werden.

Artikelquelle: https://github.com/liuxey/blog/issues/2