Discussion :

[Faror]

Bonjour à tous!

Voila j'essaye de comprendre un peu comment fonctionne jQuery, mais je me pose une grosse question concernant le debut du code.

Voici le début:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },
 
...
 
jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
        // Make sure that a selection was provided
        selector = selector || document;
     ............................

Je ne comprends pas comment l'objet jQuery est créé. En effet, d'après le code source il représente une fonction qui renvoie un objet mais celui-ci fait appel a jQuery.fn, donc j'ai l'impression qu'il s'appel lui même, pour moi ca se mord la queue.

A moins que le jQuery du jQuery.fn soit différent du jQuery

De plus si j'ai bein compris, jQuery ou $ est une fonction qui renvoie un objet. D'ailleurs on peut ajouter des attributs ou méthodes a jQuery, comme ceci:
$.monAttribut, $.maMethode.
Pourtant lorsque je test le "$" avec alert(), comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert($);

j'obtiens le code source de la fonction jQuery que j'ai mis au dessus c'est à dire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

Donc "$" est juste vu comme une fonction pourtant on peut lui appliquer des attributs comme je l'ai montré ci-dessus. D'où mon autre question quelle partie du code de jQuery permet de passer de "$" (ou jQuery) fonction à $ objet selon les cas?

Quelqu'un peut-il m'expliquer svp?

J'ai éssayé d'être le plus clair possible, si vous ne comprenez pas ce que je n'ai pas compris n'hésitez pas à me le dire.


Merci

[danielhagnoul]

Bonjour

Si vous regardez la chose sans vous encombrer des alias, on voit la déclaration ultra classique d'une fonction et de son prototype. Tout ce qui n'est pas déclaré par un var est automatiquement rattaché à l'objet global "window", ici on le déclare explicitement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
window.jQuery = function(){
 
};
 
window.jQuery.prototype = {
 
};

La déclaration des propriétés et l'initialisation sont déportées dans une méthode du prototype, la méthode init().

Normalement on devrait créer un nouvel objet avec new : var MonJQ = new window.jQuery();.

Mais on nous évite la chose lors de l'appel à la méthode init().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
window.jQuery = function( p1, p2 ){
    return new window.jQuery.prototype.init( p1, p2 );
};
 
window.jQuery.prototype = {
    "init" : function( p1, p2 ){
        // le code d'initialisation
 
        return this; // en simplifiant
    }
};

Pour plus d'information, il faudra trouver quelqu'un d'autre, car je n'ai jamais étudié le code interne de jQuery.

[Kaamo]

$ est un raccourci de window.jQuery. Étant une fonction (typeof $; // "function"), Javascript va implicitement convertir cette "fonction" en chaine de caractère pour l'affichage. Pour ce faire il va utiliser la méthode toString() qui, par défaut, affiche le corps de la fonction. Il est donc normal que alert($) affiche le corps de la fonction, $ étant de type "function".
Afin d'obtenir l'objet renvoyé par cette fonction, il faut exécuter la fonction avec les parenthèses ().
Essaie donc cela : console.log($()) et constate le résultat dans la console.

D'où mon autre question quelle partie du code de jQuery permet de passer de "$" (ou jQuery) fonction à $ objet selon les cas?

Il ne faut pas oublier qu'en Javascript, tout est objet (ou presque). De ce fait, les fonctions sont des objets. Donc, $ est un objet, rien ne nous empêche de lui ajouter une propriété / méthode "à la volée" :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$.dvp = function(){ 
  alert('coucou DVP'); 
}
$.dvp(); // alert "coucou DVP"

Afin d'afficher tout ce que contient l'objet jQuery(ou $), fais un console.log(window). Dans la console, déploie le puis déploie la propriété $ qu'il contient. Tu auras accès à toutes ses propriétés / méthodes.

Espérant avoir apporté quelques réponses

[Faror]

Bonjour merci beaucoup pour vos réponses. Comme d'habitude ce forum est vraiment excellent.

Alors danielhagnoul j'avais à peu prêt compris tout cela. En fait la vraie notion que je ne comprends pas c'est que dans le code source on declarer la fonction (ou objet) jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
},

et la declaration n'est même pas encore finie, comme on n'a pas refermer la fonction qu'on est en train de déclarer qu'on appel deja le propre prototype de la variable/fonction/objet jQuery . Or pour moi comme la delcaration de jQuery est toujours en cours, on ne peut pas appeler son proptotype (ou une fonction de son prototype) car jQuery n'existe pas encore comme sa déclaration est toujours en cours. Je ne sais pas si vous avez compris ce que je veux dire?
Et de plus comment le script peut-il aller chercher le prototype qui est déclaré plus bas dans le code source?

