Каковы побочные эффекты (если есть) нескольких $ (document).ready() на странице HTML?

Я использую среду веб-приложений (Symfony 1.3.6), которая соответствует шаблону MVC.

Слой представления состоит из шаблона декоратора. Файл шаблона также может содержать другие шаблоны - вот что вызывает у меня вопрос.

Предполагая, что есть страница (давайте назовем ее "домашней страницей"), которая состоит из нескольких шаблонов - (код был переработан, поэтому "суб-шаблоны" можно использовать на других страницах.

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

Допустим, шаблон домашней страницы использует 2 суб-шаблона:

  • шаблон A
  • шаблон B

Предположим, что шаблон A состоит из следующего фрагмента:

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

предположим, что шаблон B состоит из следующего фрагмента:

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

Теперь шаблон домашней страницы выглядит следующим образом:

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>

Я пробовал это - и, к моему удивлению, это сработало в том, что на объединенной последней странице ('homepage) был только один $ (document).ready().

Я не уверен, что мой браузер (Firefox) или веб-инфраструктура (Symfony) выполнили "зачистку" за кулисами.

Поэтому мой вопрос заключается в том, каков наилучший способ, если вы хотите преобразовать функциональность jQuery в "маленькие многократно используемые шаблоны", которые можно использовать повторно для обеспечения одинаковых функций на разных страницах?

Кстати, я надеюсь, что никто не предлагает написать плагин jQuery, так как это ТАК, а не то, о чем я говорю.

Ответы

Ответ 1

Нет проблем с несколькими вызовами $(document).ready(), только пара предупреждений:

  • Снижение читаемости.
  • Область действия: функция/переменная/объект, объявленный внутри одного $(document).ready(), не будет виден ни в каких других. Посмотрите эту простую демонстрацию.

Также посмотрите этот предыдущий вопрос о SO:

Ответ 2

Вы действительно можете использовать столько экземпляров $(document).ready() на странице, сколько захотите. Вы можете сгруппировать блоки кода инициализации любым удобным для вашего приложения способом. То, что вы приобретаете в гибкости, вы можете немного потерять в ясности, поскольку уже не так легко увидеть, что происходит, когда срабатывает onLoad.

Ссылки: Учебник по jQuery для Multiple $ (document).ready()

Ответ 3

Если вы хотите повторно использовать фрагменты кода js на разных страницах, вы можете использовать файл конфигурации view.yml в каждом из ваших модулей, например:

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]