web-dev-qa-db-fra.com

RequireJs - Définir vs Exiger

Pour les modules, je ne retourne pas un objet que j'utilisais require au lieu de define. Par exemple, disons que j'ai le plugin jQuery suivant (jquery.my-plugin.js):

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

Maintenant, si je dis ce qui suit dans un autre module:

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

J'ai trouvé que cela ne fonctionnait pas car myPlugin n'était pas enregistré. Cependant, si je change l'exigence en un définir dans mon module jquery.my-plugin, cela fonctionne bien.

J'apprécierais que quelqu'un clarifie pourquoi je dois faire ça. J'aime bien comprendre quelque chose avant d'aller de l'avant et de l'utiliser. Merci

javascriptrequirejs
54
nfplee

Essentiellement, lorsque vous utilisez require, vous dites "je veux cela, mais je veux aussi toutes ses dépendances". Donc, dans l'exemple ci-dessous, nous avons besoin de A, mais require recherchera toutes les dépendances et s'assurera qu'elles sont chargées avant de continuer.

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

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

La règle générale est que vous utilisez define lorsque vous souhaitez définir un module qui sera réutilisé par votre application et que vous utilisez require pour charger simplement une dépendance.

94
Paul Osborne

Voici le code qui devrait être à l'intérieur jquery.my-plugin.js qui définit un module appelé 'jquery.my-plugin' qui peut être utilisé comme dépendance ailleurs.

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)
        ...
    };
});

Vous trouverez ci-dessous une section de code dans laquelle vous souhaitez attacher votre fonction de plug-in à l'objet global jQuery, puis l'utiliser ...

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