[RequireJS] Mismatch incompréhensible

**Darkaurora** · 26/05/2015, 10h48

Bonjour j'ai quelque difficulté à bien comprendre le fonctionnement de requireJS.

Je suis actuellement sur une version de développement d'un projet et en chargeant les différents modules et libs dont j'ai besoin je me rend compte qu'il assez compliqué d'arrivé à un résultat stable:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
require([
    './common'
], function () {
    log('Require & common loaded');
    var moduleCollection = ['api', 'layout'],
        allElements = document.getElementsByTagName('script');
 
    require(moduleCollection, function () {
        moduleCollection = [];
        [].slice.call(allElements).forEach(function (item) {
            if (item.getAttribute('data-page') !== null) {
                moduleCollection.push(item.getAttribute('data-page'));
            }
        });
        require(moduleCollection);
    });
});

Le code ci dessus me renvoi toujours une erreur "mismatch" impossible de comprendre pourquoi ni le comment du pourquoi, cependant et c'est maintenant que je trouve ça drôle:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
require([
    './common'
], function () {
    log('Require & common loaded');
    var moduleCollection = ['api', 'layout'],
        allElements = document.getElementsByTagName('script');
 
    require(moduleCollection, function () {
        moduleCollection = [];
        [].slice.call(allElements).forEach(function (item) {
            if (item.getAttribute('data-page') !== null) {
                moduleCollection.push(item.getAttribute('data-page'));
            }
        });
        while(true) {
            try {
                requirejs(moduleCollection);
                break;
            } catch (error) {
                console.log(error);
                continue;
            }
        }
 
    });
});

Je passe une a deux fois dans le catch mais à la deuxième ou troisième fois mon module se charge bien. J'ai bien compris le côté asynchrone de requireJS en revanche l'identification des modules et le contexte d’exécution est toujours un mystère, ajouter à cela jQuery + des plugins + une api perso + les scripts de chaque page cela me donne un bon gros tas de soucis à gérer pour des problèmes qui n'apparaissent qu'une fois sur deux, sans aucun critère de ressemblance, bref sans comprendre ce qu'il se passe derrière.

D'avance merci pour votre aide

**SylvainPV** · 27/05/2015, 09h27

Pourquoi ne pas récupérer ensuite les dépendances chargées en nommant les arguments du callback ?

Et c'est quoi ces data-page sur les balises <script> ? Tu es sûr de bien avoir ce qu'il faut dedans ? Je ne vois pas l'intérêt d'utiliser RequireJS si c'est pour continuer de mettre des <script> partout dans le HTML.

**Darkaurora** · 27/05/2015, 10h08

Pour te répondre précisément j'ai au minimum 2 script chargés normalement et au maximum 4 voici l'archi:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/SagaV2/js/initLoggers.js"></script>
[...]
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltips and media queries -->
    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
        <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
<body>
<script type="text/javascript">
        var Path = <?= Router::url('/'); ?>
    </script>
 
    <?php
    $attr   = [];
    $prefix = '';
    $rootJs = WWW_ROOT . 'js'. DS . 'app' . DS;
    if (isset($this->request->params['prefix'])) {
        $prefix = $this->request->params['prefix'];
        $rootJs .= $prefix . DS;
    }
    if (file_exists($rootJs . $script . '.js')) {
        $attr['data-page'] = Router::url("/js/app/$prefix/$script.js");
    }
    if (file_exists($rootJs . DS . $scriptPath . DS . $script . '.js')) {
        $attr['data-page'] = Router::url("/js/app/$prefix/$scriptPath/$script.js");
    }
    echo $this->Html->script('vendor/require', ['data-main' => Router::url('/js/app')] + $attr);
    echo $this->fetch('script');
    ?>
</body>
</html>

Au risque de te décevoir

j'ai besoin de chargé avant tout le script initLoggers qui me renseigne sur les délai de chargement de la page et des ses éléments. Je suis certain que tu ne m'en voudras pas d'utiliser html5shiv et respond dans le head.

Ensuite j'ai une balise script servant uniquement à déclarer des variables utiles pour les scripts qui seront chargés par la suite.

Enfin et pour répondre précisément à ta question, l'attribut data-page contient le chemin relatif du script que ma page appelle. Je travail avec un framework PHP (cakePHP) à chaque pages sont chargés requireJS avec sa config, puis les modules API et Layout et enfin le script de la page appelante.

J'ai néanmoins trouvé la solution à mon problème puisqu'un des scripts que j'utilise définissait des modules dans tous les sens sans se soucier des répercussions.

