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

[Kaamo]

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?

Exactement.

Par contre quel est le type d'objet retourné par $()?

Cela retourne un objet ayant toutes les méthodes définies dans le jQuery.prototype (alias jQuery.fn).

Pour le reste tu as bien compris le principe.

[danielhagnoul]

Bien entendu on manipule un objet (jQuery ou son alias $) et ses méthodes, c'est bien ce que j'ai écrit :

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
window.jQuery = function( p1, p2 ){
    return new window.jQuery.prototype.init( p1, p2 ); // jQuery.fn est l'alias de window.jQuery.prototype
};

[Faror]

Bonsoir à tous.

Merci pour vos réponses, j'étais dans l'incapacité de répondre avant.
Alors voila j'ai continué mon "expédition" pour comprendre jQuery et plus généralement le JavaScript avec le DOM et j'ai plusieurs nouvelles questions.

A l'aide de plusieurs console.log placés partout dans le script de jQuery, j'ai remarqué que l'objet que renvoie jQuery est toujours de ce type:

Object[ ]

.
En effet par exemple avec ce script:

Code :

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

1
2
3
4
5
6
7
8
9
 
<p>aaaaaaaaa</p>
<p>bbbbbbbbb</p>
 
<div>bbbbb</div>
<script src="myJquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
console.log($('p'));
<script>

console.log($('p')) m'affiche : Object[p p].
En disséquant un peu le script de jQuery j'ai reussi à me rendre compte que c'est la fonction jQuery pushStack() qui mets les "p" dans Object[ ] même si je ne comprends pas à quoi sert exactement cette fonction et ce qu'elle fait.
D'où la multitude de questions qui se pressent sur mes lèvres:

1)Object[ ]

D'abord comment avoir (dans le DOM que j'examine avec Firebug) un objet Object[ ]? En effet j'ai essayé toutes les possibilités de création d'objets, en ajoutant des attributs, des méthodes, des méthodes dans le prototype, etc. mais à chaque fois j'avais un objet sous cette forme:
Object { attr="instance", methode=function(), methode1=function()}. Et donc quel est la différence entre un objet comme Object { attr="instance", methode=function(), methode1=function()} et comme Object[ ]?



2)this comme retour d'un constructeur

En approfondissant, j'ai vu que dans mon tout premier code :

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;
     ............................

que la méthode init() du prototype de jQuery agit comme un constructeur, elle fixe des propriétés au nouvel objet retourné, comportement tout a fait normal et logique d'un constructeur, mais j'ai vu qu'elle retourne aussi un this à la fin. Pourtant lorsque je supprime ce "return this", jQuery fonctionne toujours aussi bien. En faisant quelques recherches j'ai trouvé que lorsque un constructeur retourne une valeur, si cette valeur est un objet, l’opérateur new retournera cet objet plutot que l'objet (instance) nouvellement créée. Source: points 11.2.2 et 13.2.2 de ECMAScript 5:

11.2.2 The new Operator

The production NewExpression : new NewExpression is evaluated as follows:

Let ref be the result of evaluating NewExpression.
Let constructor be GetValue(ref).
If Type(constructor) is not Object, throw a TypeError exception.
If constructor does not implement the [[Construct]] internal method, throw a TypeError exception.
Return the result of calling the [[Construct]] internal method on constructor, providing no arguments (that is, an empty list of arguments).

13.2.2 [[Construct]]

When the [[Construct]] internal method for a Function object F is called with a possibly empty list of arguments, the following steps are taken:

Let obj be a newly created native ECMAScript object.
Set all the internal methods of obj as specified in 8.12.
Set the [[Class]] internal property of obj to "Object".
Set the [[Extensible]] internal property of obj to true.
Let proto be the value of calling the [[Get]] internal property of F with argument "prototype".
If Type(proto) is Object, set the [[Prototype]] internal property of obj to proto.
If Type(proto) is not Object, set the [[Prototype]] internal property of obj to the standard built-in Object prototype object as described in 15.2.4.
Let result be the result of calling the [[Call]] internal property of F, providing obj as the this value and providing the argument list passed into [[Construct]] as args.
If Type(result) is Object then return result.
Return obj.

Donc en sachant cela, j'ai aussi vu que c'est une méthode souvent utilisée de retournée this à la fin du constructeur, mais alors pourquoi? A quoi cela sert-il comme this représente l'instance qui est en train d'être crée, ça sert à quoi de la retournée?

J'espère avoir été clair, dites le moi si vous ne comprenez pas quelque chose et je vous remercie d'avance pour votre temps de lecture et de réponse.

Cordialement,

Faror