Где вы положили свой JavaScript?

Question

Вы локализуете свой javascript на странице, или у вас есть мастер "application.js" или аналогичный?

Если это последнее, как лучше всего убедиться, что ваш .js не работает на неправильных страницах?

РЕДАКТИРОВАТЬ: под javascript я имею в виду пользовательский javascript, который вы пишете как разработчик, а не js-библиотеки. Я не могу представить, чтобы кто-нибудь скопировал / вставил исходный код jQuery на свою страницу, но вы никогда не знаете.

Answer 1

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

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

Answer 2

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

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

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

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

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

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

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

---

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Если вы ориентируетесь на iphone, постарайтесь сохранить в кэше все, что вы хотите, под 25k.

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

Answer 6

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

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

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

---

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

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

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

Answer 7

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

(Зависит от того, что вы подразумеваете под «вашим» javascript, хотя я полагаю:)

Answer 8

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