it-swarm.com.de

RequireJs - Definiere vs Require

Für Module gebe ich kein Objekt zurück, das ich verwendet habe, anstatt zu definieren. Angenommen, ich habe das folgende jQuery-Plugin (jquery.my-plugin.js):

require(['jquery'], function($) {
    $.fn.myPlugin = function(options) {
        ...
    };
});

Nun, wenn ich folgendes in einem anderen Modul sage:

require(['jquery', 'jquery.my-plugin'], function($) {
    $('#element').myPlugin();
});

Ich habe festgestellt, dass dies nicht funktioniert, da myPlugin nicht registriert wurde. Wenn ich jedoch die Anforderung in ein Define innerhalb meines Moduls jquery.my-plugin ändere, funktioniert es einwandfrei.

Ich würde es begrüßen, wenn jemand klären könnte, warum ich das tun muss. Ich verstehe etwas gerne vollständig, bevor ich es benutze. Vielen Dank

54
nfplee

Wenn Sie require verwenden, sagen Sie im Wesentlichen "Ich möchte dies, aber ich möchte auch alle seine Abhängigkeiten". Im folgenden Beispiel benötigen wir also A, aber require sucht nach allen Abhängigkeiten und stellt sicher, dass sie geladen sind, bevor Sie fortfahren.

require(['a'], function(a) {
    // b, c, d, e will be loaded
});

// File A
define(['b','c','d','e'], function() {
    return this;
});

Generelle Faustregel ist, dass Sie define verwenden, wenn Sie ein Modul definieren möchten, das von Ihrer Anwendung wiederverwendet wird, und dass Sie require verwenden, um einfach eine Abhängigkeit zu laden.

94
Paul Osborne

Unten ist der Code, der sich in jquery.my-plugin.js befinden sollte, der definiert ein Modul mit dem Namen 'jquery.my-plugin', das als Abhängigkeit an anderer Stelle verwendet werden kann.

define(['jquery'], function($) { //jquery is a dependency to the jquery.my-plugin module
    $.fn.myPlugin = function(options) { //adds a function to the *global* jQuery object, $ (global since jQuery does not follow AMD)
        ...
    };
});

Unten finden Sie einen Codeabschnitt, in dem Sie Ihre Plug-in-Funktion an das globale jQuery-Objekt anhängen und dann verwenden möchten ...

require(['jquery.my-plugin'], function() { // jquery.my-plugin is loaded which attaches the plugin to the global JQuery object as shown above, then this function fires

    //the only reason $ is visible here is because it's global. If it was a module, you would need to include it as a dependency in the above require statement
    $('#element').myPlugin(); //the $ refers to the global object that has the plugin attached
});
2
Niko Bellic