Як зробити плагін jQuery доступним для завантаження за допомогою requirejs

Я працюю з requirejs + jquery, і мені було цікаво, чи є розумний спосіб зробити так, щоб плагін jQuery добре працював з require.

Наприклад, я використовую файл cookie jQuery. Якщо я правильно зрозумів, я можу створити файл з назвою jquery-cookie.js і всередині зробити

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

я задався питанням, чи можу я робити такі речі, як jQuery, це приблизно так:

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

або якщо це єдиний спосіб зробити плагіни jQuery сумісними з requirejs або будь-якими AMD

Вам потрібно зробити ТІЛЬКИ

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

в кінці jquery-cookie.js, АБО

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

де завгодно, доки ви не включите файл cookie jquery (наприклад, де б не вказували основні дані, наприклад).

Останній опублікований код коду підходить для таких речей, як jQuery, які перерозподіляються, а можуть і не бути в середовищі AMD. В ідеалі кожен плагін jQuery мав би це вже налаштовано.

Я вважаю за краще зберігати включені бібліотеки якомога непорочнішими, тому глобальна конфігурація shim один раз на сторінку здається мені найчистішим рішенням . Таким чином модернізація є більш безпечною, і CDN стають можливою.

Є деякі застереження щодо використання конфігурації шима в RequireJS, на які вказується на http://requirejs.org/docs/api.html#config-shim . А саме: "Не змішуйте завантаження CDN із конфігурацією shim у збірці", коли ви використовуєте оптимізатор.

Я шукав спосіб використовувати той самий код плагіна jQuery на сайтах як з RequireJS, так і без нього. Я знайшов цей фрагмент для плагінів jQuery за адресою https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Ви обгортаєте свій плагін цим кодом, і він буде працювати належним чином у будь-якому випадку.

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

}));

Кредит дістається jrburke; як і стільки JavaScript, це функції всередині функцій, що діють на інші функції. Але я думаю, що я розпакував те, що робить.

Аргумент функції factoryу першому рядку сам по собі є функцією, яка викликається для визначення плагіна для $аргументу. Коли немає завантажувача, сумісного з AMD, він запускається безпосередньо для визначення плагіна на глобальному jQueryоб’єкті. Це подібно до загальної ідіоми визначення плагіна:

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

Якщо є завантажувач модулів, він factoryреєструється як зворотний виклик для завантажувача, який потрібно викликати після завантаження jQuery. Аргументом є завантажена копія jQuery. Це еквівалентно

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

Подібно до того, як FYI для всіх плагінів jquery вже використовує amd / require, так що вам не потрібно нічого заявляти в шайбі. Насправді в деяких випадках це може створити для вас проблеми.

Якщо ви заглянете до файлу cookie jquery JS, ви побачите визначення викликів та вимог (["jquery"]).

і в jquery.js ви побачите виклик для визначення ("jquery", [], function () ...