Какой хороший способ организовать внешний файл (ы) JavaScript? - PullRequest
5 голосов
/ 26 сентября 2008

В веб-приложении ASP.NET с большим количеством HTML-страниц накапливается множество встроенных функций JavaScript. Каков хороший план для организации их во внешние файлы? Большинство функций относятся к той странице, для которой они написаны, но некоторые относятся ко всему приложению.

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

Каково мышление в этом отношении?

Ответы [ 7 ]

8 голосов
/ 26 сентября 2008

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

5 голосов
/ 26 сентября 2008

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

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

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

5 голосов
/ 26 сентября 2008

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

2 голосов
/ 26 сентября 2008

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

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

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

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\8.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\9.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""

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

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

1 голос
/ 27 сентября 2008

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

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

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

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

Default.aspx
Default.aspx.js
1 голос
/ 26 сентября 2008

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

0 голосов
/ 27 сентября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...