IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Adapter jQuery à vos besoins

L'espace de noms revisité

Les récentes évolutions de la bibliothèque jQuery permettent de revisiter l'espace de noms pour y inclure la personnalisation d'un clone de jQuery.
4 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

1. Introduction

Cet article se base sur l'acquis. Je vous conseille de lire ou de relire :

Lors de la lecture de la FAQ jQuery, j'attire plus particulièrement votre attention sur la partie concernant jQuery.sub().

Nous allons revisiter l'espace de noms dvjh et nous servir de jQuery.sub() pour encapsuler une version personnalisée de jQuery.

Rappel : les fenêtres de code s'ouvrent en cliquant sur le bouton placé à droite.

2. jQuery.sub()

jQuery.sub() produit un clone de l'objet jQuery, il a été créé pour deux types d'utilisations spécifiques :

  • modifier les méthodes jQuery sans détruire les méthodes d'origine ;
  • faciliter l'encapsulation et définir un espace de noms pour les plugins jQuery.

3. L'espace de noms dvjh

Nous l'écrirons donc dorénavant en utilisant un clone de jQuery :

Espace de noms dvjh
Cacher/Afficher le codeSélectionnez
1.
2.
3.
4.
5.
6.
7.
var dvjh = (function($){
     // Propriétés, méthodes et objets privés

     return {
          // Propriétés, méthodes et objets publics
     } ;
})(jQuery.sub()) ;

4. Modifier le clone de jQuery

Ajouts de méthodes (plugins) ou modification de méthodes du prototype ($.fn) du clone de l'objet jQuery.

Modification du prototype du clone
Cacher/Afficher le codeSélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
var dvjh = (function($){
     // Propriétés, méthodes et objets privés

     // Agir sur le prototype du clone de jQuery
     $.fn.extend({
          // Modifications ou ajouts
     }) ;

     return {
          // Propriétés, méthodes et objets publics
     };
})(jQuery.sub()) ;

Le code privé et le code public de l'espace de noms peuvent utiliser toutes les possibilités du clone de jQuery.

5. Rendre le $ disponible

Il y aura toujours des cas où l'on voudra faire appel au clone de jQuery à l'extérieur de la clôture.

Rendre le $ disponible
Cacher/Afficher le codeSélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
var dvjh = (function($){

     $.extend( $.fn, {
          
     }) ;

     return {
          "$": $
     };
})(jQuery.sub()) ;

Nous avons donc dvjh, qui est un objet-espace de noms et dvjh.$ qui est l'objet jQuery.sub()

Nota bene : on ne doit jamais construire l'objet dvjh avec un simple "return $;". Le risque de conflit entre le code privé et le code de jQuery.sub() est assuré !

6. Soupe de jQuery

On pourra donc avoir, dans la même page web, la version normale de jQuery ainsi qu'un ou plusieurs objets-espace de noms, chacun incorporant sa version de jQuery.

Imaginons le cas d'un plugin qui agit sur les images dont on veut tester deux versions différentes et voir le résultat sur la même page web. On aurait donc deux fois la même image avec un ID différent, deux objets-espace de noms et le code :

Soupe de jQuery
Cacher/Afficher le codeSélectionnez
1.
2.
3.
4.
$(function(){
     dvjh1.$("#imageID1").methode(params) ;
     dvjh2.$("#imageID2").methode(params) ;
}) ;

7. Exemple

J'ai bâti cet exemple avec des codes qui ont déjà été testés et publiés sur mon site ou dans la FAQ jQuery, ce qui vous permettra de comparer cette manière de faire avec les précédentes.

La modification de la méthode remove reprend le code de l'exemple 2 de Exemples d'utilisation de jQuery.sub().

Les méthodes tourne, tourneSetOptions, tourneGetOptions et l'objet privé _objTourne sont des reprises du code du plugin dvjhRotate publié dans Comment puis-je écrire un plugin ?.

La méthode ingRatio et l'objet privé _objImgRatio sont des reprises du code du plugin dvjhImgRatio publié dans Comment puis-je ajuster une image à son conteneur ?.

La méthode tooltip et l'objet privé _objTooltip sont des reprises du code du plugin dvjhTooltip publié dans Plugin dvjhTooltip.

La « fonction globale » notify et l'objet privé _objNotify sont des reprises de la « fonction globale » dvjhNotify publiée dans Plugin dvjhNotify.

Pour la présentation des plugins et de leurs options, on se référera aux publications originales.

L'exemple comprend deux fichiers : le fichier JavaScript « adapterjquery.js » qui contient l'objet-espace de noms dvjh et la page web « adapterjquery.html » qui utilise l'objet dvjh.

Fichier adapterjquery.js
Cacher/Afficher le codeSélectionnez
Fichier adapterjquery.html
Cacher/Afficher le codeSélectionnez

Pour tester l'exemple : adapterjquery.html.

N'oubliez pas d'activer les outils du développeur (F12) pour voir les informations de débogage affichées par la console.

8. Remerciements

Je remercie le correcteur Maxime Gault (_Max_) pour son excellent travail.

Je remercie Didier Mouronval (Bovino) pour ses corrections et de m'avoir fait découvrir la balise <inline>.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+