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 photos, 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 dans 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;
}
//
//
si
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
fichier
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.