Carnet Wiki

Une structure pour JS

Version 2 — April 2015 YannX

////////////
// App.js //
////////////
//
// 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'éxecution.
//
// App.init() -> lancement initial
// App.initAjax() -> exécution à la suite d'un rechargement ajax de spip
// App.foo() -> un autre ensemble de fonctions à éxécuter ensemble
//
// Les conditions de traitement des éléments se font dans les fonctions.
// NB :  (vous pouvez remplacer les occurences 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 :
// ex : via insert_head
//
// <?php
//     function prefixe_insert_head($flux){
//         $js = find_in_path('js/App.js');
//         $flux .= "\n<script src='$js'></script>\n";
//         $flux .= "<script>$(function(){App.init();});</script>\n";
//         return $flux;
//     }
// ?>
//
//
//
 
var App = function () {
 
 
    var fn1 = function() {
 
        ////exemple de test conditionnel : s'applique uniquement sur la page sommaire
        if ($('.page_sommaire').length == 0) return false;
 
        console.log('fn1');
 
    }
 
    var fn2 = function()  {
 
        console.log('fn2');
 
    }
 
 
    var fn3 = function() {
 
        console.log('fn3');
 
    }
 
//#######################
    return {
 
        // au chargement initial
        init: function () {
            fn1();
            fn2();
 
            // surveiller le rechargement ajax
            if (typeof onAjaxLoad === 'function') {
                onAjaxLoad(App.initAjax());
            } 
        },
 
        // ici les fonctions "ajaxproof"
        initAjax: function () {
            //console.log('xhr');
            fn3();
        }
    };
 
}();