Jak działa RequireJS z wieloma stronami i widokami częściowymi?

Szukam RequireJS, ale nie jestem pewien pewnych rzeczy.Jak działa RequireJS z wieloma stronami i widokami częściowymi?

Rozumiem, w jaki sposób można załadować wszystkie moje zależności z main.js. Ale czy muszę dodać jakąkolwiek logikę do pracy z tymi zależnościami w main.js?

Dla mnie, main.js wydaje się być dokumentem.właśnie tam i logujesz się tam, kiedy dokument został załadowany, prawda?

Czy dla innych stron i widoków częściowych muszę utworzyć wiele main.js lub czy mogę po prostu odwołać się do załadowanych funkcji w zależności od widoków w <script> na przykład?

Źródło

2012-05-30 Johan Alkstål

Aktualizacja - Dodałem przykład użycia RequireJS z modułowymi komponentami HTML. Budowanie przykład narzędzie zawarte - https://github.com/simonsmith/modular-html-requirejs

mam również napisane blogu na ten temat - http://simonsmith.io/modular-html-components-with-requirejs/

Podejście tylko przy użyciu main.js za wszystko jest probably more suited to a single page application.

Sposób mam obchodzić tej sytuacji jest to tylko wspólne dla całego serwisu JS w pliku main.js:

Na każdej stronie:

<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 
});

strona1.html

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

page1.js

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

Powyższy przykład jest tylko jednym z kilku sposobów, aby sobie z tym poradzić. Uwaga the difference between loading a plain JavaScript file and a module.

Zasadą śledzę to, aby wszystkie moduły wielokrotnego użytku (lub klas, jeśli to sprawia, że łatwiej konceptualizacji) wewnątrz define z własnymi zależności etc, a następnie użyć require chwycić te moduły, używać ich metod lub interakcji z w jakiś sposób.

Stosowanie tego wzoru prawie na pewno będzie wymagało użycia modułu domReady that is a separate plugin for RequireJS. Użyj na przykład tego instead of a ready function in jQuery, ponieważ pozwala modułom rozpocząć pobieranie zanim DOM jest gotowy, co zmniejsza oczekiwanie na wykonanie kodu.

Edit Możesz chcieć see another example of multi-page application w RequireJS repo

Źródło

2012-05-30 13:10:02

Dzięki za bardzo dobrze napisana odpowiedź. Mam lepsze zrozumienie, jak korzystać z RequireJS teraz. –

powyższa metoda działa doskonale na stronach, ale gdy strona ładowana przez ajax wywołuje div, moduły nie ładują .. jakiejkolwiek pomocy? –

To podejście nie wydaje się być całkowicie niezawodne, ponieważ kod w tagach skryptu wbudowanego może być wykonany przed kodem w pliku main.js, co prowadzi do sporadycznych awarii. Zobacz [tę odpowiedź] (http://stackoverflow.com/a/14345709) na powiązane pytanie. –

Niedawno przeszedł wykonywania konfigurowania RequrieJS z automatyczną optymalizacją budować w aplikacji ASP.NET MVC.Istnieje wiele przydatnych artykułów na blogu, takich jak Simon's, które stanowią świetne odniesienie. Z perspektywy ASP.NET jednym z najbardziej użytecznych w konfiguracji optymalizatora RequireJS dla wielostronicowych aplikacji ASP.NET był Making RequireJS play nice with ASP.NET MVC.

Korzystając z doskonałych informacji, przygotowałem własną wersję: ASP.NET MVC RequireJS example on GitHub. Znaczna część tego, co jest zawarte, jest podobna do przykładów już tam zawartych, jednak aby poradzić sobie z kwestią widoków cząstkowych, a zależności zależą od wielu stron, podjąłem nieco inne podejście.

_Layout.cshtml

Najbardziej zauważalną różnicą od istniejących przykładów jest stworzenie zwyczaju RequireViewPage że naraża metody przekazywania danych konfiguracyjnych do RequrieJS jak strona odniesienia specyficzne wymagają zależności.

Więc _Layout.cshtml będzie wyglądać podobnie jak to, czego można spodziewać się z:

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

Wyświetleń & partials

Aby podłączyć się widoki (iw moim przypadku widoku nokaut modelach) an additional script fragment został dodany do spodzie _Layout.cshtml następująco

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

będzie to Ensu w przypadku każdej zależności widoku moduł główny został załadowany (zakładając, że zależności dla głównej zostały zdefiniowane w main.js, a następnie pozwala na uzależnienie specyficznych zależności od połączenia za pomocą atrybutów danych.

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

Dla pełnego wyjaśnieniu projektowaniu i wyborów, patrz README on GitHub

Źródło

2014-02-19 14:25:03

Jak działa RequireJS z wieloma stronami i widokami częściowymi?

Odpowiedz

Powiązane problemy