Carnet Wiki

Une structure pour JS

Version 4 — April 2015 JLuc

Placido : Voici une proposition d’organisation de vos fonctions js.

////////////
// App.js  // 
//////////// 
// 
//   Voici  une  proposition  d'organisation  de  vos  fonctions  js ;
@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@//  Il s'agit d'une approche globale, qui privilégie le chargement   
//   d'un seul fichier, quelque soit la page du site.
 
@@@SPIP_DIFF2@@@// 
@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@//  La première partie du fichier contient vos fonctions.
@@@SPIP_DIFF2@@@//  La seconde partie les rassemble en séquence d'éxécution 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.
@@@SPIP_DIFF1@@@@@@SPIP_DIFF2@@@// 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;
//     }
// ?>
//
//
//
 
 
@@@SPIP_DIFF72@@@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 <code>head

comme bon vous semble, par exemple via insert_head ainsi :

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

//////////////
// App.
js //
/////////////
();</code >

var App = function ()

var fn1 = function()

var App = function ()
var fn1 = function ()
////exemple de test conditionnel : s’applique uniquement sur la page sommaire
if ($(’.page_sommaire’).length == ) return false;
console . log(’fn1’);

console.log(’fn1’);

var fn2 = function()
console.log(’fn2’);

var fn3 = function()
console . log(’fn3’);

console.log(’fn3’);

//#######################
return

///////////////////////////////////
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();

;
();</
code >