Création d'un plugin jQuery sur plusieurs fichiers

Cher ami,

Après plusieurs tests infructueux et quelque recherche par-ci par-là, je me suis décidé à vous demander votre aide.

Je ne sais pas si c'est très intelligent, mais je désire réaliser un plugin jQuery implémenté sur plusieurs fichiers. Ma première question est la suivante : est-ce possible ?

Je dois dire que je le pense pas. J'ai déjà essayé beaucoup de solution, mais aucune ne m'a satisfait. Franchement, je ne sais plus où chercher. Je ne veux pas vous prendre votre temps en vous demandant un exemple, mais pourriez-vous m'aiguiller et me donner un tuto pour créer ce plugin sur plusieurs fichier js ?

Mon but est de réaliser par exemple, une classe qui contient des propriétés et des méthodes. Ainsi, les méthodes seront implémentées dans un fichier et la déclaration de la classe et ses propriétés dans un autre fichier afin de facilité la lecture et les modifications ultérieures.

Je me suis déjà penché sur les espace de noms en jQuery et sur la méthode $.extend, mais comme je débute, j'ai du mal à me faire une idée.

Merci beaucoup pour votre aide !

John

Salut,

Il te faudra nécessairement inclure tous les fichiers dans le document HTML. On ne peux pas inclure un fichier ou déclarer une classe comme on le ferait avec un langage serveur ou compilé.
Tu peux le faire directement dans le code HTML ou en Javascript avant la déclaration de ton objet. La deuxième option rendrait l'intégration de l'extension plus aisée.

Voilà une partie de mon code. Il est organisé en trois fichier *.js comme ceci :

1. jquery.test.dec.js : Déclaration de la classe
2. jquery.test.imp.js : Implémentation de la fonction "Init" pour le mement
3. jquery.test.main.js : Point d'entrée du plugin

Et voici le contenu des trois fichiers différents :
Fichier : jquery.test.dec.js

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

