Как RequireJS работает с несколькими страницами и частичными представлениями?

Я ищу RequireJS, но я не уверен в некоторых вещах.

Я понимаю, как я могу загрузить все мои зависимости с помощью main.js. Но мне нужно добавить любую логику для работы с этими зависимостями в main.js?

Мне, main.js кажется состояние document.ready, и вы вводите логику там, когда документ загружен, правильно?

И для других страниц и частичных представлений мне нужно создать несколько main.js или я могу просто ссылаться на загруженные функции в зависимостях от представлений в <script> например?

Ответ 1

Обновить - Я добавил пример использования RequireJS с модульными компонентами HTML. Пример встроенного инструмента - https://github.com/simonsmith/modular-html-requirejs

Я также написал статью в блоге об этом - http://simonsmith.io/modular-html-components-with-requirejs/

Подход только при использовании main.js для всего вероятно, больше подходит для одностраничного приложения.

То, как я справлялся с этой ситуацией, заключается только в том, чтобы включить только общий JS-сайт в файле main.js:

На каждой странице:

<script src="require.js" data-main="main"></script>

main.js

require.config({
// config options
});

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) {
    // Modules that do stuff on every page are instantiated here 
});

page1.html

<script>
    require(['scripts/page1']);
</script>

page1.js

require(['jquery', 'page1Module'], function($, module){
    // page1 specific stuff here
});

Приведенный выше пример является лишь одним из нескольких способов его обработки. Обратите внимание на разницу между загрузкой простого файла JavaScript и модуля.

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

Использование этого шаблона почти наверняка потребует использования модуля domReady который является отдельным плагином для RequireJS. Используйте вместо готовой функции в jQuery, например, поскольку он позволяет загружать модули до того, как DOM готов, что уменьшает ожидание вашего кода выполнить.

Изменить. Вы можете пожелать увидеть другой пример многостраничного приложения в репозитории RequireJS

Ответ 2

Недавно я прошел настройку RequrieJS с автоматической оптимизацией сборки в приложении ASP.NET MVC. Есть много полезных статей в блогах, таких как Саймон, которые являются отличной ссылкой. С точки зрения ASP.NET одним из самых полезных, что я нашел в плане настройки оптимизатора RequireJS для многостраничных приложений ASP.NET, было Создание RequireJS с хорошим ASP.NET MVC.

Используя отличную информацию, уже внедрив мой собственный пример ASP.NET MVC RequireJS на GitHub. Многое из того, что включено, похоже на примеры, уже присутствующие там, однако для решения проблемы частичных представлений и для многостраничных зависимостей запросов я использовал несколько иной подход.

_Layout.cshtml

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

Итак, ваш _Layout.cshtml будет похож на то, что вы ожидаете:

<head>
    ...
    @RenderModuleConfig()
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
    ...

Виды и частицы

Чтобы подключить просмотры (и в моем случае модели с нокаутом), добавлен дополнительный фрагмент script в нижней части _Layout.cshtml следующим образом

    ...
    @RenderSection("scripts", required: false)
    <script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>

Это обеспечит, чтобы для любой зависимости вида был загружен основной модуль (предполагая, что зависимости для основного определены в main.js, а затем позволяет связать определенные зависимости вида через атрибуты данных.

<div data-require="@MainModule"> ... </div>
<div data-require="@Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>

Для полного объяснения дизайна и выбора см. README на GitHub