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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Question code source de jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 42
    Par défaut Question code source de jQuery
    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:
    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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre Expert
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Par défaut
    $ 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

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 42
    Par défaut
    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?

  5. #5
    Membre Expert
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Par défaut
    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

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 42
    Par défaut
    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

Discussions similaires

  1. Question sur le code source du navigateur
    Par seb1122 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 16/06/2014, 09h10
  2. Utiliser JQuery pour afficher un code source
    Par stc074 dans le forum jQuery
    Réponses: 0
    Dernier message: 09/04/2014, 20h18
  3. Comprendre le code source de jQuery
    Par boboss123 dans le forum jQuery
    Réponses: 2
    Dernier message: 02/04/2013, 09h33
  4. Question de sécurité du code source
    Par Jinen dans le forum C#
    Réponses: 0
    Dernier message: 06/02/2010, 06h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo