Определение зависимости jQuery для модуля с Durandal в HotTowel SPA

Question

Я собираюсь круглыми кругами, пытаясь понять RequireJS и как использовать его для загрузки зависимостей, которые НЕ отображаются как неопределенные, когда я пытаюсь их использовать в модулях.

Я начал с курса Pluralsight «SPA с HTML5» Джона Папы. Я никогда не понимал, почему существует необходимость указывать каждую библиотеку в теге скрипта, который входит в комплект, когда я думал, что вся суть AMD в requireJS заключается в том, что вы передали ей ответственность и ее основной атрибут данных для асинхронной загрузки что требовалось. Что было вдвойне запутанным в решении, представленном в этом курсе, так это то, что он не соответствовал всей основной базе данных, задокументированной в документации RequireJS.

Перейдите на несколько месяцев, и теперь у нас есть шаблон «Горячее полотенце» с Durandal, образец «сервисного» модуля, настройка, которая следует за документацией RequireJS и довольно простым для понимания стартовым приложением. Единственное, что звучит будильником, - это идея, что большинство библиотек находятся в обычной папке «сценарии», а Durandal находится в полностью отдельной папке «приложение» вместе с логикой приложения. Если я узнал одну вещь из курса SPA SPA и играя с requireJS, это то, что перемещение материала из одной папки происходит очень быстро.

Во всяком случае, новый шаблон отлично работает. Зависимости модулей отлично работают, Views и ViewModels являются обязательными, и есть пример модуля logger с зависимостью модуля от модуля Durandal (то есть в папке приложения), который отлично работает. Нужно просто добавить еще один простой модуль, который использует jQuery и mockJson на основе кода, который находится в шаблоне Hot Towel, не так ли? Эрр, нет, не совсем.

Вот очень простая декларация для начала моего модуля «dataservice.js» внутри "приложения/службы папки

