Организация и инициализация кода UJS

Question

Мой вопрос из двух частей - это то, что кажется очень простым, но я не видел никаких обсуждений в введениях, руководствах или обзорах в UJS или jQuery. Я прочитал множество других тем/вопросов, чтобы попытаться найти примеры, которые я мог бы просто скопировать стиль или ощущение, но примеры игрушек, которые спрашивают: «Как мне сделать X в jQuery?» и тому подобное, никогда не объясняют или не демонстрируют, как их решения подходят для более широкого применения.

Таким образом, мой вопрос является структурным или архитектурным.

«Т.Л., д-р» «? Как люди фактически организовать и инициализировать код Ненавязчивый JavaScript в больших приложениях» версии вопросов в основном спросить В частности:

1. «При написании JavaScript в ненавязчивой стиле, как может быть организован код в файлах Если даже делать?» (Я понимаю, что есть преимущества только для отправки одного файла клиенту, который затем кэшируется, и все последующие загрузки быстрее).

2. «Если уместно, JS больше не загружается явно страницей, как убедиться, что правильный код правильно инициализирован/вызван/использован на соответствующих страницах, а время не тратится на запуск селекторов, которые не имеют отношения к текущей странице? "

Long Version:

После нескольких месяцев ручной прокатки мой собственный ломкий, достаточно хороший, для, теперь JavaScript в нашем приложении Rails, я, наконец, преобразование в пути UJS и JQuery , Теперь я прочитал все http://jqfundamentals.com, за исключением раздела «Расширенные темы». Я получаю зависание jQuery довольно легко, и мои страницы делают то, что я хочу, в изоляции.

Что касается «Ненавязчивый JavaScript», я менее ясно, но идея, как представляется, прежде всего, отделяя JS совершенно внешние файлы и обвязки функциональность JS на странице после факта как-то определить, какие страницы вы на и прикрепляя функции после того, как документ готов. Пожалуйста, исправьте меня, если это неточно или неполно.

Но я не понимаю, как организовать мой код и убедиться, что правильный JavaScript включен и прикреплен к правильным страницам. Все методы, которые я могу себе представить, кажутся либо чрезвычайно неэффективными, либо неудобными, либо недействительными некоторые из принципов UJS.

Текущее состояние дел в том, что у меня массивный и громоздкий файл application.js, в который забиты все виды селекторов, которые ожидают размещения функций на элементах страницы, которых нет на 90% моих страниц , То есть, на страницах 1 есть элементы A, B и C, тогда как в пунктах A, D и E. это часто приводит к разрыву вещей. Я чувствую, что я остался с двумя неприятными вариантами:

1. Так как я хочу, чтобы сервер посылать только один, большой файл .js, уже весь мой код JS в application.js как-то завернутый в распределительном заявлении, что выводит (?), на какой странице он включен, и делает только document.ready призывы к элементам, которые, как он знает, должны быть на этой странице. Очевидные способы, которыми я мог бы справиться с этим, очень уродливы, например, разместить на странице одну глобальную переменную JS и проверить ее, что разбивает весь дзю UJS, который привлек меня в первую очередь.

2. Разделите мой JavaScript на разные файлы и выборочно загрузите их. То есть «я в view01.html.erb, поэтому мне нужно включить view01.js», который имеет дело только с элементами на view01.html.erb. Сначала это кажется лучше, но становится неуклюжим, когда речь идет о частичных файлах, смесях и сопоставлениях .js и попытке остаться СУХОЙ.

Я пошел по этой дороге из UJS, потому что было это очень чистое, дзно, как обращение, но применительно к более крупному проекту, он, кажется, больше проблем, чем это стоит. Тем не менее люди гораздо умнее меня настаивают на другом, и я полностью согласен с тем, что встроенный JavaScript-скрипт с привязкой к сценарию неуклюжий и уродливый, что заставляет меня думать, что я делаю что-то неправильно.

То, что я сделал до сих пор (он же даже более длинная версия, вероятно, не стоит вашего времени, чтобы прочитать):

