Размещение ссылки jQuery внизу HTML-документа нарушает пользовательский контроль

Question

Уолтер Рамсби дал отличный ответ на Где разместить JavaScript в HTML-файле . Он ссылается на работу, проделанную командой Yahoo Exceptional Performance, и их рекомендацию разместить сценарии внизу страницы . Это жесткое и быстрое правило, которому я давно следую. В той же ветке Леви Розоль указал, что «лучшее место для него [JavaScript] - это как раз перед тем, как оно понадобится вам, не раньше». Это то положение, в котором я сейчас нахожусь.

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

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

1. Размещение ссылки на библиотеку jQuery внутри пользовательского элемента управления.
   • Недостаток: если пользовательский элемент управления помещен в ретранслятор, будут сделаны многочисленные ссылки на библиотеку jQuery.
2. Не включайте JavaScript в пользовательском элементе управления и пишите весь код, чтобы обновить тег span для пользовательского элемента управления на содержащей странице.
   • Недостаток: я получу один и тот же код в нескольких местах, создав потенциальный кошмар обслуживания.
3. Поместите ссылку jQuery в раздел заголовка страницы.
   • Недостаток: я нарушил рекомендацию разместить скрипты внизу страницы и создал непригодный пользовательский элемент управления, если на странице нет ссылки на jQuery.

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

Answer 1

Существует проект Google, направленный на решение этих проблем, который вы, возможно, захотите посмотреть, называется Jingo:

http://code.google.com/p/jingo/

Другое решение, которое я бы порекомендовал, - это загрузчик, такой как YUI Loader Utility.

http://developer.yahoo.com/yui/yuiloader/

Это позволит вам управлять зависимостями и т. Д., И это не просто полезно, когда вы используете их компоненты пользовательского интерфейса. Это может быть использовано для чего угодно; просто посмотрите документы вокруг addModule.

Если вы используете ASP.NET, ScriptManager является еще одним хорошим решением.

Answer 2

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

Функция javascript может проверять существующую ссылку на jQuery, и, если она не была найдена, записать ссылку. Это решило бы несколько ссылок. Основной пример обсуждался в этой теме .

Answer 3

Самое простое решение, которое я нашел, - это использовать помощник для накопления фрагментов Javascript, которые будут включены в тело страницы при рендеринге других элементов страницы. Затем вы можете сначала включить jQuery, а затем любые отложенные литеральные фрагменты Javascript.

Требуется поддерживать некоторое дополнительное состояние во время генерации страницы, что может немного усложнить ваш конвейер рендеринга. Тем не менее, он позволяет получить отложенное включение Javascript, не требуя сложных манипуляций с DOM после загрузки страницы, чтобы выбрать любые существующие ссылки на jQuery.