define(['jquery'], 
function ($) { 
    var init - function.... 

я, конечно, получить«Неопределенную»за $ при попытке доступа и это в моем кодовом блоке. Таким образом, после прочтения слишком много запутанной литературы (большая часть которых заканчивается с комментарием, чтобы сказать: «Это изменилось в JQuery хххх так не имеет значения больше») я следующие вопросы:

1. Когда монитор в сетевом трафике я вижу, что библиотека jQuery загружается правильно, как и mockJSON, если я добавляю ее в пакет поставщика, определенный в BundleConfig.cs. Итак, jQuery существует и ждет в моем браузере, даже если я не дал это само определение модуля. Для того, чтобы избавиться от «Неопределенные» ссылки в моем модуле документации представляется, означает, что мне нужно добавить что-то вроде следующего:

   require.config({ 
       paths: { 
        'text': 'durandal/amd/text', 
        jquery: '../Scripts/jquery-1.9.1' 
       } 
   }); 
   

   (. «Текст» декларация уже была там, я просто добавил Jquery псевдоним) Это заставляет мой модуль иметь функцию, а не «неопределенную», которая решает часть проблемы, за исключением того, что она вызывает вторую копию скрипта, который я уже видел, загруженный из-за пакета поставщиков шаблонов Hot Towell. Я не хочу загружать две копии jQuery по понятным причинам, так как я могу это исправить?

2. Я добавил библиотеку mockJSON к своему «поставщику», и это обычно называют использованием $ .mockJSON. Я не могу ничего сделать, чтобы сделать это действительным. Даже если я взломаю ссылку на скрипт, используя тот же процесс, который я сделал для jquery с объявлением require.config ({paths: ', я становлюсь неопределенным, не говоря уже о том, что проблема «библиотека загружается дважды» уже упоминалась Как я могу определить зависимость библиотеки, чтобы мое использование этой библиотеки в модуле работало?

3. Я предполагаю, что вся эта боль связана с тем фактом, что requireJS заключается в загрузке асинхронных модулей, но jQuery и mockjson являются синхронными, поэтому я должен загрузить их другими способами (связывание жестко закодированной ссылки), но это все равно означает, что мои модули requireJS нуждаются в том, чтобы указать их как зависимости, и ничто из того, что я пробовал, работает. Является ли мое предположение об этом синхронности/асинхронной проблеме правильной? Я надеялся найти хотя бы одно примерное приложение в Durandal, которое использовало jQuery и, в идеале, плагин jquery, но все, что я вижу, это код модуля, который использует модули Durandal, а не что-либо еще. Тот факт, что все эти библиотеки находятся за пределами основного корня для requireJS, вероятно, усугубляет проблему, поскольку мне приходится прибегать к путям с строками «../» в них, чтобы получить ссылки. Кто-нибудь знает, почему эта структура «всех библиотек, кроме Durandal, находится в одной папке, но существует Durandal в полной полной»?

4. Я понимаю, что requireJS использует «соглашение по конфигурации» в команде define, поэтому, если я пропустил идентификатор модуля, тогда он принимает идентификатор на основе имени исходного файла и пути из указанной корневой папки, указанной с использованием данных -главный. Однако Дюрандал ссылается на модуль, называемый «вход» в его коде. Этот модуль находится не в корневой папке, а в папке под названием «Durandal/transition/entry.js», поэтому я смущен тем, что любая ссылка на нее - «вход», а не «Durandal/переходы/вход». Где он псевдоним?

5. И наконец (hoorah) Я не понял тонкости разницы между заданием зависимостей в качестве первого аргумента (строкового массива) с инструкцией define и отсутствием этих зависимостей, а затем на фабрике модулей, которая становится первым аргументом указав что-то вроде var system = require ('../ system') - почему я должен использовать одну форму, предпочитая другую. Я вижу, что два типа смешиваются по образцу приложения и не понимают, почему.

P.S.: Когда я редактирую эту запись, я вижу пять вопросов с номерами от 1 до 5. Когда я ее просматриваю, я вижу, что она отображается как 1, а затем от 1 до 4. Некоторые странные HTML-редактор против ошибки отображения, что независимо от того, какое форматирование я пытаюсь, t были в состоянии исправить, поэтому, пожалуйста, разместите любые комментарии, как если бы у вас было пять вопросов с номерами от 1 до 5, а не с 2 пронумерованными 1 и тремя пронумерованными от 2 до 4!)

Answer 1

Ух ты, это много вопросов!

Заканчивать этот пост на Дюрандаль группы Google https://groups.google.com/forum/#!searchin/durandaljs/papa/durandaljs/Ku1gwuvqPQQ/gupgNqGIK1MJ

Интересный момент из потока является то, что Джон Папа, автор шаблона горячего полотенца, рекомендует загружать все ваши сторонние библиотеки фронта с помощью сценария теги или пакеты, а затем просто использовать подход require/AMD только для ваших собственных модулей. Затем ваши собственные модули должны ссылаться на глобальные свойства jquery ($) и нокаута (ko).

Я думаю, что если вы загружаете сторонние модули спереди, а затем через require/AMD, то вы можете получить непредсказуемые ошибки с помощью какого-либо кода с помощью глобального, а некоторые - с помощью версии AMD. (Это особенно характерно для нокаута, похоже).

Подход не совсем по-архитектурному, я согласен, но, если я уже 5 дней нахожусь на дюрандале, я начинаю предпочитать загружать известные сторонние библиотеки вперед.

Answer 2

О, ради Пита! Я не мог проглотить все это.

Если у вас есть настроение на инъекции jQuery и нокаутом и т. Д., Поместите это в свой main.js вокруг строки # 6, прежде чем определить, что происходит.

 
var root = this; // the global namespace, window 

// The following are already loaded via bundles 
// which put them in the root object. Add them as services. 
define('jquery', [], function() { return root.jQuery; }); 
define('ko', [], function() { return root.ko; }); 
define('breeze', [], function() { return root.breeze; }); 
define('Q', [], function() { return root.Q; }); 
define('moment', [], function() { return root.moment; }); 
define('sammy', [], function() { return root.Sammy; }); 
define('toastr', [], function() { return root.toastr; }); 

Удовлетворительно? :)

Answer 3

Ответ на короткий код ниже. Что-то где-то (предположительно, в Durandal) делает jQuery доступным без каких-либо модулей, которые используют его, чтобы объявить его как зависимость (я думаю, что в Durandal есть инструкция определения где-то в коде Durandal, но без конкретного примера это трудно понять. люди там используют jQuery или плагины (сарказм)). Надеюсь, предстоящий курс «Hot Towel» Джона Папы будет посвящен некоторым из этих вопросов/вопросов. И не только сам jQuery, но и плагины.

** Уловка для решения проблемы плагина jQuery, которая является реальной проблемой для всех вопросов, заданных моей командой, заключается в следующей команде в начале файла main.js, на который указывает ссылка на скрипт requireJS :

require.config({ 
paths: { 
    'text': 'durandal/amd/text', 
    'mockjson': '../Scripts/jquery.mockjson.js' 
}, 
shim: { 
    'mockjson': { 
     deps: ['jquery'], 
     exports: ['mockJSON'] 
    } 
} 

});

Обратите внимание, что библиотека mockJSON должна быть добавлена ​​в комплект (я использовал «поставщик», но вы могли бы добавить новый пакет), и что они указывают на то, что, поскольку это плагин jQuery, вы не должны объявлять его как зависимостей в любом из ваших модулей, которые этого требуют (или, по крайней мере, это то, что работает для меня).

Извините за длительность исходных вопросов, но на самом деле у меня есть команда, которая хочет получить ответы на эти вопросы, не может найти их в Интернете, и на момент написания статьи у меня есть приложение Code Camper от John Papa для продолжения - приложение, которое имеет отличный курс и является отличной отправной точкой, если вы хотите написать много сантехнического кода для объединения различных библиотек (мы этого не делаем. Нам нужно быть продуктивным, хотя код отличный чтобы ПОНИМАТЬ, какие новые структуры, такие как Durandal, кодируются для вас с помощью гораздо более простого подхода «конвенция по кодированию»). Проблема с этим курсом для нашей команды заключается в том, что когда вы копаетесь в коде, у вас возникает больше вопросов, чем вы найдете ответы (например, «Почему, когда я перемещаю библиотеки в свои собственные подпапки, а не все в одной большой папке, requireJS выкинуть ошибку, в которой говорится: «Вы загружаете библиотеки за моей спиной. Позвольте мне сделать это и не делать этого за моей спиной», «Почему код, кажется, уходит с использованием некоторых библиотек, пакеты и поиск которых отображается только в файле «more.info.txt», использование/намерение использования которого никогда не объясняется? »;« Почему существуют соглашения об именах модулей, которые отличаются между разделителем точек и разделителем слэша без видимых причин (или, по крайней мере, тот, который никогда не объяснялся? »« Почему в пакетах есть ссылки на файлы сценариев, которых нет в решении (это просто неиспользуемые обломки, которые не удаляются во время разработки приложения)? »« Почему автор переехал библиотеку индикаторов NetEye IsBusy за пределами собственной библиотеки и переименовали ее как скрипт в привет у меня есть библиотека «KoLite»? »и т. д.

Извините, что Уорд, по-видимому, не думает пытаться ПОНИМАТЬ, как эти вещи сочетаются и работают, важно (вот почему я задал пять вопросов, которые я сделал - вопросы, которые задает вся моя команда, и не объясняются ни в одном из ответов «вырезать и вставлять» вокруг jquery и требовать, чтобы мы нашли в Интернете). Будучи тренером, я ожидал, что он поймет, что «дайте мне некоторый вырез и прошлый код из курса Pluralsight, который не имеет особого значения. Мне не нужно понимать, что это не то, что я пытался сделать здесь, а иногда, если доступный материал не отвечает на целую кучу вопросов, с которыми сталкивается целая группа людей, тогда имеет смысл попытаться объяснить что это вы не понимаете. Виноват!

Я предполагаю, что есть возможность здесь для кого-то, чтобы написать приличный requireJS курс ;-)

Answer 4

За что стоит за опоздавших. Дурандал улучшил документацию по этой проблеме.В разделе «Настройка зависимостей» на приведенной ниже странице объясняется разница между регистрацией модулей с помощью define (alias, globalVariable) и использованием путей и стратегии шайбы.

Оба работают, но если вы используете путь и прокладку, все зависимости должны быть зарегистрированы аналогичным образом. Это особенно верно для плагинов, использующих «jQuery.fn.extend ...».

http://durandaljs.com/documentation/Conversion-Guide/