Переход к состоянию без сохранения и динамическая загрузка скриптов

Question

Что я хочу знать, так это то, что я подхожу к этому с правильного угла.

У меня есть приложение asp.net, которое я создаю.Я использую мастер-страницу для общего вида приложения (ниже вы можете увидеть код).

Я бы хотел, чтобы система меню использовала динамическую загрузку, например, функцию .load() jQuery для загрузки контента.Это хорошо, и у меня есть это вниз.Функция .load() использует innerHTML для накачки этого контента на страницу.Это проблема, если на этой странице вы хотите загрузить специфичные для модуля скрипты и стили.

Мой вопрос в том, как в такой среде, как вы, ребята, загружаете свои скрипты для этих модулей?Должен ли я загружать каждый скрипт при начальной загрузке приложения?Это приложение никогда не будет «таким большим», однако я хочу убедиться, что делаю это правильно на всякий случай.

MasterSheet

<div id="primaryNavigation">
    <ul>
        <li class="current"><a href="../Default.aspx">Main</a></li>
        <li><a href="../Modules/Page1.aspx">Some Overview</a></li>
        <li><a href="../Modules/Page2.aspx">Reporting</a></li>
        <li><a href="../Modules/Page3.aspx">More Reporting</a></li>
        <li><a href="../Modules/Page4.aspx">About</a></li>
    </ul>
</div>

<div id="mainContentContainer">
    <asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>

ПримерМодуль внутри тега Content

<div id="container"> 
    Inside a page

    <script id="scriptToLoad" type="text/javascript">
      alert('Something');

      head.ready(function () { console.log('please print'); }); 
    </script>

</div>

<div id="includeScripts">
    ../Files/Javascript/SomeModuleSpecificJs.js
    ../Files/Javascript/SomeModuleSpecificJs1.js    
</div>

Моя идея состояла в том, чтобы установить div в каждом модуле, который бы имел идентификатор «includeScripts», и загрузить их из метода в пределах главной таблицы, напримерэтот.Этот метод работает (очевидно, нуждается в некоторой настройке), однако, если пользователь продолжает нажимать на модули, в конце концов, каждый файл будет загружен.Если это так, я мог бы также загрузить их все в мастер-лист.

JS для запуска при загрузке MasterPage

$navigation = $("#primaryNavigation").delegate('ul li a', 'click', function () {
                    $('#primaryNavigation').find('li').removeClass('current');
                    $(this).parent().addClass('current');

                    $('#mainContentContainer').load($(this).attr('href') + ' #container');

// Obviously this would overwrite the content from the container, this is merely proof of concept
                $('#mainContentContainer').load($(this).attr('href') + ' #includeScripts');

                    var jsArray = $('#includeScripts').text().trim().split("\n");

                    $.each(jsArray, function (index, value) {
                        $.getScript(value);
                    });

                    return false;
                });

Answer 1

Я не знаю о .load(), но JQuery .html(), .append() и некоторые другие связанные функции автоматически запускают любые теги сценария, которые они находят в данном HTML.Если load() не сделает этого за вас, вместо этого должно быть достаточно просто использовать $.get(..., function(){$('#myElement').html();});.Вы даже можете написать собственное расширение специально для этой цели.

Таблицы стилей могут быть другой историей.Обычно я просто использовал одну таблицу стилей для каждой страницы.

Редактировать

Я потратил еще немного времени на чтение вашего вопроса и понял, что не ответил на него полностью.

Должен ли я загружать каждый скрипт при начальной загрузке приложения?

Это действительно зависит от размера ваших скриптов и того, как вы ожидаете, что пользователи будут взаимодействовать с вашей системой.В этом семинаре люди, создавшие Google Wave, рассказывают о том, как они решили эту проблему.В какой-то момент оратор говорит: «Воспринимаемая задержка - это самая важная вещь для оптимизации».Проблема заключалась в том, что в ранней версии их файл javascript (оптимизированный и скомпилированный GWT) занимал несколько мегабайт.Людям с медленным соединением (например, браузером сотового телефона) придется долго ждать загрузки всего этого кода, прежде чем они смогут увидеть, что находится в их Входящих.Их решение состояло в том, чтобы создать «точки разделения» в их коде, чтобы он мог загружаться порциями.Код, необходимый для отображения папки «Входящие», может быть загружен первым, тогда как панель «Контакты» может подождать, пока пользователь не нажмет «Контакты».

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

• Выборка данных, которые вам не нужны, и
• Слишком много запросов HTTP

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

Поскольку вы говорите:

Это приложение никогда не будет "таким большим"

... Я предполагаю, что вы, скорее всего, попадете в последнюю категорию (слишком много HTTP-запросов).Лучшее, что можно сделать в этом случае:

1. Используйте инструмент, подобный Chirpy , чтобы объединить все ваши файлы javascript в один файл (который можно автоматически свернуть, если не в DebugРежим).
2. Если в вашем приложении есть страница входа, которая не использует все эти функции javascript, добавьте тег script для этого файла javascript внизу страницы входа в систему, чтобы браузер пользователя загрузил этот файл.сцены, пока пользователь занят вводом своего имени пользователя и пароля.Главная страница для остальной части сайта должна просто включать файл сценария один раз в стандартный тег script.
3. Убедитесь, что правила кэширования вашего сайта настроены правильно, чтобы браузер пользователя запрашивал этот файл только один раз..
4. Убедитесь, что ваш сайт настроен на сжатие этого файла javascript, так как javascript (особенно уменьшенный javascript) прекрасно подходит для сжатия gzip.

Как только вы это сделаете, выдолжен обнаружить, что при загрузке вашего файла javascript «ощутимая задержка» отсутствует.

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

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