Фаза 1: Я работаю над приложением Rails, и поэтому я начал взяв маршрут, представленный в нескольких учебниках RailsCasts, которые демонстрируют код в application.js, который находит элемент через селектор и прикрепляет к нему некоторые функции. Все отлично поработало, и у меня было 2 или 3 страницы, которые делали все отличные jQuery, Web2.0-ish, AJAX-y, которые горячие с детьми в эти дни. Потрясающие!

Фаза 2: Затем я сделал еще одну страницу, и все началось. У меня был весь мой код в application.js, доступ к которому через $ ('selector'). На этой новой странице не было ни одного элемента, как на других страницах, поэтому, когда мой код с других страниц пытается получить элемент с id = 'special_area', вызов $ ('# special_area') [0 ] ломается, потому что он пуст. Null-проверка результата каждого отдельного селектора чувствовала себя не так, поэтому я в конечном итоге столкнулся с решением не использовать элементы DOM, которые я знаю и люблю, но работаю с этими причудливыми объектами jQuery, которые могут быть связаны цепью. Ухоженная.

Фаза 3: Я понимаю, что с помощью этих прикован объектов JQuery, до тех пор, как все мои идентификаторы уникальны, или я размещаю какой-то уникальный DIV на каждой странице, любые элементы, которые не существуют на странице будет вернуть пустой набор и (надеюсь) не сломаться. Я не знаю достаточно, чтобы сказать наверняка, что они не сломаются, независимо от того, что я хочу с ними делать, потому что они пусты, поэтому я не собираюсь предполагать, что это так. Но каким-то образом я вижу, как он слегка работает, нажимая ВСЕ элементы во всем моем приложении и как-то разумно игнорируя элементы, которые не существуют на текущей странице.

Кроме того, руководство по основам jQuery обсуждает, многократно, как дорого стоит работать с селекторами. И если я просто перенаправляю ВСЕ мои селекторы и не применяю те, которые не существуют, я помещаю ОГРОМНЫЕ статические накладные расходы на каждую страницу, так как по мере увеличения размера моего приложения, .js, и каждая страница должна проверять все больше и больше элементов, которые на самом деле не появляются на нем!

Этап 4: Я узнал о том, как пространства имен выполняются в JS, и пока я планирую их использовать, я не вижу в этом решения этой конкретной проблемы. Если они могут, пожалуйста, объясните. Вне этого момента моя способность сформулировать мое разочарование и путаницу сломалась, и мне интересно Как люди на самом деле организовать и инициализировать код UJS в Real Life ™?

Answer 1

Т.Л., д-р Ответ

1. Разделить свой код в AMD модули в нагрузку их, используя загрузчик AMD как RequireJS. И да, это должно быть сделано.
2. В вашем частичный вид просто require() и выполнить соответствующий модуль

Longer Ответ

Использование загрузчика AMD, такие как RequireJS позволяет spearate код в отдельные модули. Вы также можете хранить общий код (например, jQuery) в общем модуле, а затем использовать его как необходимое условие для своих модулей просмотра.

Вы можете прочитать на Asynchronous Module Definition, RequireJS и using it with jQuery, но это, как я бы подойти к нему:

1. У вас главный документ include и configure ваш загрузчик AMD. Возможно, вам захочется загрузить общие модули (jQuery и т. Д.), Чтобы браузер мог кэшировать их между запросами.
2. Для каждого частичного вида, implement a coresponding JS module.
3. В вашем частичном виде, добавить блок скрипта для загрузки модуля и выполнить свою функцию инициализации

Просмотра модуль

Вашего модуль будет выглядеть следующим образом (мы используем Jquery как модуль AMD тоже):

js/partials/view01.js 

define(["jquery", function($) { 
    "use strict"; 
    return { 
    init: function() { 
     // This is where you do your UJS work for this partial 
     // ... 
    } 
    } 
}); 

Частичный вид

В вашем частичном виде, вы будете загружать модуль и вызовите функцию инициализации:

view01.html.erb 

<script> 
require("partials/view01", function(view) { 
    view.init(); 
}); 
</script> 
<!-- More HTML for this partial view -->