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(), который проверяет данные, добавляет визуальный эффект на страницу, а затем POST-данные.

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

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

На моем «новичка» стадии понимания с JQuery Я не получить почему я сделал бы это так

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

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

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

Edit: Я комфортно, что манипуляция DOM - такие как LightBox, которые могут появиться, когда любой эскиз с классом «LightBoxThumb» нажата - будет использовать Ненавязчивый Javascript.

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

edit2. - принято ответ

Я взял Russ Cams ответ. Он описывает Unobtrusive Javascript таким образом, который был полезен для меня, когда я больше разбираюсь в том, как следует использовать &.

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

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

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

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

Answer 1

Unobtrusive JavaScript является основным фактором для разделения JS код из разметки

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

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

От Learning jQuery

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

Возможно, вы захотите взглянуть на jQuery in Action, я бы очень рекомендовал его. Вы можете выбрать Chapter 1 и Chapter 5 на book's homepage. Я думаю, что это может дать дальнейшее понимание того, почему разделение может работать хорошо.

Наконец, посмотрите на this question, на котором есть ответы, подробно описывающие, как вы найдете слушателей событий на узле DOM.

EDIT:

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

класс = «MyFormSubmit» становится столь же информативны, как чтение OnClick = "возвращение MyFormSubmit();

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

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