RequireJS modulare Entwicklung

Der in diesem Artikel vorgestellte Inhalt ist die modulare Entwicklung von RequireJS. Jetzt teile ich ihn mit allen. Freunde in Not können sich darauf beziehen.

Es gibt viele Möglichkeiten, die Entwicklung zu modularisieren, z. B. AMD, CMD,

Um require für die Modularisierung zu verwenden, importieren Sie einfach ein js.

Der erste Schritt zur Verwendung von require.js besteht darin, die neueste Version von der offiziellen Website herunterzuladen.

Nach dem Herunterladen wird davon ausgegangen, dass es im Unterverzeichnis js abgelegt wird und geladen werden kann.

　<script src="js/require.js"></script>

Einige Leute denken möglicherweise, dass das Laden dieser Datei auch dazu führen kann, dass die Webseite nicht mehr reagiert. Es gibt zwei Lösungen. Eine besteht darin, sie unten auf der Webseite zu laden, und die andere besteht darin, sie wie folgt zu schreiben:

　<script src="js/require.js" defer async="true" ></script>

Das async-Attribut gibt an, dass diese Datei asynchron geladen werden muss Vermeiden Sie, 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:

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

Das data-main-Attribut wird verwendet, um das Hauptmodul des Webseitenprogramms anzugeben. Im obigen Beispiel befindet sich main.js im js-Verzeichnis. Diese Datei wird zuerst von require.js geladen. Da die Standarddateierweiterung von require.js js ist, kann main.js mit main abgekürzt werden.

Modularisierung:

define(["aa"], function(){//["aa"] ist das JS, auf das Sie sich verlassen möchten. Wenn es mehrere gibt, trennen Sie sie durch Kommas. Wenn nicht, schreiben Sie es nicht

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

Wenn es ein heruntergeladenes Plug-in im Array gibt, modularisieren Sie das Plug-in und Fügen Sie define(function() hinzu. {})

Es gibt viele Möglichkeiten der modularen Entwicklung, wie AMD, CMD,

Verwenden Sie require für die Modularisierung, importieren Sie einfach ein js,

Verwenden Sie require. Der erste Schritt für js besteht darin, die neueste Version von der offiziellen Website herunterzuladen

Wenn Sie sie nach dem Herunterladen in das Unterverzeichnis js legen, werden Sie denken, dass sie geladen wird Diese Datei kann auch dazu führen, dass die Webseite nicht mehr reagiert. Die eine besteht darin, sie am Ende der Webseite zu laden, und die andere darin, sie wie folgt zu schreiben:

　<script src="js/require.js"></script>

Die Das async-Attribut weist darauf hin, dass die Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite nicht mehr reagiert. Daher besteht der nächste Schritt darin, unseren eigenen Code zu laden Die eigene Codedatei ist main.js und wird ebenfalls im js-Verzeichnis abgelegt. Dann müssen wir sie nur wie folgt schreiben:

　<script src="js/require.js" defer async="true" ></script>

Die Funktion des data-main-Attributs besteht darin, die Hauptseite anzugeben des Webprogramms. Im obigen Beispiel ist es main.js im js-Verzeichnis. Diese Datei wird zuerst von require.js geladen abgekürzt als main.

Modularisierung:

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

define(["aa"], function(){//["aa"] ist das js, auf das Sie sich verlassen möchten. Wenn es mehrere gibt , trennen Sie sie durch Kommas. Wenn nicht, schreiben Sie es nicht

main.js

Wenn das Array ein heruntergeladenes Plug-in enthält, modularisieren Sie es Plug-in und fügen Sie define(function() hinzu. {})

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

Verwandte Empfehlungen:

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

JS modularization-RequireJS

requireJS implementiert eine einfache Modul-Loader-Beispielfreigabe

RequireJs Quellcode-Analyse führt in das Funktionsprinzip des Skriptladens ein

Das obige ist der detaillierte Inhalt vonRequireJS modulare Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!