So machen Sie ein jQuery-Plugin mit requirejs ladbar

Ich arbeite mit requirejs + jquery und habe mich gefragt, ob es eine clevere Möglichkeit gibt, ein jQuery-Plugin mit require gut funktionieren zu lassen.

Zum Beispiel verwende ich jQuery-Cookie. Wenn ich es richtig verstanden habe, kann ich eine Datei namens jquery-cookie.js und inside do erstellen

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

Ich fragte mich, ob ich Dinge wie jQuery tun könnte, was so ist:

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

oder wenn dies die einzige Möglichkeit ist, jQuery-Plugins mit requirejs oder einem amd kompatibel zu machen

Sie müssen nur entweder tun

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});

am Ende von jquery-cookie.js, OR

requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

überall, bevor Sie jquery-cookie einfügen (z. B. überall dort, wo Daten-main darauf verweist).

Der letzte Codeblock, den Sie veröffentlicht haben, eignet sich für Dinge wie jQuery, die neu verteilt werden und sich möglicherweise in einer AMD-Umgebung befinden oder nicht. Idealerweise hätte jedes jQuery-Plugin dies bereits eingerichtet.

Ich bevorzuge es, die enthaltenen Bibliotheken so unverfälscht wie möglich zu halten, daher scheint mir die globale Shim-Konfiguration einmal pro Seite die sauberste Lösung zu sein . Auf diese Weise sind Upgrades sicherer und CDNs werden zu einer Möglichkeit.

Bei der Verwendung der Shim-Konfiguration in RequireJS gibt es einige Einschränkungen, auf die unter http://requirejs.org/docs/api.html#config-shim hingewiesen wird . "Mischen Sie das CDN-Laden nicht mit der Shim-Konfiguration in einem Build", wenn Sie den Optimierer verwenden.

Ich suchte nach einer Möglichkeit, denselben jQuery-Plugin-Code auf Websites mit und ohne RequireJS zu verwenden. Ich habe dieses Snippet für jQuery-Plugins unter https://github.com/umdjs/umd/blob/master/jqueryPlugin.js gefunden . Sie wickeln Ihr Plugin in diesen Code ein und es wird in beiden Fällen ordnungsgemäß funktionieren.

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    define(['jquery'], factory);
} else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
}
}(function ($) {

    $.fn.yourjQueryPlugin = function () {
        // Put your plugin code here
    };  

}));

Kredit geht an jrburke; Wie so viel Javascript sind es Funktionen innerhalb von Funktionen, die auf andere Funktionen einwirken. Aber ich glaube, ich habe ausgepackt, was es tut.

Das Funktionsargument factoryin der ersten Zeile ist selbst eine Funktion, die aufgerufen wird, um das Plugin für das $Argument zu definieren . Wenn kein AMD-kompatibler Loader vorhanden ist, wird er direkt aufgerufen, um das Plugin für das globale jQueryObjekt zu definieren . Das ist genau wie die gängige Plugin-Definitionssprache:

function($)
{
  $.fn.yourjQueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

Wenn ein Modullader vorhanden ist, factorywird dieser als Rückruf für den Loader registriert, der nach dem Laden von jQuery aufgerufen werden soll. Die geladene Kopie von jQuery ist das Argument. Es ist gleichbedeutend mit

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})

Genau wie zu Ihrer Information verwenden einige der JQuery-Plugins bereits amd / require, sodass Sie nichts im Shim deklarieren müssen. In der Tat kann dies in einigen Fällen zu Problemen für Sie führen.

Wenn Sie in das jquery-Cookie JS schauen, sehen Sie, wie Aufrufe definiert und erforderlich sind (["jquery"]).

und in jquery.js sehen Sie einen Aufruf zum Definieren ("jquery", [], function () ...