Есть ли разница между размещением вызовов JavaScript в $ (document) .ready (function () {и размещением их в HTML?

Question

Есть ли разница в производительности или эффективности между размещением вызовов javascript, таких как blur, onclick и т. Д., В $ (document) .ready (function () {по сравнению с размещением их в HTML?

Спасибо!

Answer 1

Я думаю, что "в DOM" вы подразумеваете это:

<a href='#' onclick='someCodeHere()'>Click Me</a>

верно?Если это так, то это не столько вопрос производительности, сколько ремонтопригодность и мощность.Использование jQuery (поскольку вы упомянули обработчик «ready» в терминах jQuery) для привязки ваших событий позволяет платформе позаботиться об управлении несколькими обработчиками и устранении различий в браузерах.

На самом деле иногда даже лучше не связыватьнепосредственно к элементам вообще.Вместо этого вы можете использовать jQuery «живой» или «делегировать» механизмы, чтобы сократить реальные привязки обработчиков и обеспечить более динамичный DOM.

Answer 2

Я согласен, что гораздо элегантнее использовать jQuery или другой и иметь ненавязчивый js.Таким образом, все это хорошо видно и легко расширяется.

Я просто хочу упомянуть одну быструю проблему, которая у меня была со всем этим, и она включает в себя сгенерированный код (т.е. HTML из фреймворков).В моем случае Apache Trinidad в составе JSF.Когда Тринидад генерировал HTML, он включал встроенные вызовы JavaScript, такие как onclick='submitForm(..)'

Я модифицировал существующие пользовательские встроенные вызовы для использования jQuery, например:

<tr:commandLink onClick="doStuff()" />

, который генерирует HTML, например:1009 *

<a href="#" onclick="doStuff(); submitForm(..)" />

Теперь в случае, если вызов javascript является встроенным, если вы вернете false из метода, остальная часть onClick не будет выполнена.Тем не менее, при использовании ненавязчивого jQuery, встроенный метод не будет остановлен (в любом случае, не легко).

Я думаю, что я говорю, что "устал от каркасов": -)

Answer 3

Я не совсем понимаю смысл их размещения в DOM. Но да, если вы имеете в виду внутри тега сценария в вашем теле. Document.ready выполняется до загрузки изображений, и это экономит время для выполнения действий javascript