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

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

10 голосов
/ 21 августа 2010

Я использую каркас веб-приложения (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>

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

<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 ().

Я не уверен, что мой Бrowser (Firefox) или веб-фреймворк (Symfony) проделали некоторую «зачистку» за кулисами.

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

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

Ответы [ 3 ]

13 голосов
/ 21 августа 2010

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

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

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

5 голосов
/ 21 августа 2010

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

0 голосов
/ 21 августа 2010

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

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