Я работаю с requirejs + jquery, и мне было интересно, есть ли разумный способ заставить плагин jQuery хорошо работать с require.
Например, я использую jQuery-cookie. Если я правильно понял, я могу создать файл с именем 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
источник
require(['plugin1', 'plugin2']);
и т. Д. Обратный вызов не передается, поэтому ничего не будет выполняться, кроме самих сценариев плагина. Это означает, что затем они будут добавлены,jQuery.fn
поэтому везде, где вы можете просто указать jquery в качестве зависимости, они будут включены. Как я уже сказал, я новичок в этом, и может быть лучший подход (например, просто использованиеscript
тега), но это действительно работает.Есть некоторые предостережения при использовании конфигурации прокладки в RequireJS, указанные на http://requirejs.org/docs/api.html#config-shim. . А именно: «Не смешивайте загрузку CDN с конфигурацией прокладки в сборке», когда вы используете оптимизатор.
Я искал способ использовать один и тот же код плагина 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 }; })
источник
factory(jQuery || Zepto);
, , но я не знаю, как бы вы сделали часть AMD. Я думаю, вам нужно установить jQuery "путь" к zepto ??paths: { jquery: 'vendor/zepto/zepto.min' }
shim
это не так? Думаю, нет ... потому что вы сказали, что вручную кодируете, как указано выше.$.fn.jqueryPlugin
изменитеjqueryPlugin
название плагина во фрагменте !!Так же, как к сведению, некоторые плагины jquery уже используют amd / require, поэтому вам не нужно ничего объявлять в прокладке. На самом деле в некоторых случаях это может вызвать у вас проблемы.
Если вы посмотрите в jquery cookie JS, вы увидите определение вызовов и require (["jquery"]).
и в jquery.js вы увидите вызов для определения ("jquery", [], function () ...
источник