JQuery: почему ненавязчивая функция JavaScript / Document Ready, а не событие OnClick?

Question

Я только начал смотреть на JQuery. В настоящее время в моем веб-приложении нет AJAX.

Мой существующий JavaScript в моем HTML выглядит так:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

Отображаются кнопки для [Добавить] и [Найти]. Для Find необходимо отправить форму, и я использую MyFormSubmit (), которая проверяет данные, добавляет визуальный эффект на страницу, а затем отправляет данные.

Я мог бы добавить CLASS или ID для кнопки Find, а в JQuery я мог бы написать что-то вроде:

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

На моей "начинающей" стадии понимания с JQuery я не понимаю , почему я сделал бы это так

Мой старый способ идентифицирует Метод рядом с объектом. Может существовать риск того, что JS не загрузится до того, как пользователь нажмет кнопку (есть ли? ЗАГРУЗКА для JS находится прямо вверху страницы).

Метод JQuery Document Ready не будет активирован до тех пор, пока документ не загружен (что, как я полагаю, гарантирует, что JS все присутствует и готов к запуску?), Но он перемещает код в отдельную часть моего HTML-файла - поэтому, когда я вижу MyButtonArray DIV в исходном коде HTML, для меня не очевидно, какие объекты имеют методы, а какие нет.

Не могли бы вы помочь мне понять, какие у меня есть варианты и преимущества / недостатки, на которые мне следует обратить внимание?

Редактировать : Мне удобно, что манипуляции с DOM - такие как LightBox, которые могут появляться при нажатии на любую миниатюру с классом "LightBoxThumb" - будут использовать ненавязчивый JavaScript.

Однако я изо всех сил пытаюсь убедить себя, что у кнопки, для которой есть определенное действие, должен применяться такой метод. (Я, конечно, не стал бы добавлять на кнопку какой-либо код, кроме одного вызова функции для чего-то «в другом месте», но, на мой взгляд, это мой лучший ключ к пониманию того, что делает эта кнопка, и слои ненавязчивого Javascript могут сделать это намного сложнее определить.)

Edit2 - Принятый ответ

Я взял ответ Расса Камса. Он описывает ненавязчивый Javascript таким образом, который помог мне понять больше о том, как и когда это следует использовать.

На данный момент (может измениться, когда у меня будет больше опыта!) Я буду придерживаться события OnClick для одного неизменного действия над объектом, так как я чувствую, что мне будет легче отлаживать - и диагностировать если возникнут проблемы. Для ZebraStripes в таблице, которая позволяет сортировать щелчок по столбцу заголовка (и ситуации такого типа), я вижу преимущества подхода ненавязчивого Javascript

Последний комментарий Русса был особенно полезен, повторяется здесь:

"@ Кристен - Ты права, как много тем программирования, есть больше чем один подход, и люди будут яростно поддерживаю их убеждения! Если мы говорим об одном методе для одной кнопки, я полностью понять, откуда ты ...

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

Answer 1

Ненавязчивый JavaScript является основным драйвером для отделения кода JS от разметки

• Отделение функциональности («уровня поведения») от веб-страницы
  структура / содержание и презентация
• Лучшие практики, чтобы избежать проблем традиционного JavaScript программирование (например, браузер несоответствия и отсутствие масштабируемость)
• Прогрессивное улучшение для поддержки пользовательских агентов, которые могут не поддерживать
  расширенная функциональность JavaScript

С кодом в document.ready он не будет выполняться до тех пор, пока DOM не загрузится и не будет загружено содержимое страницы

С Обучение jQuery

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

Возможно, вы захотите взглянуть на jQuery в действии , я очень рекомендую его. Вы можете попробовать главу 1 и главу 5 на домашней странице книги . Я думаю, что это может дать дополнительное понимание того, почему разделение может работать хорошо.

Наконец, взгляните на этот вопрос , в котором даны подробные ответы о том, как вы найдете прослушиватели событий на узле DOM.

EDIT:

Некоторые мысли, которые могут убедить вас, почему ненавязчивый JavaScript может быть хорошей идеей.

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

• Было бы проще выяснить, какие элементы вызывают эту функцию для обработки событие, когда объявление встроено в каждом элементе или объявлении находится в одном месте, за пределами Разметка

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

Answer 2

событие готовности документа задолго до события загрузки документа. Готовность документа происходит после загрузки DOM, так что все элементы существуют до того, как вы начнете над ними работать.

Так что да, JS будет готов, когда документ будет обработан. Другой момент, связанный с привязкой, заключается в том, что она полезна для изменения привязок к элементам, когда происходят определенные действия.

Вы все равно можете объявить действие над элементом, если хотите.

Answer 3

Со временем, я думаю, вы привыкли к синтаксису jQuery и читаете:

class = "MyFormSubmit" становится таким же информативным, как и чтение onClick = "return MyFormSubmit ();

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

Один вопрос, который я задаю себе, состоит в том, насколько глубоко я планирую перейти на любой новый инструмент, если я планирую широко использовать фреймворк или библиотеку, тогда написание моего кода в его «более родном» стиле кодирования станет намного более Естественные и другие разработчики, которые знают инструмент, найдут код намного чище и понятнее.

Answer 4

Вы делаете это таким образом, чтобы отделить логику пользовательского интерфейса от реального дизайна HTML.