Oui Kaamo apres quelques recherches j'ai bien vu qu'en fait en JS toute fonction est un objet de type Function et j'avais aussi remarqué qu'il faut utiliser $() pour avoir l'objet jQuery sans n'avoir rien sélectionné. Mais cela signifie donc que dans le code il doit forcément y avoir un passage qui indique que lorsqu'on tape $.monAttribut cela revient à tapper $().monAttribut, non?

[Kaamo]

et la declaration n'est même pas encore finie, comme on n'a pas refermer la fonction qu'on est en train de déclarer qu'on appel deja le propre prototype de la variable/fonction/objet jQuery . Or pour moi comme la delcaration de jQuery est toujours en cours, on ne peut pas appeler son proptotype (ou une fonction de son prototype) car jQuery n'existe pas encore comme sa déclaration est toujours en cours.

La fonction que tu cites ci - dessus sera exécutée quand jQuery (ou $) sera appelé (avec les parenthèses ()). Or, elle sera exécutée quand jQuery aura fini d'être déclaré.

Et de plus comment le script peut-il aller chercher le prototype qui est déclaré plus bas dans le code source?

Parce qu'à l'exécution de la fonction, ce qui est déclaré plus bas fera partie intégrante de l'objet jQuery. Exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 // Définition d'une fonction qui retourne le résultat d'une de ses méthodes
var objTest = function(){
  return objTest.fonctionDeTest();
};
// Définition de l'autre méthode
objTest.fonctionDeTest = function() {
  return 'Je suis déclarée plus bas ! Et alors ?';
}
 
console.log(objTest()); // Je suis déclarée plus bas ! Et alors ?

lorsqu'on tape $.monAttribut cela revient à tapper $().monAttribut, non?

Non.
$.monAttribut permet d'accéder à l'attribut monAttribut de $.
$().monAttribut permet d'accéder à l'attribut monAttribut de l'objet retourné par la fonction $(). Ce qui n'est pas la même chose. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
//objTest est une fonction qui retourne un objet
var objTest = function() {
  return new objTest.fabriqueAutreObjTest();
};
// on peut lui ajouter n'importe quelle autre propriété
objTest.monAttribut = "Mon attribut";
// La fonction qui permet de retourner un objet
objTest.fabriqueAutreObjTest = function() {
  return { monAttribut: "Autre attribut" }
};
 
console.log(objTest.monAttribut); // Mon attribut
console.log(objTest().monAttribut); // Autre attribut (monAttribut de l'objet retourné par la fonction)

Pour simplifier le fichier jQuery, voici ce qui se passe, tu devrais y voir plus clair. (Attention, à ne pas exécuter avec un "vrai" jQuery

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// On "encapsule" les déclarations de jQuery dans une IIFE (Immediately Invoked Function Expression). Cela permet d'exécuter le code dans un environnement neutre.
(function( window, undefined ) {
 
  // Déclaration de jQuery, qui est une fonction
  var jQuery = function( quelquUn ) {
    return new jQuery.fn.init( quelquUn  );
  };
 
  // Ajout des méthodes
  jQuery.fn = jQuery.prototype = {
    init: function( quelquUn  ) {
      console.log("Bonjour " + quelquUn);
    },
    direAuRevoir: function( quelquUn ) {
      console.log("Au revoir " + quelquUn);
    }
  };
 
  // Création des raccourcis
  window.jQuery = window.$ = jQuery;
 
})( window ); // fin de la IIFE
$('DVP'); // Bonjour DVP
$.fn.direAuRevoir('DVP'); // Au revoir DVP

[Faror]

Ah d'accord!
Donc pour:

Non.
$.monAttribut permet d'accéder à l'attribut monAttribut de $.
$().monAttribut permet d'accéder à l'attribut monAttribut de l'objet retourné par la fonction $(). Ce qui n'est pas la même chose. Exemple :

En fait les fonctions comme $.ajax() ou autre, ici ajax est un attribut ou plutot une méthode de la fonction (qui est aussi un objet, car en JS toute fonction est objet et même tout est objet) jQuery, c'est bien cela?
Par contre quel est le type d'objet retourné par $()?

Sinon pour:

La fonction que tu cites ci - dessus sera exécutée quand jQuery (ou $) sera appelé (avec les parenthèses ()). Or, elle sera exécutée quand jQuery aura fini d'être déclaré.

Si je comprends bien, la fonction est d'abord déclarée, donc on peut dire qu'elle est d'abord lue par l’interpréteur, donc l’interpréteur en lisant cette fonction voit qu'il va devoir ajouter au prototype de la fonction qu'il est en train de déclarer les méthodes init, etc... et qu'il va devoir retourner le resultat de init et ensuite seulement il l’exécute c'est cela?
Mais pour pouvoir aller chercher le prototype plus bas ce la signifie que l’interpréteur lit d'abord une fois tout le script c'est cela?

Merci