Как использовать requireJS и jQuery вместе?

Я хотел бы использовать requireJS и я использую jQuery.
Я не хочу использовать объединенную версию requireJS и jQuery, так как я не использую последнюю версию jQuery.
Что является лучшим способом для меня, чтобы работать с помощью RequireJS?

720   5  

5 ответов:

это мой точный вопрос тоже! Я также должен использовать более старый jQuery, но и более "традиционные" библиотеки javascript. Что это лучший способ, чтобы сделать это? (Я могу отредактировать ваш вопрос, чтобы сделать его более широким, если вы не возражаете.) Вот что я узнал.

RequireJS автор, Джеймс Берк, объяснил преимущества комбинированного файла RequireJS + jQuery. Вы получаете две вещи.

  1. модуль jquery доступно, и это объект jQuery. Это безопасно:

    // My module depends on jQuery but what if $ was overwritten?
define(["jquery"], function($) {
  // $ is guaranteed to be jQuery now */
})

  2. jQuery уже загружен, прежде чем какие-либо require() или define() вещи. Все модули гарантированы, что jQuery готов. Вам даже не нужно require/order.js плагин, так как jQuery был в основном жестко закодирован для загрузки первым.

для меня, #2 не очень полезно. Большинство реальных приложений много.js файлы должны загрузка в правильном порядке-грустно, но верно. Как только вы нужен Сэмми или подчеркивание.js, объединенный файл RequireJS+jQuery не помогает.

мое решение-написать простые обертки RequireJS, которые загружают мои традиционные скрипты с помощью плагина" order".

пример

предположим, что мое приложение имеет эти компоненты (по зависимости).

  • Мои приложения, greatapp
    • greatapp зависит от таможни jquery (старая версия надо использовать)
    • greatapp зависит от my_sammy (SammyJS плюс все его плагины, которые я должен использовать). Эти должно быть в порядке
      1. my_sammy зависит от jquery (SammyJS-это плагин jQuery)
      2. my_sammy зависит от Сэмми.js
      3. my_sammy зависит от Сэмми.формат JSON.js
      4. my_sammy зависит от Сэмми.место хранения.js
      5. my_sammy зависит от Сэмми.усы.js

на мой взгляд, все, что заканчивается .js - это "традиционный" сценарий. Все без .js это плагин RequireJS. Ключ: высокоуровневый материал (greatapp, my_sammy) - это модули, а на более глубоких уровнях он возвращается к традиционному .js файлы.

загрузка

все начинается с того, что загрузчик говорит RequireJS, как начать.

<html>
  <head>
    <script data-main="js/boot.js" src="js/require.js"></script>
  </head>
</html>

на js/boot.js я поставил только конфиг и как запустить приложение.

require( // The "paths" maps module names to actual places to fetch the file.
         // I made modules with simple names (jquery, sammy) that will do the hard work.
         { paths: { jquery: "require_jquery"
                  , sammy : "require_sammy"
                  }
         }

         // Next is the root module to run, which depends on everything else.
       , [ "greatapp" ]

         // Finally, start my app in whatever way it uses.
       , function(greatapp) { greatapp.start(); }
       );

Главная Приложения

на greatapp.js у меня есть нормальный модуль.

define(["jquery", "sammy"], function($, Sammy) {
  // At this point, jQuery and SammyJS are loaded successfully.
  // By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
  // Those require_* files also pass jQuery and Sammy to here, so no more globals!

  var start = function() {
    $(document).ready(function() {
      $("body").html("Hello world!");
    })
  }

  return {"start":start};
}

RequireJS модуль обертки вокруг традиционных файлов

require_jquery.js:

define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
  // Raw jQuery does not return anything, so return it explicitly here.
  return jQuery;
})

require_sammy.js:

// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
       , "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
       ]

       , function($) {
           // Raw sammy does not return anything, so return it explicitly here.
           return $.sammy;
         }
      );
127  
2010-12-29 08:58:29

этому вопросу уже как минимум два года, но я заметил, что это проблема все еще с RequireJS 2.0 (require-jquery.js использует jQuery 1.8.0, но последняя версия 1.8.2).

Если вы случайно видите этот вопрос, обратите внимание, что require-jquery.js теперь просто требуется.js и jquery.Яш, смешал.вы можете просто редактировать require-jquery.js и замените части jQuery на более новую версию.

