Carnet Wiki

Une structure pour JS

Version 7 — August 2015 — roustoubi

Placido : Voici une proposition d’organisation de vos fonctions js.
Il s’agit d’une approche globale, qui privilégie le chargement d’un seul fichier, quelque soit la page du site.

La première partie du fichier contient vos fonctions.
La seconde partie les rassemble en séquence d’éxécution.

App.init() -> lancement initial
App.reboot() -> exécution perdurante ”, qui se relance lors à la suite d’un rechargement ajax de spip

Les conditions de traitement des éléments se font dans les fonctions.
NB : vous pouvez remplacer les occurrences de ’App’ par le prefix de votre plugin par exemple.

Insérer ce fichier, ainsi que son appel dans le head comme bon vous semble, par exemple via insert_head ainsi :

<?php
function @@@SPIP_DIFF0@@@monplugin_insert_head($flux@@@SPIP_DIFF1@@@ @@@SPIP_DIFF14@@@prefixe_insert_head($flux@@@SPIP_DIFF1@@@ ){
    @@@SPIP_DIFF0@@@//  les  js  à  inclure  quelque  soit  la  page 
  $@@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@js@@@SPIP_DIFF1@@@ @@@SPIP_DIFF14@@@$js@@@SPIP_DIFF1@@@  = @@@SPIP_DIFF0@@@array@@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@(
    @@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@'App find_in_path('js/App@@@SPIP_DIFF1@@@ .@@@SPIP_DIFF0@@@js',
    //'pluginX.@@@SPIP_DIFF1@@@@@@SPIP_DIFF14@@@js');
         $flux .= "\n<script src='$js'></script>\n";
         $flux .= "<script>$(function(){App.init();});</script>\n";
         return $flux;
    }
?js ',
    @@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@);@@@SPIP_DIFF1@@@ @@@SPIP_DIFF14@@@>
@@@SPIP_DIFF1@@@ @@@SPIP_DIFF14@@@&lt;/code@@@SPIP_DIFF1@@@ @@@SPIP_DIFF14@@@>@@@SPIP_DIFF1@@@ 
 
 
@@@SPIP_DIFF78@@@foreach( $js as $script ){
    if( $path = find_in_path("javascript/$script") )
      $flux .= '<script type="text/javascript" src="'. $path .'"></script>';
  }@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF78@@@return $flux;
}
?>

//////////////
// App.js //
/////////////
 
 
var App = function () {
 
 
var fn1 = function() {
//exemple de test conditionnel : 
// fn1 s'applique uniquement sur la page sommaire
    if ($('.page_sommaire').length == ) return false;
        console.log('fn1');
    }
 
 
var fn2 = function()  {
        console.log('fn2');
    }
 
 
var fn3 = function() {
        console.log('fn3');
    }
 
 
///////////////////////////////////
    return {
        // l'ordre des fonctions importe
        init: function () {
            fn1();
            fn3();
 
 
// surveiller le rechargement ajax
            if (typeof onAjaxLoad === 'function') {
                onAjaxLoad(App.reboot);
            } 
        },
 
 
// ici les fonctions à relancer à la suite d'un rechargement ajax de SPIP
        reboot: function () {
            fn2();
        }
    };
}();