web-dev-qa-db-fra.com

Comment RequireJS fonctionne-t-il avec plusieurs pages et vues partielles?

Je regarde RequireJS mais je ne suis pas certain de certaines choses.

Je comprends comment je peux charger toutes mes dépendances avec main.js. Mais dois-je ajouter une logique pour travailler avec ces dépendances dans main.js?

Tome, main.js ressemble à un état document.ready et vous y entrez la logique lorsque le document est chargé, non?

Et pour d'autres pages et vues partielles, dois-je créer plusieurs main.js ou puis-je simplement référencer des fonctions chargées dans des dépendances à partir des vues dans un <script> par exemple?

asp.net-mvcrequirejs
41
Johan Alkstål

Mise à jour - J'ai ajouté un exemple d'utilisation de RequireJS avec des composants HTML modulaires. Exemple d'outil de construction inclus - https://github.com/simonsmith/modular-html-requirejs

J'ai également écrit un article de blog à ce sujet - http://simonsmith.io/modular-html-components-with-requirejs/

L'approche consistant à utiliser simplement main.js car tout est probablement plus adapté à une application d'une seule page .

La façon dont j'ai géré cette situation est d'inclure uniquement le JS commun à l'échelle du site dans le main.js fichier:

Sur chaque page: 

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

L'exemple ci-dessus n'est qu'une des deux façons de le gérer. Remarque la différence entre le chargement d'un fichier JavaScript simple et d'un module .

Une règle générale que je suis est de garder tous les modules réutilisables (ou les classes si cela est plus facile à conceptualiser) dans un define avec leurs propres dépendances, etc., puis d'utiliser require pour récupérer ces modules, utiliser leurs méthodes ou interagir avec eux d'une manière ou d'une autre.

L'utilisation de ce modèle nécessitera presque certainement l'utilisation du module domReady c'est un plugin séparé pour RequireJS . Utilisez ceci au lieu d'une fonction prête dans jQuery par exemple, car cela permet aux modules de commencer le téléchargement avant que le DOM soit prêt, ce qui réduit l'attente de l'exécution de votre code.

Modifier Vous pouvez souhaiter voir un autre exemple d'application multi-page dans le dépôt RequireJS

93
Simon Smith

J'ai récemment effectué un exercice de configuration de RequrieJS avec une optimisation de build automatique dans une application ASP.NET MVC. Il y a beaucoup d'articles de blog utiles comme Simon qui sont une excellente référence. Du point de vue ASP.NET, l'un des plus utiles que j'ai trouvé en termes de configuration de l'optimiseur RequireJS pour les applications ASP.NET multi-pages était Faire en sorte que RequireJS joue Nice avec ASP.NET MVC .

En utilisant les excellentes informations déjà disponibles, j'ai créé ma propre exemple ASP.NET MVC RequireJS sur GitHub . Une grande partie de ce qui est inclus est similaire aux exemples déjà disponibles, mais pour résoudre le problème des vues partielles, et les dépendances multi-pages nécessitent une approche légèrement différente.

_ Layout.cshtml

La différence la plus notable par rapport aux exemples existants est la création d'un RequireViewPage qui expose les méthodes pour transmettre les données de configuration à RequrieJS ainsi que les dépendances spécifiques à la page de référence.

Ainsi, votre _Layout.cshtml ressemblera beaucoup à ce que vous attendez avec:

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

Vues et partiels

Pour câbler les vues (et dans mon cas, les modèles de vues knockout), n fragment de script supplémentaire a été ajouté au bas de _Layout.cshtml comme suit

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

Cela garantira que pour toute dépendance de vue, le module principal a été chargé (en supposant que les dépendances pour principal ont été définies dans main.js, puis permet de câbler des dépendances spécifiques à la vue via des attributs de données.

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

Pour une explication complète de la conception et des choix, consultez le LISEZMOI sur GitHub

3
Chris Baxter