Обновление (30 Мая , 2013): Теперь, когда RequireJS имеет пути и прокладку, есть новый способ импорта плагинов jQuery и jQuery, а старый метод больше не нужен и рекомендовано. Вот сокращенная версия текущего метода:

requirejs.config({
    "paths": {
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    }
});

define(["jquery"], function($) {
    $(function() {
    });
});

см.http://requirejs.org/docs/jquery.html Для получения дополнительной информации.

32  
2013-08-10 17:26:37

Я нашел лучший подход, чтобы сохранить jQuery за пределами моей сборки RequireJS.

просто включите jquery.минута.js в вашем HTML. Затем сделайте jquery.js файл с чем-то вроде этого...

define([], function() {
    return window.$;
});
8  
2014-04-28 12:16:43

нашел Anwer JasonSmith чрезвычайно полезным, вероятно, больше, чем документация RequireJS.

тем не менее, есть способ оптимизировать его, чтобы избежать наличия отдельных запросов AJAX для (крошечных) модулей определения-объявления ("require_jquery" "require_sammy"). Я бы подозревал, что r. js сделает это на этапе оптимизации, но вы можете сделать это раньше времени, чтобы не бороться с Path, BaseURI система.

.html: 
<html>
  <head>
    <script data-main="js/loader.js" src="js/require.js"></script>
  </head>
</html>

загрузчика.js:

// We are going to define( dependencies by hand, inline.
// There is one problem with that through (inferred from testing):
// Dependencies are starting to load (and execute) at the point of declaring the inline
// define, not at the point of require(
// So you may want to nest the inline-defines inside require( 
// this is, in a way, short replacement for Order plug in, but allows you to use
// hand-rolled defines, which the Order plug in, apparently does not allow.

var jQueryAndShims = ['jquery']

if(window.JSON == null){
    jQueryAndShims.push('json2')
    define(
        'json2'
        , ['js/libs/json2.min.js']
        , function() {
            return window.JSON
        }
    )
}
// will start loading the second we define it.
define(
    'jquery'
    , ['js/libs/jquery_custom.min.js']
    , function() {
        // we just pick up global jQuery here. 
        // If you want more than one version of jQuery in dom, read a more complicated solution discussed in
        // "Registering jQuery As An Async-compatible Module" chapter of
        // http://addyosmani.com/writing-modular-js/
        return window.jQuery 
    }
)

// all inline defines for resources that don't rely on other resources can go here.

// First level require(
// regardless of depends nesting in 'myapp' they will all start downloading 
// at the point of define( and exec whenever they want, 
// async in many browsers. Actually requiring it before the nested require makes
// sure jquery had *executed and added jQuery to window object* before
// all resolved depends (jquery plugins) start firing.
require(jQueryAndShims, function($) {

    // will start loading the second we define it.        
    define(
        'sammy_and_friends'
        , ['jquery','js/libs/jquery_pluginone.min.js','js/libs/jquery_plugintwo.min.js','js/libs/sammy.min.js']
        , function($) {
            // note, all plugins are unaltered, as they are shipped by developers.
            // in other words, they don't have define(.. inside.
            // since they augment global $ (window.jQuery) anyway, and 'jquery' define above picks it up
            // , we just keep on returning it.
            // Sammy is attached to $ as $.sammy, so returning just Sammy makes little sense
            return $
        }
    )

    // second level require - insures that Sammy (and other jQuery plugins) - 'sammy_and_friends' - is
    // loaded before we load Sammy plugins. I normally i would inline all sammy plugins i need 
    // (none, since i use none of them preferring jQuery's direct templating API
    // and no other Sammy plug in is really of value. )  right into sammy.js file. 
    // But if you want to keep them separate:
    require(['sammy_and_friends'], function() {

        // will start loading the second we define it.
        define(
            'sammy_extended'
            , ['sammy_and_friends','js/libs/sammy_pluginone.min.js','js/libs/sammy_plugintwo.min.js']
            , function($) {
                // as defined above, 'sammy_and_friends' actually returns (globall) jQuery obj to which
                // Sammy is attached.  So we continue to return $
                return $
            }
        )
        // will start loading the second we define it.
        define(
            'myapp'
            , ['sammy_extended', 'js/myapplication_v20111231.js'] 
            , function($, myapp_instantiator) {
                // note, myapplication may, but does not have to contain RequireJS-compatible define
                // that returns something. However, if it contains something like 
                // "$(document).ready(function() { ... " already it MAY fire before 
                // it's depends - 'sammy_extended' is fully loaded.
                // Insdead i recommend that myapplication.js returns a generator 
                // (app-object-generating function pointer)
                // that takes jQuery (with all loaded , applied plugins) 
                // The expectation is that before the below return is executed, 
                // all depends are loaded (in order of depends tree)
                // You would init your app here like so:
                return myapp_instantiator($)
                // then "Run" the instance in require( as shown below
            }
        )

        // Third level require - the one that actually starts our application and relies on
        // dependency pyramid stat starts with jQuery + Shims, followed by jQuery plugins, Sammy, 
        // followed by Sammy's plugins all coming in under 'sammy_extended'
        require(['jquery', 'myapp'], function($, myappinstance) {
            $(document).ready(function() {myappinstance.Run()})
        })
    }) // end of Second-level require
}) // end of First-level require

