it-swarm.com.de

Wie man ein jQuery-Plugin mit requirejs ladbar macht

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

Zum Beispiel verwende ich jQuery-Cookie. Wenn ich richtig verstanden habe, kann ich eine Datei mit dem Namen 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 aussieht:

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 AMD kompatibel zu machen

86

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 ODER

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

überall dort, wo Sie jquery-cookie einfügen (z. B. dort, wo data-main auf verweist).

Der letzte von Ihnen veröffentlichte Codeblock eignet sich für Dinge wie jQuery, die neu verteilt werden und sich möglicherweise in einer AMD-Umgebung befinden oder nicht. Idealerweise würde jedes jQuery-Plugin dies bereits eingerichtet haben.

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

66
Hans

Es gibt einige Einschränkungen bei der Verwendung der Shim-Konfiguration in RequireJS, auf die unter http://requirejs.org/docs/api.html#config-shim hingewiesen wird. "Mischen Sie das Laden von CDN 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 packen Ihr Plugin in diesen Code, und es wird so oder so richtig 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 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 globale Objekt jQuery zu definieren. Das ist genau so wie die gebräuchliche Plugin-Definition:

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

Wenn es einen Modul-Loader gibt, wird factory als Rückruf registriert, den der Loader nach dem Laden von jQuery aufrufen soll. Die geladene Kopie von jQuery ist das Argument. Es ist gleichbedeutend mit

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

Genau wie zu Ihrer Information verwenden einige der jquery-Plugins bereits AMD/require, so dass Sie nichts im Shim deklarieren müssen. Tatsächlich kann dies in einigen Fällen zu Problemen führen.

Wenn Sie in das JQuery-Cookie JS schauen, werden Sie sehen, wie Aufrufe definiert und angefordert werden (["JQuery"]).

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

2
TPEACHES