III. Les principales méthodes▲
III-A. Point de départ : la Classe▲
Commençons par créer notre Classe. Nous avons dit qu'elle devait être abstraite, ce qui donne le fichier JS_Generate :
III-B. Savoir si le script est déjà utilisé dans la page▲
Maintenant, notre souci va être d'éviter d'inclure plusieurs fois les mêmes fichiers (css, js) ou de faire plusieurs fois les mêmes initialisations de scripts dans nos pages.
Nous allons créer une méthode isAlreadyUsed qui nous retournera un booléen pour indiquer cet état :
abstract class JS_Generate {
/*
* VARIABLES
* ____________________________________________ */
private static $_isAlreadyUsed = false; // le script a-t-il déjà été appelé dans la page
/*
* ACCESSEURS
* ____________________________________________ */
/** savoir si le script a déjà été appelé dans la page
* @return boolean isAlreadyUsed
* ------------------------------------------------------
*/
public static function isAlreadyUsed () {
return self::$_isAlreadyUsed;
}
/** dire si le script a déjà été appelé dans la page
* @param boolean isAlreadyUsed
* ------------------------------------------------------
*/
public static function setIsAlreadyUsed($var = null) {
if(is_null($var) || empty($var) || !is_bool($var)) return false;
self::$_isAlreadyUsed = $var;
}
}On peut noter que la variable est Static ainsi que ses accesseurs. En effet, cette variable sera commune à toutes les instances de la classe utilisée.
III-C. Gérer les variables de script et les identifiants des objets HTML▲
Imaginons une galerie photo, constituée d'un album de 10 photos, toutes zoomables. Chaque identifiant étant unique, comment gérer les identifiants, directement depuis PHP, de telle sorte qu'il n'y ait jamais de doublon ?
Ajoutons une nouvelle variable, $_id, que nous incrémenterons à chaque utilisation.
abstract class JS_Generate {
/*
* VARIABLES
* ____________________________________________ */
private static $_id = 0; // facile la gestion des id pour les objets HTML
/*
* ACCESSEURS
* ____________________________________________ */
/** obtenir l'id du dernier objet HTML utilisé
* @return string _id
* ------------------------------------------------------
*/
public static function getId () {
return self::$_id;
}
/** définir l'id du dernier objet HTML utilisé
* @param string _id
* ------------------------------------------------------
*/
public static function setId($var = null) {
if(is_null($var) || empty($var) || !is_string($var)) return false;
self::$_id = $var;
}
}Les paramètres de scripts (couleurs, effets…) doivent être aussi gérés par notre classe. Nous pouvons utiliser un tableau qui contiendra l'ensemble de ces variables de configuration.
Parmi ces paramètres de script, il est fréquent de devoir déclarer le répertoire contenant les fichiers du script lors de l'initialisation. Nous allons donc ajouter une variable $_dir pour gérer ce répertoire.
abstract class JS_Generate {
/*
* VARIABLES
* ____________________________________________ */
private static $_config = array(); // configuration commune à tous les objets de la classe
private static $_dir = 0; // chemin par défaut à utiliser
/*
* ACCESSEURS
* ____________________________________________ */
/**
* récupérer le répertoire du script
* @return string le répertoire du script
* ------------------------------------------------------
*/
public static function getDir () {
return self::$_dir;
}
/** définir le répertoire du script
* @param string le répertoire du script
* ------------------------------------------------------
*/
public static function setDir($var = null) {
if(is_null($var) || empty($var) || !is_string($var)) return false;
self::$_dir = $var;
}
/** obtenir la configuration courante
* @return string element de la config
* ------------------------------------------------------
*/
public static function getConfig ($elem) {
$tConfig = self::$_config;
if(!isset($tConfig[$elem])) return false;
return $tConfig[$elem];
}
/** définir la configuration courante
* @param string _config
* ------------------------------------------------------
*/
public static function setConfig($elem = null, $var = null) {
if(is_null($elem) || empty($elem) || !is_string($elem)) return false;
if(is_null($var) || empty($var) || !is_string($var)) return false;
self::$_config[$elem] = $var;
}
}III-D. Modifier le Buffer de sortie pour ajouter un script▲
Nous allons voir maintenant un ensemble de fonctions très pratiques : les fonctions de gestion du Buffer de sortie, préfixées ob_.
Grâce à elles, nous allons bloquer le flux de sortie (l'écriture de la page) avec ob_start(), pour pouvoir modifier ce contenu, et l'envoyer au poste client au moment de notre choix (ob_flush).
Créons notre page index.php, avec ce contrôle de flux :
//
// démarrer la temporisation du flux de sortie
ob_start();
//
// fichier requis
require_once 'class/JS_Generate.php';
//
// notre page simplifiée (sans doctype, etc.)
echo '<html><head></head><body>';Nous allons pouvoir maintenant contrôler notre flux de manière efficace.
Il peut être utile d'insérer un script complet entre les balises head de la page. La méthode addScript qui suit est un exemple simple de modification du buffer :
/**
* ajouter un script spécifique à notre header
* @param string contenu
* @param boolean échec / réussite
* ------------------------------------------------------
*/
public static function addScript($strInsert) {
//
// contrôler
if(is_null($strInsert) || empty($strInsert) || !is_string($strInsert)) return false;
//
// ajouter les balises scripts
$strInsert = '<script language="javascript" type="text/javascript">'
. $strInsert
. '</script>';
//
// chercher dans le buffer de sortie la balise </head
// on va ajouter juste avant notre appel de fichier
$content = ob_get_contents();
$regex = "/\<\/head\>/si";
$content = preg_replace($regex, $strInsert."\n".'</head>', $content);
//
// vider le contenu du buffer pour ajouter celui qu'on vient de modifier (variable $content);
ob_clean();
echo $content;
//
// confirmer que tout s'est bien passé
return true;
}Notez qu'il aurait été possible d'utiliser la fonction ob_get_clean() à la place de la fonction ob_get_content(), ce qui nous aurait permis d'éviter de faire appel à la fonction ob_clean(). Toutefois, dans notre exemple nous procéderons à chaque fois en deux temps (récupérer puis vider le buffer) pour une plus grande clarté.
III-E. Modifier le buffer de sortie pour ajouter un appel de fichier▲
Créons une méthode qui va utiliser cette gestion du buffer pour ajouter un fichier à l'entête de la page HTML.
/**
* ajouter un fichier js à notre entete
* @param string url du fichier
* @param boolean échec / réussite
* ------------------------------------------------------
*/
public static function addFile($url) {
//
// contrôler
if(is_null($url) || empty($url) || !is_string($url)) return false;
$strInsert = "\n".'<script language="javascript" type="text/javascript" src="'.$url.'"></script>';
//
// chercher dans le buffer de sortie la balise head
// on va ajouter juste avant notre appel de fichier
$content = ob_get_contents();
$regex = "/\<\/head\>/si";
$content = preg_replace($regex, $strInsert."\n".'</head>', $content);
//
// vider le contenu du buffer pour ajouter celui qu'on vient de modifier (variable $content);
ob_clean();
echo $content;
//
// confirmer que tout s'est bien passé
return true;
}C'est bien, mais on pourrait vouloir plus. Par exemple, ajouter un fichier .CSS plutôt qu'un fichier .JS.
Utilisons pour cela les fonctions parse_url et pathinfo, qui vont nous permettre de récupérer l'extension de l'url passée en paramètres.
/**
* ajouter un fichier css / js à notre entete
* @param string url du fichier
* @param boolean échec / réussite
* ------------------------------------------------------
*/
public static function addFile($url) {
//
// contrôler
if(is_null($url) || empty($url) || !is_string($url)) return false;
//
// récupérer l'extension :
// extraire le path de l'url
if(!$tUrl = parse_url($url)) die('url invalide !');
$path = $tUrl['path'];
// extraire l'extension du path
$tPath = pathinfo($path);
$extension = strtolower($tPath['extension']);
//
// selon l'extension, construire la chaine $strInsert que l'on va insérer dans le HTML
$strInsert = null;
switch ($extension) {
default:
die('extension non traitée !');
break;
case 'js':
$strInsert = "\n".'<script language="javascript" type="text/javascript" src="'.$url.'"></script>';
break;
case 'css':
//$strInsert = "\n".'<style type="text/css" media="print">@import url('.$url.');</style>';
$strInsert = "\n".'<link rel="stylesheet" type="text/css" href="'.$url.'" />';
break;
}
//
// s'il n'y a rien à insérer, inutile d'aller plus loin
if(is_null($strInsert) || empty($strInsert)) return false;
//
// chercher dans le buffer de sortie la balise </head
// on va ajouter juste avant notre appel de fichier
$content = ob_get_contents();
$regex = "/\<\/head\>/si";
$content = preg_replace($regex, $strInsert."\n".'</head>', $content);
//
// vider le contenu du buffer pour ajouter celui qu'on vient de modifier (variable $content);
ob_clean();
echo $content;
//
// ajouter le fichier à la liste des fichiers déjà ajoutés au code
self::addFileUsed ($url);
//
// confirmer que tout s'est bien passé
return true;
}III-F. Conclusion sur la classe principale▲
Nous voilà donc avec une Classe fonctionnelle et générique, qui devrait nous permettre d'insérer n'importe quelle sorte de scripts javascript dans nos pages, facilement et rapidement, ce à n'importe quel endroit de notre code (du moment que les balises head ont été envoyées).
Vous pouvez retrouver la Classe complète en dernière page de ce tutoriel.
Examinons maintenant ce que cette classe peut nous permettre de faire.