наконец, myapplication.js:

// this define is a double-wrap.
// it returns application object instantiator that takes in jQuery (when it's available) and , then, that
// instance can be "ran" by pulling .Run() method on it.
define(function() {
    // this function does only two things:
    // 1. defines our application class 
    // 2. inits the class and returns it.
    return function($) {
        // 1. defining the class
        var MyAppClass = function($) {
            var me = this
            this._sammy_application = $.sammy(function() {
                this.raise_errors = true
                this.debug = true
                this.run_interval_every = 300
                this.template_engine = null
                this.element_selector = 'body'
                // ..
            })
            this._sammy_application.route(...) // define your routes ets...
            this.MyAppMethodA = function(blah){log(blah)}  // extend your app with methods if you want
            // ...
             // this one is the one we will .Run from require( in loader.js
            this.Run = function() {
                me._sammy_application.run('#/')
            }
        }
        // 2. returning class's instance
        return new MyAppClass($) // notice that this is INITED app, but not started (by .Run) 
        // .Run will be pulled by calling code when appropriate
    }
})

эта структура (свободно заменяет (дублирует?) Плагин RequireJS Order, но) позволяет сократить количество файлов, которые вам нужны для AJAX, добавив больше контроля к определению зависимостей и дерева зависимостей.

существует также большой бонус к загрузке jQuery отдельно (который обычно поставляется в 100k) - вы можете управлять кэшированием на сервере, или кэшируйте jQuery в локальном хранилище браузера. Взгляните на проект AMD-Cache здесь https://github.com/jensarps/AMD-cache затем измените инструкции define( чтобы включить " cache!": и это будет (навсегда :) ) застрял в браузере пользователя.

define(
    'jquery'
    , ['cache!js/libs/jquery_old.min.js']
    , function() {
        // we just pick up global jQuery here. 
        // If you want more than one version of jQuery in dom, read a more complicated solution discussed in
        // "Registering jQuery As An Async-compatible Module" chapter of
        // http://addyosmani.com/writing-modular-js/
        return window.jQuery 
    }
)

примечание о jQuery 1.7.x+ он больше не прикрепляется к объекту window, поэтому вышеизложенное не будет работать с немодифицированным jQuery 1.7.х-файлы. Там вы должны настроить свой jquery**.js, чтобы включить это перед закрытием"}) (окно );":

;window.jQuery=window.$=jQuery

если у вас есть ошибки" jQuery undefined " в консоли, это знак jQuery версия, которую вы используете, не прикрепляется к окну.

Код лицензии: Общественное достояние.

раскрытие информации: JavaScript выше пахнет "псевдокодом", поскольку это перефразирование (ручная обрезка) гораздо более подробного производственного кода. Код, представленный выше, не гарантирован для работы и не был протестирован для работы в представленном виде. Аудит, проверка. Точка с запятой опущена специально, как они не требуются для спецификации JS, и код выглядит лучше без них.

3  
2011-12-20 19:43:19

в дополнение к ответу jhs см. Более поздние инструкции по require-jquery GitHub page от README.md файл. Он охватывает как самый простой подход использования комбинированного jquery / require.js-файл, а также как использовать отдельный jquery.js.

1  
2011-07-05 18:45:27

Comments

    Ничего не найдено.
Click here to cancel reply.