Лучшей практикой является удаление всего встроенного JavaScript. Тем не менее, есть 3 случая, когда вам абсолютно необходим встроенный JavaScript:
1. Для устранения ошибок изображения
Если тег изображения ссылается на несуществующий путь изображения, единственный способ предотвратить появление ошибки изображения (даже в веб-инспекторе) - это сделать:
<img src="/i/dont/exist.png" onerror="$(this).attr("src", "/i/do/exist.png")" />
Следующее не работает, потому что событие onerror выполняется еще до того, как вы успеете получить изображение с помощью jQuery:
$("img").error(function() {
$(this).attr("src", "/i/do/exist.png")
});
Код ниже также не работает, потому что событие onerror не всплывает:
$("img").live("error", function() {
$(this).attr("src", "/i/do/exist.png");
});
Так что для этого вы должны использовать встроенный JavaScript.
2. Чтобы отобразить шаблоны JavaScript при загрузке страницы
Если вы подождете до $(document).ready, чтобы нарисовать ваш фид контента в одном из пустых контейнерных элементов в вашем домике, пользователь увидит пустое место в течение доли секунды. Вот почему при первой загрузке страницы Twitter канал на мгновение становится пустым. Даже если вы просто поместите внешний скрипт-файл внизу dom, и там вы добавите динамически генерируемые html-элементы на вашу страницу, даже не используя $(document).ready, все равно будет слишком поздно. Вы должны добавить динамические узлы сразу после добавления элемента контейнера:
<script>App.bootstrap({some: "json"});</script>
<nav id='navigation'></nav>
<header id='header'></header>
<section id='content'>
// dynamic content here
</section>
<script>App.renderContent();</script>
<aside id='sidebar'>
// dynamically toggle which one is selected with javascript
<nav>
<h3>Search By Category</h3>
<ol>
<li>
<a href="/category-a">Category A</a>
</li>
<li>
<a href="/category-b">Category B</a>
</li>
</ol>
</nav>
</aside>
<script>App.renderSidebar();</script>
<footer id='footer'></footer>
3. Вы загружаете свое приложение с помощью JSON
Если вы используете шаблоны JSON + javascript, рекомендуется загрузить первый набор данных в тело ответа, включив его в строку на странице (в приведенном выше примере с dom). Благодаря этому вам не требуется дополнительный ajax-запрос для рендеринга контента.
Все остальное должно быть сделано с ненавязчивым Javascript
В Rails много помощников по javascript, и, к счастью, в Rails 3 большинство (все?) Ненавязчиво; теперь они используют атрибут data- и внешний файл rails.js. Тем не менее, многие из драгоценных камней, которые являются part-ruby part-javascript, по-прежнему пишут вспомогательные методы и добавляют сложные встроенные javascript:
Это полезно, но я думаю, что просто иметь четкое README, описывающее, как добавить JavaScript в ваш application.js, еще более полезно. Внешний javascript значительно упрощает настройку / расширение функциональности в будущем, дает вам гораздо больший контроль над системой и минимизирует дублирование на ваших html-страницах (поэтому тело ответа меньше, а браузер может кэшировать внешние файлы JavaScript). Если вам не нужно обрабатывать отсутствующие изображения, мгновенный рендеринг или загружать какой-либо json, вы можете поместить все остальное во внешние файлы javascript и никогда не использовать помощники Rails javascript / ajax.