Какой хороший способ организовать внешние файлы JavaScript?

Вероятно, вы хотите, чтобы каждая страница имела свой специфичный для страницы JavaScript в одном месте, а затем весь общий JavaScript в большом файле. Если вы используете SRC для большого файла, браузеры ваших пользователей будут кэшировать код JavaScript при первой загрузке, и размер файла не будет проблемой. Если вас это особенно беспокоит, вы можете упаковать / минимизировать исходный код JavaScript в «распространяемую» форму и сэкономить несколько килобайт.

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

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

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

Я бы организовал js в разные файлы во время разработки, т.е. е. один для общих вещей и один для каждой модели, а затем объедините их в один файл в процессе сборки. На этом этапе вы также должны выполнить сжатие.

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

ОБНОВЛЕНИЕ: я объясню это немного подробнее в сообщение в блоге.

Предполагая, что вы имеете в виду страницы .aspx, когда указываете «HTML-страницы», вот что я делаю:

Скажем, у меня есть страница с именем foo.aspx, и у меня есть специальный JavaScript для нее. Я называю файл .js foo.aspx.js. Затем я использую что-то подобное в классе страницы основание (т.е. все мои страницы наследуются от этого класса):

protected override void OnLoad(EventArgs e)
{
   base.OnLoad(e);
   string possiblePageSpecificJavaScriptFile = string.Format("{0}.js", this.TemplateControl.AppRelativeVirtualPath);
   if (File.Exists(Server.MapPath(possiblePageSpecificJavaScriptFile)) == true)
   {
      string absolutePath = possiblePageSpecificJavaScriptFile.Replace("~", Request.ApplicationPath);
      absolutePath = string.Format("/{0}", absolutePath.TrimStart('/'));
      Page.ClientScript.RegisterClientScriptInclude(absolutePath, absolutePath);
   }
}

Итак, для каждой страницы в моем приложении он будет искать файл * .aspx.js, который соответствует имени страницы (в нашем примере, foo.aspx.js), и размещать внутри отображаемой страницы тег скрипта, ссылающийся на Это. (Код после base.OnLoad(e); лучше всего извлечь, я просто стараюсь сделать его как можно короче!)

Чтобы завершить это, у меня есть взлом реестра, который приведет к сворачиванию любых файлов * .aspx.js под страницей * .aspx в обозревателе решений Visual Studio (т.е. он будет скрываться под страницей, как и * .aspx. cs файл). В зависимости от версии Visual Studio, которую вы используете, способ взлома реестра отличается. Вот пара, которую я использую с Windows XP (я не знаю, отличаются ли они для Vista, потому что я не использую Vista) - скопируйте каждый в текстовый файл и переименуйте его с расширением .reg, затем выполните файл:

Visual Studio 2005

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@ = ""

Visual Studio 2008

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@ = ""

Возможно, вам потребуется перезагрузить компьютер, прежде чем они вступят в силу. Кроме того, вложение будет иметь место только для вновь добавленных файлов .js. Любые из имеющихся у вас файлов с уже названными * .aspx.js можно вложить, повторно добавив их в проект или вручную изменив XML файла .csproj.

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

Используйте «пространство имен» вместе со структурой папок:

альтернативный текст http://www.roosteronacid.com/js.jpg

Все, что вам нужно сделать, это включить Base.js, поскольку этот файл устанавливает все пространства имен. И файл (ы) .js (классы), которые вы хотите использовать на данной странице.

Что касается скриптов для конкретных страниц, я обычно называю скрипт в соответствии со страницами ASPX / HTML:

Default.aspx
Default.aspx.js

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