Jak sprawić, by wtyczka jQuery była ładowalna za pomocą requirejs

Pracuję z requirejs + jquery i zastanawiałem się, czy istnieje sprytny sposób, aby wtyczka jQuery działała dobrze z require.

Na przykład używam jQuery-cookie. Jeśli dobrze zrozumiałem, mogę utworzyć plik o nazwie jquery-cookie.js i wewnątrz zrobić

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"]
    }
} );

Zastanawiałem się, czy mógłbym robić rzeczy takie jak jQuery, które wygląda tak:

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

lub jeśli jest to jedyny sposób, aby wtyczki jQuery były kompatybilne z requirejs lub dowolnym amd

Musisz tylko to zrobić

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

na końcu jquery-cookie.js LUB

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

gdziekolwiek, zanim włączysz plik cookie jquery (na przykład wszędzie tam, gdzie wskazuje główny plik danych).

Ostatni wysłany przez ciebie blok kodu jest dobry dla rzeczy takich jak jQuery, które są redystrybuowane i mogą, ale nie muszą, znajdować się w środowisku AMD. Idealnie byłoby, gdyby każda wtyczka jQuery miała już taką konfigurację.

Wolę, aby dołączone biblioteki były tak nieskażone, jak to tylko możliwe, więc globalna konfiguracja podkładek raz na stronę wydaje mi się najczystszym rozwiązaniem . W ten sposób aktualizacje są bezpieczniejsze, a CDN stają się możliwe.

Istnieją pewne zastrzeżenia dotyczące używania konfiguracji podkładek w RequireJS, wskazane na http://requirejs.org/docs/api.html#config-shim . Mianowicie: „Nie mieszaj ładowania CDN z konfiguracją podkładek w kompilacji”, gdy używasz optymalizatora.

Szukałem sposobu na użycie tego samego kodu wtyczki jQuery w witrynach z i bez RequireJS. Znalazłem ten fragment dla wtyczek jQuery na https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Otaczasz swoją wtyczkę tym kodem i będzie działać poprawnie w obu przypadkach.

(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
    };  

}));

Kredyt trafia do jrburke; podobnie jak javascript, jego funkcje znajdują się wewnątrz funkcji działających na inne funkcje. Ale myślę, że rozpakowałem, co robi.

Argument funkcji factoryw pierwszym wierszu jest sam w sobie funkcją, która jest wywoływana w celu zdefiniowania wtyczki w $argumencie. Gdy nie ma modułu ładującego zgodnego z AMD, jest on wywoływany bezpośrednio w celu zdefiniowania wtyczki w jQueryobiekcie globalnym . To tak, jak w przypadku wspólnego idiomu definicji wtyczki:

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

Jeśli istnieje moduł ładujący, factoryjest rejestrowany jako wywołanie zwrotne dla modułu ładującego do wywołania po załadowaniu jQuery. Załadowana kopia jQuery jest argumentem. To odpowiednik

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

Podobnie jak FYI dla wszystkich niektórych wtyczek jquery, które już używają amd / require, nie musisz niczego deklarować w shim. W rzeczywistości może to w niektórych przypadkach powodować problemy.

Jeśli zajrzysz do pliku JS jquery cookie, zobaczysz zdefiniowane wywołania i require (["jquery"]).

aw jquery.js zobaczysz wywołanie do define ("jquery", [], function () ...