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
quelle
require(['plugin1', 'plugin2']);
usw. haben. Es wird kein Rückruf übergeben, sodass nur die Plugin-Skripte selbst ausgeführt werden. Dies bedeutet, dass sie sich dann selbst hinzufügen,jQuery.fn
sodass Sie überall "jquery" als Abhängigkeit auflisten können und sie eingeschlossen werden. Wie gesagt, ich bin ziemlich neu in diesem Bereich und es gibt möglicherweise einen besseren Ansatz (z. B. nur die Verwendung einesscript
Tags), aber das funktioniert.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.
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
factory
in 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 globalejQuery
Objekt zu definieren . Das ist genau wie die gängige Plugin-Definitionssprache:Wenn ein Modullader vorhanden ist,
factory
wird 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 mitquelle
factory(jQuery || Zepto);
, aber ich weiß nicht, wie Sie den AMD-Teil ausführen würden. Ich denke, Sie müssten den jQuery "Pfad" auf zepto setzen?paths: { jquery: 'vendor/zepto/zepto.min' }
shim
Tut das nicht im Wesentlichen genau das? Ich denke nicht ... weil Sie sagten, dass Sie es manuell wie oben codieren.$.fn.jqueryPlugin
im Snippet steht, änderejqueryPlugin
den Plugin-Namen !!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 () ...
quelle