Einführung in die asynchrone Moduldefinition von AMD und die Verwendung von jQuery und jQuery-Plug-ins in Require.js_jquery

AMD-Modul

Das übergeordnete Ziel des AMD-Formats (Asynchronous Module Definition) besteht darin, aktuellen Entwicklern eine nutzbare modulare JavaScript-Lösung bereitzustellen.

Das AMD-Modulformat selbst ist ein Vorschlag, wie Module so definiert werden, dass sowohl Module als auch Abhängigkeiten asynchron geladen werden können. Es bietet viele einzigartige Vorteile, darunter die grundsätzliche Asynchronität und hohe Flexibilität, wodurch die häufige enge Kopplung zwischen Code und Modulidentität aufgehoben werden kann. Es wurde von vielen Projekten übernommen, darunter jQuery (1.7).

RequireJS

RequireJS ist eine Toolbibliothek, die hauptsächlich für die Client-Modulverwaltung verwendet wird. Es ermöglicht die Aufteilung des Client-Codes in Module für asynchrones oder dynamisches Laden, wodurch die Leistung und Wartbarkeit des Codes verbessert wird. Das Modulmanagement folgt den AMD-Vorgaben.

jQuery-Unterstützung für AMD

jQuery 1.7 unterstützt ab sofort die Registrierung von jQuery als asynchrones AMD-Modul. Es gibt viele kompatible Skriptlader (einschließlich RequireJS und Curl), die Module in einem asynchronen Modulformat laden können, was bedeutet, dass nicht viel Hacking erforderlich ist, um alles zum Laufen zu bringen. Sie können sich den Quellcode in jQuery 1.7 ansehen:

Kopieren Sie den Code Der Code lautet wie folgt:

// Stellen Sie jQuery als AMD-Modul bereit, aber nur für AMD-Loader, die
// die Probleme beim Laden mehrerer Versionen von jQuery verstehen
// auf einer Seite, die alle define() aufrufen könnten. Der Loader zeigt
// an, dass für mehrere jQuery-Versionen Sonderregelungen gelten,
// indem er „define.amd.jQuery = true“ angibt,
// da jQuery mit anderen verkettet werden kann Dateien, die möglicherweise „define“ verwenden,
//, aber kein ordnungsgemäßes Verkettungsskript verwenden, das anonyme Module versteht
// AMD-Module sind die sicherste und robusteste Methode zur Registrierung.
// Es wird eine JQuery in Kleinbuchstaben verwendet weil AMD-Modulnamen von
// Dateinamen abgeleitet sind und jQuery normalerweise in einem kleingeschriebenen Dateinamen geliefert wird.
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery ", [], function () { return jQuery; } );
}

Die Funktionsweise besteht darin, dass der verwendete Skriptlader angibt, dass er mehrere jQuery-Versionen unterstützen kann, indem er eine Eigenschaft, define.amd.jQuery, als „true“ angibt. Wenn Sie an den spezifischen Implementierungsdetails interessiert sind, können Sie jQuery als benanntes Modul registrieren, da das Risiko besteht, dass es mit anderen Dateien zusammengefügt wird, die die Methode define() von AMD verwenden, ohne ein geeignetes Stitching-Skript zu verwenden versteht anonyme AMD-Moduldefinitionen.

Höhere Version von jQuery (1.11.1) entfernt die Definition von define.amd.jQuery:

Code kopieren Der Code lautet wie folgt:

if ( typeof define === "function " && define .amd ) {
define( "jquery", [], function() {
return jQuery;
});
}

Verwenden Sie jQuery in Require.js

Es ist sehr praktisch, jQuery in Require.js zu verwenden. Konfigurieren Sie es einfach, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

// Einfache Konfiguration
erforderlich. config( {

// RequireJS lädt den gesamten Code über einen relativen Pfad baseUrl. baseUrl wird normalerweise auf dasselbe Ebenenverzeichnis des Skripts gesetzt, das durch das data-main-Attribut angegeben wird. baseUrl: "./js",

// Alias ​​​​des Skriptmoduls eines Drittanbieters, jquery ist prägnanter und klarer als libs/jquery-1.11.1.min.js;
paths: {

"jquery ": "libs/jquery- 1.11.1.min.js"

}

});

// Beginnen Sie mit der Verwendung des jQuery-Moduls
require([" jquery"], function ($ ) {

//Ihr Code
//Sie können hier direkt Jquery-Methoden verwenden, wie zum Beispiel: $( "#result" ).html( "Hello World!" );

});

JQuery-Plug-in in Require.js verwenden

Obwohl jQuery die AMD-API unterstützt, bedeutet dies nicht, dass das jQuery-Plug-in auch mit AMD kompatibel ist.

Allgemeines jQuery-Plug-in-Format:

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

$.fn.myPlugin = function () {
//Ihr eigener Plug-in-Code
};
})(jQuery);

Wir können jedoch Require.js verwenden, um ein jQuery-Plug-in mit einer leichten Modifikation zu laden:

Kopieren Sie den Code Der Code lautet wie folgt:

;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD mode
define([ "jquery" ] , Factory);
} else {
                                                                                                                                                                                    ) {
//Plug-in-Code
};
}));



Verwendung von jQuery-UI-Komponenten in Require.js

Die Verwendung von jQuery-UI-Komponenten in Require.js ist ähnlich. Ändern Sie einfach den jQuery Widget Factory-Code und laden Sie die Abhängigkeiten der jQuery-UI. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:(function (widgetFactory) {

if (typeof define === "function" && define.amd) {

// AMD mode
define("jquery.ui.widget", ["jquery"], function ( ) {

                                                                                                      🎜>