Paramètre d'initialisation du constructeur jQuery Analysis

Paramètre d'initialisation du constructeur jQuery Analysis_jquery

WBOY

Libérer： 2016-05-16 15:59:28

original

1341 Les gens l'ont consulté

Dans mon dernier essai, j'ai analysé le constructeur de jQuery. Il existe une méthode prototype init dans l'objet jQuery, qui est le véritable constructeur. L'objet prototype d'init maintient une relation de référence avec l'objet prototype de jQuery afin que init soit. L'instance peut appeler normalement les méthodes prototypes de jQuery, comme s'il s'agissait d'une instance de jQuery. Jetons un coup d'œil à la façon dont le constructeur init en coulisses est écrit :

init: function( selector, context, rootjQuery ) {

...

}

Copier après la connexion

Vous pouvez voir que cette méthode accepte 3 paramètres, les deux premiers paramètres sont passés par la méthode jQuery

var jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

},

Copier après la connexion

Le sélecteur peut en principe saisir n'importe quelle valeur, mais toutes les valeurs ne sont pas significatives. Seuls les éléments DOM, les chaînes, les fonctions, les objets jQuery et les objets JavaScript ordinaires sont valides. Ce paramètre est généralement renseigné mais non. une erreur sera signalée si vous ne le remplissez pas

Copier le code Le code est le suivant :

console.log($());

//[constructeur : fonction, init : fonction, sélecteur : "", jquery : "1.7.1", taille : fonction…]

Le contexte peut être transmis en tant que contexte d'exécution ou portée d'exécution, ou il peut être transmis dans l'un des éléments DOM, des objets jQuery et des objets JavaScript ordinaires

Paramètre rootjQuery : objet jQuery contenant l'objet document, utilisé lorsque document.getElementById() ne parvient pas à trouver, le sélecteur est une expression de sélecteur et aucun contexte n'est spécifié, et le sélecteur est une fonction, il s'agit en fait de $(document).

Ce qui suit est divisé en 12 situations et discuté une à une selon différents paramètres

1.selector peut être converti en false

// Handle $(""), $(null), or $(undefined)

if ( !selector ) {

return this;

}

Copier après la connexion

Les commentaires dans le code source ont été rédigés très clairement. Dans ces trois situations, revenez directement sans aucun traitement

2. Le sélecteur de paramètres est un élément DOM

Par exemple : $(document)

// Handle $(DOMElement)

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

Copier après la connexion

Tant qu'il s'agit d'un élément dom, il doit avoir un type de nœud, puis transformer ce nœud en premier élément de l'objet jquery et l'attribuer au contexte. L'attribut length est l'attribut prototype de jQuery et sa valeur par défaut est 0.

// La longueur par défaut d'un objet jQuery est 0

longueur : 0,
Une fois qu'il y a un élément ici, remplacez l'attribut length par 1. Le retour de cette opération fait que le résultat de l'exécution de la fonction reste un objet jQuery, de sorte que les appels en chaîne comme $(document).each() puissent être implémentés. L'objet final obtenu est similaire à {0:document,context:document,length:1....}. En fait, toutes les situations finiront par devenir des objets sous cette forme, à l'exception des propriétés et méthodes du prototype jQuery. disposés dans l'ordre par chiffres arabes, nous pouvons donc utiliser le formulaire $(selector)[0] au lieu de $(selector).get(0) pour obtenir l'objet DOM. Par exemple :

<!doctype html>

<html>

  <head>

   <title></title>

  </head>

  <body>

    <div></div>

    <div></div>

    <div></div>

  </body>

  <script src='jquery-1.7.1.js'></script>

  <script>

   console.log($('div'));

/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]

0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
  </script>

</html>

Copier après la connexion

3. Le paramètre est la chaîne spéciale "body"

Comme il n'y a qu'un seul élément body dans un objet document, il est répertorié séparément pour le traitement

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

Copier après la connexion

Il y a ici trois conditions qui doivent être remplies en même temps. Je ne comprends pas très bien la deuxième condition selon laquelle il ne doit pas y avoir de contexte. Une méthode d'écriture apparemment normale telle que $('body',document) le sera également. être « ignoré » par cette situation »

 console.log($('body',document));

 /*

 jQuery.fn.jQuery.init[1]

0: body

context: document

length: 1

prevObject: jQuery.fn.jQuery.init[1]

selector: "body"

__proto__: jQuery[0]

*/

Copier après la connexion

Bien que le résultat soit le même que $('body'), il est traité comme deux situations. Cela peut être dû au fait que body n'a qu'un seul contexte et qu'il ne peut être qu'un document, il n'est pas nécessaire de l'ajouter. vous devez juger si le contexte est un document. La troisième condition est de garantir que document.body doit exister. Alors dans quelles circonstances les deux premières conditions seront-elles remplies mais document.body n'existe pas ? La première est que lorsque le code js est chargé avant le code html, c'est une erreur que font souvent les débutants. Habituellement on doit écrire :

$(function(){...})

$(document).ready(function(){...})

En fait, ces deux éléments sont identiques et appellent la même méthode. Le DOM chargera cette partie et l'analysera plus tard. Pour cela nous pouvons faire un code html de test comme suit :

<!doctype html>
 
<html>
 
  <head>
 
   <title></title>
 
    <script src='jquery-1.7.1.js'></script>
 
   <script>
 
       $('body')
 
  </script>
 
  </head>
 
  <body>
 
    <div></div>
 
    <div></div>
 
    <div></div>
 
  </body>
 
</html>

Copier après la connexion

Ensuite, affichez le sélecteur, le contexte et le document.body dans le code source jQuery

console.log(selector+context+document.body);

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

Copier après la connexion

Bien que nous n'en ayons écrit qu'un, il a en fait été exécuté quatre fois. Ce n'est que la dernière fois que nous l'avons appelé. Le dernier résultat était bodyundefinednull. À ce stade, les deux premiers sont satisfaits, mais le dernier est nul. . Rappelez-vous que dans la première architecture globale de jQuery, undefined sera réécrit, donc document.body sera-t-il réécrit comme null ? Lorsque j'essaie de modifier le code, une erreur sera signalée. Il semble que ce ne soit pas possible. Alors cette condition est d'empêcher l'exécution sans charger le html

Le quatrième type concerne les chaînes autres que les situations de chaînes mentionnées ci-dessus. Nous laisserons plus de situations dans le prochain article.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.