Carnet Wiki

Une structure pour JS

Version 4 — Avril 2015 — JLuc

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

////////////
// 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'é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.
// 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;
//     }
// ?>
//
//
//


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 >

Retour à la version courante

Toutes les versions

Se connecter