Структура файла для веб-приложения на основе JavaScript

Question

Я планирую написать веб-приложение на основе JavaScript. Мне интересно, как лучше всего реализовать это с точки зрения файловой структуры.

Существует одна главная страница (main.html), содержащая меню и основной раздел div. Это работает просто: когда пользователь нажимает на одну из ссылок в меню (например, «Страница 1»), содержимое раздела div обновляется содержимым файла page1.html. Это делается с помощью JavaScript (jquery). Если пользователь нажимает «Страница 2», содержимое файла page2.html загружается в раздел div и т. Д.

Каждая страница имеет свой собственный код JavaScript, и, поскольку я предпочитаю держать его отдельно, я реализовал своего рода «код позади», как в asp.net:

page1.html
page1.js" >
<... HTML-код ...>

page2.html
page2.js" >
<... html code ...>

Когда пользователь нажимает «Страница 1», содержимое файла page1.html загружается в основной раздел div файла main.html. Так как page1.html ссылается на page1.js, также загружается код javascript в page1.js.

Кажется, это работает нормально, но мне интересно, если это лучший способ реализовать это. В какой-то момент я думал о ссылке на все файлы javascript в main.html. Это также хорошо бы работало, но это означало бы, что все файлы javascript должны были бы быть загружены в память, даже если они не будут использоваться. При первом подходе файл javascript загружается в память только перед его фактическим использованием.

Есть идеи? Каковы «лучшие практики» для этого? Имейте в виду, что это веб-приложение (в отличие от веб-сайта). Он будет доступен через Интернет, но только для некоторых пользователей (и он будет защищен паролем), поэтому я не забочусь о SEO и т. Д.

Answer 1

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

Именно поэтому сайты, основанные на фреймах, которые были довольно популярны в течение ряда лет, почти исчезли.

Answer 2

@ porneL

существуют способы и средства заставить JS загружаться асинхронно (в частности, создавая теги скрипта), но они могут считаться небезопасными

@ OP

Я согласен с другими, что это звучит как плохая идея с точки зрения SEO и доступности, с точки зрения производительности с практической точки зрения (существуют способы начальной загрузки кода, но я думаю, что это много усилий для минимальной выгоды), и сомнительной эффективности с точки зрения разработки приложений. В качестве гипотетического упражнения я считаю, что gzip-решение от porneL лучше всего.

В принципе, я думаю, у вас возникнут проблемы с поиском лучших практик для того, что практиковали бы немногие.

Answer 3

Загрузка файлов JavaScript происходит синхронно, что негативно влияет на время загрузки страницы / воспринимаемую отзывчивость.

По этой причине я думаю, что лучше объединить все сценарии в один файл, сжать его с помощью YUI-компрессора и отправить gzipped. Таким образом, вы получите лучшее сжатие и наименьшие издержки HTTP, а кэшированный JS не будет приостанавливать загрузку других страниц.

Для динамических сценариев, специфичных для страницы, используйте in-line <script>…</script>.