Вопрос по jquery, javascript – Как сделать плагин jQuery загружаемым с requirejs

85

Я работаю с 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 или любым другим

Ваш Ответ

3   ответа
2

Подобно тому, как FYI для всех некоторых плагинов jquery уже использует amd / require, вам не нужно ничего объявлять в shim. На самом деле это может вызвать проблемы в некоторых случаях.

Если вы загляните в jquery cookie JS, вы увидите определения вызовов и require ([& quot; jquery & quot;]).

и в jquery.js вы увидите вызов для определения ("jquery", [], function () ...

103

В RequireJS есть несколько предостережений, связанных с использованием конфигурации shim.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
    };  

}));

Кредит идет к Джурберку; подобно такому большому количеству JavaScript, это функции внутри функций, действующих на другие функции. Но я думаю, что распаковал то, что он делает.

Аргумент функцииfactory в первой строке сама функция, которая вызывается для определения плагина на$ аргумент. Когда отсутствует AMD-совместимый загрузчик, он вызывается напрямую для определения подключаемого модуля в глобальном масштабе.jQuery объект. Это так же, как идиома определения общего плагина:

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

Если есть загрузчик модулей, тоfactory зарегистрирован как обратный вызов для загрузки загрузчиком после загрузки jQuery. Загруженная копия jQuery является аргументом. Это эквивалентно

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})
Error: User Rate Limit ExceededshimError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded$.fn.jqueryPluginError: User Rate Limit ExceededjqueryPluginError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededorError: User Rate Limit Exceededfactory(jQuery || Zepto);Error: User Rate Limit Exceededpaths: { jquery: 'vendor/zepto/zepto.min' }
66

Вам нужно только сделать либо

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

где-нибудь перед тем, как вы включите jquery-cookie (например, везде, где указываются основные данные).

Последний кодовый блок, который вы опубликовали, хорош для таких вещей, как jQuery, которые перераспределяются и могут быть, а могут и не быть в среде AMD. В идеале каждый плагин jQuery уже настроен на это.

Я предпочитаю сохранять включенные библиотеки как можно более чистыми, поэтомуthe global shim config once per page seems like the cleanest solution to me, Таким образом, обновления безопаснее, и CDN становятся возможными.

Error: User Rate Limit Exceededrequire(['plugin1', 'plugin2']);Error: User Rate Limit ExceededjQuery.fnError: User Rate Limit ExceededscriptError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Nicola Peluchetti
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededthatError: User Rate Limit ExceededwhenError: User Rate Limit Exceeded

Похожие вопросы