Куда вы помещаете свой javascript?

Лично я стараюсь включать несколько файлов Javascript, отсортированных по модулям (как YUI). Но время от времени, когда я пишу по существу однострочник, я помещаю его на страницу.

Лучше всего, наверное, поставить на серверах Google.

(Хотя я полагаю, это зависит от того, что вы подразумеваете под "своим" javascript :)

Помещение всех ваших js в один файл может улучшить производительность (только один запрос против нескольких). А если вы используете сеть распространения контента, такую ​​как Akamai, это улучшает коэффициент попадания в кеш. Кроме того, всегда вставляйте inline js в самый низ страницы (прямо над тегом body), потому что это выполняется синхронно и может задержать рендеринг вашей страницы.

И да, если один из используемых вами js-файлов также размещен в Google, обязательно используйте его.

Вот мои «рекомендации». Обратите внимание, что все это не формально, они просто кажутся правильными.

Весь общий код JS находится в каталоге SITE/javascripts, но загружается по уровням.

Для материалов всего сайта (таких как jquery или мой сайт application.js) общий макет сайта (это будет главная страница в ASP.net) включает файл. Теги script находятся вверху страницы.

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

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

Для вещей, относящихся только к одной странице, я просто пишу встроенный javascript. Я стараюсь держать его как можно ближе к своей «цели». Например, если у меня есть несколько onclick js для кнопки, тег script будет располагаться под кнопкой.

Для встроенного JS, у которого нет цели (например, события onload), он находится внизу страницы.

Итак, как что-то попадает в локализованную библиотеку или библиотеку всего сайта?

• В первый раз, когда он вам понадобится, напишите его в строке
• В следующий раз, когда вам это понадобится, перетащите встроенный код в локализованную библиотеку.
• Если вы ссылаетесь на код в локализованной библиотеке из (примерно) 3 или более мест, перетащите код в региональную библиотеку.
• Если он нужен из более чем одного региона, перетащите его в библиотеку всего сайта.

Распространенная жалоба на такую ​​систему заключается в том, что вы получаете 10 или 20 небольших файлов JS, тогда как 2 или 3 больших файла JS будут работать лучше с точки зрения сети. Однако и rails, и ASP.NET имеют функции, которые обрабатывают объединение и кеширование нескольких файлов JS в один или несколько файлов «super» js для производственных ситуаций.

Я бы рекомендовал использовать такие функции, а не ставить под угрозу качество / читаемость фактического исходного кода.

Я стараюсь не помещать функции javascript на отображаемую страницу. В общем, у меня есть application.js (или root.js), который имеет общие функции, такие как манипуляции с меню. Если данная страница имеет определенные функции javascript, я создам файл .js для обработки этого кода и имитирую структуру dir для доступа к этому файлу (также используя то же имя, что и визуализированный файл).

Другими словами, если отображаемая страница находится в общедоступном / dir1 / dir2 / mypage.html, файл js будет находиться в общедоступном / js / dir1 / dir2 / mypage.js. Я обнаружил, что этот стиль мне подходит, особенно при создании шаблонов на сайте. Я создаю механизм шаблонов для «автозагрузки» моих ресурсов (css и js), выбирая путь запроса и выполняя некоторую проверку эквивалентов css и js в каталогах css и js в корне.

Команда исключительной производительности Yahoo! предлагает несколько отличных предложений по производительности для JavaScript. Стив Содерс раньше был в этой команде (сейчас он в Google) и написал интересные инструменты, который поможет вам решить, где разместить JavaScript.

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

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

Это произошло после того, как я реализовал мое веб-приложение, не задумываясь об этом аспекте кода. Теперь я должен также добавить, что javascript, который я использую усиливает, не составляет основу моего сайта. Если вы используете что-то вроде SproutCore или Ext, я думаю, решение будет несколько другим.

Вот пример веб-сайта, управляемого PHP: Если ваш сайт разделен на разделы, и один из этих разделов - календарь. Пользователь переходит к «index.phhp? Module = calendar & action = view». Если PHP-код основан на классах, алгоритм маршрутизации создает экземпляр класса CalendarModule, который основан на «Module» и имеет виртуальный метод «getJavascript». Это вернет те классы javascript, которые необходимы для выполнения действия «просмотр» в модуле «календарь». Он также может учитывать любые другие особые требования и возвращать для них файлы js. Код рендеринга может проверить отсутствие дубликатов файлов js, когда список включения javascript создается для последней страницы. Итак, метод getJavascript возвращает такой массив

return array('prototype.js','mycalendar.js');

Обратите внимание, что это или какая-то его форма не нова. Но мне потребовалось некоторое время, чтобы подумать, что это достаточно важно, чтобы пойти на неприятности.

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

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

Если вы нацеливаетесь на iphone, постарайтесь сохранить в кэше все, что вы хотите, менее 25 КБ.

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