(function($) { alert ("jquery.test.dec.js"); $.fn.extend ( { test : function () { var User = $.inherit( { __constructor : function(name) { this.name = name; },   role: function() { return "utilisateur"; },   info: function() { alert(this.name + " est un " + this.role()); } });   var Admin = $.inherit(User, { role : function() { return "administrateur"; } });   Init = function (){}; // Je sais pas si c'est utile... } }); })(jQuery);

---

Fichier : jquery.test.imp.js

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

(function($) { alert ("jQuery.test.imp.js"); $.fn.test = $.extend (this, { Init : function () { alert ("test.Init"); var utilisateur = new User("John"); var administrateur = new Admin("Smith");   utilisateur.info(); // John est un utilisateur administrateur.info(); // Smith est un administrateur } }); })(jQuery);

---

Fichier : jquery.test.main.js

Code:

---

1 2 3 4 5 6 7 8

(function ($) { $.fn.test = function () { Init(); }; })(jQuery);

---

Remarque : Pour ceux qui l'ont remarqué, oui j'utilise la bibliothèque inherit ainsi que l'exemple qu'ils donnent sur leur site... C'est juste pour tester avant de me lancer dans le projet plus vaste.

Mon problème :
Quand je charge la page, tous les fichiers sont parcouru, il n'y pas le moindre accrochage. Ensuite, je fais appelle à :

Code:

---

1 2 3 4 5

$(document).ready (function () { $.fn.test(); });

---

Dans mon fichier html. Le problème se trouve ici, il afficher bien une alerte avec test.Init, mais il ne peut pas déclarer l'objet User et Admin, je ne sais pas pour quelle raison.

Pouvez-vous m'aider svp ? Merci infiniement !

Merci franculo_caoulene pour ta réponse rapide, j'avais commencé la rédaction du complément avant que tu réponde.... désolé.

Je comprends mieux maintenant la différence entre js et le C, lol.
Pour ce qui est de mes fichiers, je les inclus tous dans ma page html, dans l'en-tête et dans l'ordre que j'ai soulevé. en mettant bien entendu le fichier jquery avant tout les autres et le fichier inherit juste après le jquery... Mais j'ai encore une question :

Que veux-tu dire par :

Citation:

---

Tu peux le faire directement dans le code HTML ou en Javascript avant la déclaration de ton objet.

---

J'ai du mal a comprendre...

Merci beaucoup !

Avant tout appel spécifique tu peux essayer d'ajouter un élément <script> dans le DOM en utilisant document.createElement et appendChild. Au lieu d'inscrire trois fichiers dans l'entête du document, tu n'en n'inscrirais plus qu'un seul qui s'occupera d'intégrer les autres dans le DOM.

Merci beaucoup franculo_caoulene !
Je comprends mieux ce que tu veux dire et je vais tenter le coups ! Je trouve que c'est une bonne idée !

Maintenant j'ai une autre question qui me trotte dans la tête :
- Une fois que les trois fichiers sont inclus dans le DOM, comment puis-je implémenter mon code pour la création de la classe.

Comme j'ai posté ci-dessus, je voudrais séparé la déclaration d'avec l'implémentation or, j'ai quelque problème dans mon code.
Je ne sais pas comment créer une instance de la classe que j'ai implémenté dans l'espace de nom du plugin et ce dans la fonction Init de mon espace de nom. Pouvez-vous encore m'aider svp ?

(Je sais je suis chiant... et newbee... )

De retour après de longues recherches, j'ai décidé de coder tout mon plugin dans un seul fichier car c'est trop compliquer pour moi de faire autrement (je crains avoir rien compris des fonctions anonymes et autres...)

Ainsi, j'ai commencé à implémenter mon code avec des classes en jQuery, avec la librairie inheritance. J'ai créé les objets dont j'ai besoin (un seul pour commencer et j'ai bien fais... ;-) )
Malheureusement, je me heurte maintenant à un nouveau problème : je voulais utiliser une classe jQuery pour organiser toute la gestion des événements d'un type de champ dans un formulaire.

p.-e. : événements des champs textes sont focusin, focusout, keydown et keyup.

Je gère les événements de cette façon dans ma classe :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Manager : function () { for (this.m_Index=0; this.m_Index < this.m_RGYFields.length; this.m_Index++) { this.m_CurrentPictures = this.m_PicList; this.FocusIn (this.m_RGYFields[this.m_Index]); // this.FocusOut (this.m_RGYFields[this.m_Index].HTML()); this.m_CurrentPictures = this.KeyDown (this.m_RGYFields[this.m_Index].HTML()); this.m_CurrentPictures = this.KeyUp (this.m_RGYFields[this.m_Index].HTML()); } },   FocusIn : function (field) { // var Pictures = this.m_CurrentPictures; // Pictures = $.LoginifyEngine.RGYRules (Pictures, $(this).val().length); $(field.HTML()).focusin (function() { alert ("focusin"); this.RulesToHide(); }); // this.m_CurrentPictures = Pictures; },   KeyDown : function (element) { var Pictures = this.m_CurrentPictures; $(element).keydown (function () { Pictures = $.LoginifyEngine.RGYRules (Pictures, $(this).val().length); }); return Pictures; },   KeyUp : function (element) {   var Pictures = this.m_CurrentPictures; $(element).keyup (function () { Pictures = $.LoginifyEngine.RGYRules (Pictures, $(this).val().length); }); return Pictures; }, RulesToHide : function () { var i, Length;   Length = $(this.m_RGYFields[this.m_Index].HTML()).val().length; if (Length == 0) { this.m_RGYFields[this.m_Index].ShowPicture(0); } else { if (Length > 0 && Length < 8) { this.m_RGYFields[this.m_Index].ShowPicture(1); } else { this.m_RGYFields[this.m_Index].ShowPicture(2); } } },

---

Ce code ne représente qu'une petite partie du plugin mais le problème se trouve dans la fonction FocusIn (). En effet, dans cette fonction je fais appelle à la méthode RulesToHide () de ma classe par le mot clé "this". Hors, j'ai constaté que dans la fonction

Code:

---

1 2 3 4 5 6

$(field.HTML()).focusin (function() { alert ("focusin"); this.RulesToHide(); });

---

le mot clé this est attribué à l'élément DOM pointé par field.HTML().

J'ai besoin de votre aide pour comprendre et changer ce problème :
- Peut-on réassigner le this à l'instance de classe traitée ?
Sinon, quelle méthode me proposeriez-vous pour améliorer mon code ?

Merci pour votre aide future !

A bientôt !

Peut-être via :

Code:

---

1 2 3 4 5 6 7

var thisObject = this; $(field.HTML()).focusin (function() { alert ("focusin"); thisObject.RulesToHide(); });

---

Un grand merci, seriousme !

Je vais tester, je n'y avait pas pensé !

Je sais que je me suis un peu égaré pendant ce post, mais je n'avais pas bien compris le concept de fonction anonyme auto-exécutée...

J'ai maintenant mieux compris, j'ai pu trouvé mon bonheur dans les tutoriels javascript de developpez.com.

Je marque mon post comme résolu, mais en réalité, je suis partis dans une autre direction et je me suis résolu à implémenter mon plugin dans un seul et unique fichier.

Voila, je vous remerci tous pour votre aide, et je vais conserver vos idées et vos solutions !

A bientôt !