Вы упомянули три места:
В тегах;
в HTML; и
во внешнем файле.
Позвольте мне обратиться к каждому из них.
Рекомендуется иметь общий Javascript в одном или нескольких внешних файлах, и чем меньше файлов, тем лучше, поскольку каждый загруженный файл JS будет блокировать загрузку страницы до тех пор, пока этот файл JS не будет загружен.
Слово «обычный» чрезвычайно важно. Это означает, что вы не хотите помещать специфичный для страницы код Javascript во внешний файл по причинам кэширования. Допустим, у вас есть сайт с 1000 страниц. У каждой страницы есть свой JS-код. Это может быть либо 1000 разных файлов, либо один действительно большой файл, который выполняет много ненужного кода (например, ищет идентификаторы, которые не находятся на этой конкретной странице, но находятся на одном из 999 других). Ни один из этих результатов не является хорошим.
Первое дает вам небольшой импульс кеширования. Второй может иметь ужасное время загрузки страницы.
Итак, вы делаете все общие функции в одном файле JS, где этот файл JS only содержит функции. На каждой HTML-странице вы вызываете функции JS, необходимые для этой страницы.
В идеале ваши JS-файлы тоже эффективно кэшируются. Рекомендуется использовать заголовок HTTP Expires для далекого будущего и номер версии, чтобы JS-файл загружался только один раз каждым браузером независимо от того, сколько страниц они посещают. Когда вы изменяете файл, вы меняете номер версии, и это вызывает перезагрузку. Использование mtime (время последнего изменения файла JS) - это распространенная схема, в которой указаны URL-адреса, например:
<script type="text/javascript" src="/js/script.js?1233454455"></script>
, где это время генерируется автоматически. Ваш веб-сервер настроен на обслуживание файлов JS с соответствующим заголовком Expires.
Для наилучшего возможного смешивания внешних файлов и скриптов на странице (imho).
Последнее место, которое вы упомянули, было в теге. Здесь все зависит от того, какие библиотеки и фреймворки JS вы используете. Я большой поклонник jQuery, который поощряет ненавязчивый Javascript . Это означает, что вы (надеюсь) не помещаете никакой Javascript в свою разметку вообще . Так что вместо:
<a href="#" onclick="doStuff(); return false;">do stuff</a>
вы делаете:
<a href="#" id="dostuff">do stuff</a>
с Javascript:
$(function() {
$("#dostuff").click(doStuff);
});