Bref avant de marquer le sujet comme résolu j'aimerais avoir l'avis de sylvainPV ou d'autres sur l'architecture employée savoir si je ne fait pas fausse route.

**SylvainPV** · 27/05/2015, 12h56

Donc tu gères les dépendances de plein de façons différentes: un peu dans le <head>, un peu avec PHP et le reste avec RequireJS. Honnêtement je ne vois pas ce que ça t'apporte à part compliquer les choses. Je n'ai jamais utilisé RequireJS ailleurs que dans une Single Page Application. D'après moi, si on recharge l'intégralité des scripts à chaque page, la modularisation offerte par RequireJS n'a plus aucun intérêt.

Si j'ai bien suivi, ce data-page est présent uniquement sur le main script de requireJS. Alors pourquoi la boucle, pourquoi moduleCollection ? Et pourquoi ne pas simplement gérer ces dépendances par page dans le main script ? Je ne vois pas où tu veux venir en utilisant RequireJS de la sorte.

**Darkaurora** · 27/05/2015, 18h20

Donc requireJS n'est pas prévu pour la gestion multi page ? En gros je devrais revenir à la déclaration des scripts du layout sur le layout et de chaque script dont la page visité dépend.

Pour te répondre c'est vrai que la boucle n'a aucun intérêt, je devrais récupérer directement la valeur de l'attribut, ou placer cette variable ailleurs, cependant je suis déçu de savoir que requireJS n'a d'intérêt que sur une single page app.

Edit: Pour ce qui est des modules (qui ne sont pas du tout déclarer comme tel d'ailleurs) html5shiv et respond, nous sommes d'accord qu'ils doivent être chargés (selon les cas et le navigateur) avant l'affichage du HTML et donc il ne peuvent être gérer comme des modules par requireJS non ?

**SylvainPV** · 29/05/2015, 00h11

Une Single Page App c'est un site web où le routage et la navigation sont assurés en JavaScript (avec AJAX, l'API history etc...). Ça ne veut pas dire qu'il n'y a qu'une seule page sur le site (page au sens tel que perçu par l'utilisateur en tout cas).

Pour ce qui est des modules (qui ne sont pas du tout déclarer comme tel d'ailleurs) html5shiv et respond, nous sommes d'accord qu'ils doivent être chargés (selon les cas et le navigateur) avant l'affichage du HTML et donc il ne peuvent être gérer comme des modules par requireJS non ?

Pas forcément. Sur un de mes projets pros, on se sert de RequireJS pour charger des vues Backbone avec des templates handlebars. C'est un combo de technos assez populaire. Donc tout est chargé en AMD et le HTML des pages est composé par Backbone et handlebars en JS une fois les dépendances de la page chargées, ce qui fait que les shims HTML/CSS comme html5shiv et respond peuvent parfaitement être chargées comme dépendances de la vue.

En fait c'est juste une question de cohérence. RequireJS c'est de la définition asynchrone de modules, ça sert à éviter le blocage au chargement des pages causé par les requêtes synchrones des nombreux scripts que nécessitent tes pages. Or dans ton cas tu as gardé quelques requêtes synchrones et toutes les requêtes sont relancées à chaque changement de page. C'est un peu comme offrir des chaussures de sport à une tortue (désolé pour les métaphores, la fatigue)

**Darkaurora** · 29/05/2015, 10h36

Je vais reformuler ma question autrement, dans le cas d'un projet PHP/HTML/JS je suis bien contraint de charger certains scripts hors requireJS. Evidemment une App full JS je ne me poserai pas la question, la il s'agit de charger des pages avec du PHP et non du JS.

Donc pour un projet PHP/HTML/JS il ne sert à rien d'utiliser requireJS car je fait de manière asynchrone ce que je pourrais faire de manière synchrone ?

**SylvainPV** · 29/05/2015, 21h17

Non PHP n'est pas le sujet. Peu importe le langage serveur que tu utilises, du coté client tu es libre d'utiliser AJAX ou non. Et inversement, peu importe la manière dont on lance la requête côté client (AJAX ou <script>), PHP peut gérer cette requête et sa réponse côté serveur. C'est tout à fait possible de faire une Single Page App qui charge en AJAX des pages qui sont produites par ton framework PHP.

**Darkaurora** · 29/05/2015, 22h57

Ok mais dans mais cas il s'agit d'une application classique qui n'utilise ajax que pour éviter de casser certains flux. Donc si il y a navigation classique entre les pages requireJS n'est pas la meilleure solution donc.

En tout cas merci pour ces éclaircissements sujet résolu.

[RequireJS] Mismatch incompréhensible

Outils

Discussions similaires

Partager

Partager