Le mécanisme d’import de fichiers javascript dans un fichier javascript va permettre de les découper en fichiers spécifiques, pour rationaliser les données chargées, nous allons utiliser les imports dynamiques ce qui nous permettra d’importer les fichiers à la demande en fonction des besoins.

En premier nous allons ajouter 4 variables aux contrôleurs :

• $name : recevant le nom du contrôleur
• $context : recevant back ou front (les fichiers js ayant été placés dans un sous répertoire de resources correspondant à leur contexte)
• $js_exists : recevant un entier indiquant que le fichier javascript spécifique du contrôleur existe ou non.
• $css_exists : recevant un entier indiquant que le fichier CSS spécifique du contrôleur existe ou non.

Ces données seront passées à la vue grâce à ce que nous avons vu dans cet article, nous allons y recevoir les informations dans un JSON :

{"controller":"rights","context":"back","js_exists":"1","css_exists":"0"}

Ensuite, dans la vue principale, après avoir décodé le JSON, nous allons définir les variables javascript dont nous nous servirons :

<!-- Inline javascript -->

<script>

var controller = '{{ $global_parameters->controller }}';

var context = '{{ $global_parameters->context }}';

var js_exists= {{ $global_parameters->js_exists }};

var css_exists= {{ $global_parameters->css_exists }};

</script>

Dans le fichier app.js, nous allons gérer l’import dynamiquement :

// Elements js with async function to get needed imports

var controller_functions = null;

if (js_exists) {

controller_functions = await import('./'+context+'/'+controller);

}

Ce code va nous permettre de récupérer dans l’objet controller_functions l’ensemble des fonctions et variables exportées par ce dernier, par exemple :

export let name = 'rights';

export function replaceChecked() {

// Replace checked attributes per property

$('input.checked').each(function() {

$(this).removeClass('checked').prop('checked', 'checked');

});

}

function test() {

alert('toto');

}

A noter, la fonction test n’étant pas exportée, elle sera utilisable uniquement à partir d’une fonction incluse dans le fichier.

Maintenant, nous pouvons appeler les fonctions importées en les contextualisant :

// Execute sub functions depending on controller

if (controller_functions) {

if (controller_functions.name == 'profiles') {

controller_functions.bindProfileUpdate(Fancybox);

}

if (controller_functions.name == 'rights') {

controller_functions.replaceChecked();

...

}

}

Ainsi, si le nom du contrôleur est profiles, on exécutera la fonction bindProfileUpdate, sinon pour rights ce sera replaceChecked … Il est possible d’effectuer les tests différemment en testant l’existence d’une fonction d’un objet … Chacun fera comme il préfère.

Encore un sujet sans trop de difficulté mais qui permet de contextualiser les fichiers chargés afin de ne pas surcharger les pages.

A noter que pour importer des fichiers CSS en fonction du contexte, on peut procéder de la même manière en ajoutant dans le fichier app.js :

if (css_exists) {

import('../css/'+context+'/'+controller+'.css');

}

On peut bien entendu faire un test afin de charger les fichiers CSS en fonction du contexte et/ou du contrôleur.