Maison  >  Article  >  interface Web  >  Interprétation du code source du sélecteur jQuery (6) : sélecteur Sizzle correspondant à la logique Analysis_jquery

Interprétation du code source du sélecteur jQuery (6) : sélecteur Sizzle correspondant à la logique Analysis_jquery

WBOY
WBOYoriginal
2016-05-16 16:06:441121parcourir

J'ai récemment lu des articles d'analyse sur Sizzle sur Internet. Quant à l'ordre de correspondance, on dit souvent que la méthode de correspondance inversée de droite à gauche est utilisée, mais les détails spécifiques ne sont pas introduits en détail, ou simplement comme si. mes articles précédents, Le code est présenté en détail ligne par ligne, mais le concept global fait défaut. Voici une explication globale de la logique de correspondance (résultats précompilés) de la version jQuery-1.10.2 de Sizzle dans laquelle je n'entrerai pas trop. beaucoup de détails ici.

Le processus de correspondance de Sizzle utilise une version améliorée basée sur la méthode de correspondance inversée de droite à gauche. Après tout, la recherche HTML est différente de la correspondance de texte. Elle a donc son propre côté unique. Permettez-moi d'abord de préciser que le sélecteur de relation mentionné ci-dessous fait référence au sélecteur Combinator du W3C. Parce que je pense que le sélecteur de relation de nom est plus proche de la signification réelle que les autres, je l'ai donc nommé ainsi.

1. Présentez brièvement les deux fonctions principales compilées et exécutées par Sizzle :

a) matcherFromTokens - Génère une fonction d'exécution pour un sélecteur de bloc. Le soi-disant sélecteur de bloc est une chaîne de sélection qui ne contient pas de séparation par des virgules.

b) matcherFromGroupMatchers - la fonction d'exécution finale qui génère différents sélecteurs de blocs. Cette fonction est également responsable du filtrage des objets en double à partir des résultats finaux.

2. La fonction matcherFromTokens génère différentes fonctions d'exécution pour différents types de sélecteurs. S'il contient une pseudo-classe, setMatcher est renvoyé, sinon elementMatcher est renvoyé. Le code distingue setMatcher et elementMatcher en identifiant si le matcher contient l'attribut expando :

a) Pour les sélecteurs non pseudo-classes et non relationnels, les fonctions d'exécution sont générées directement de gauche à droite, et chaque fonction existe en tant qu'élément différent du même tableau de matchers.

b) Pour le sélecteur de relation, les matchers générés précédemment seront poussés dans un nouveau tableau de matchers.

c) Pour le sélecteur de pseudo-classe, une fonction d'exécution sera générée via la fonction setMatcher Lors de l'appel de setMatcher, six paramètres seront transmis, à savoir preFilter, selector, matcher, postFilter, postFinder et postSelector.

PreFilter est la fonction finale traitée par la fonction elementMatcher sur le tableau matchers généré avant d'exécuter la fonction setMatcher. elementMatcher(matchers) renverra une nouvelle fonction qui exécute chaque fonction d'élément matchers de l'arrière vers l'avant ;.

selector est la chaîne de sélection correspondant aux matchers

;

matcher est la fonction de correspondance de la pseudo-classe elle-même

PostFilter est la fonction de correspondance correspondant à la chaîne de sélection entre la pseudo-classe et le premier symbole de pseudo-classe ou de relation. C'est le résultat de retour de la fonction matcherFromTokens imbriquée ;

PostFinder est la fonction de correspondance générée par tous les sélecteurs après le sélecteur correspondant postFilter. C'est également le résultat de retour de la fonction matcherFromTokens imbriquée ;

PostSelector est la chaîne de sélection correspondant à postFinder.

d) S'il n'y a pas de pseudo-classe dans la chaîne de sélection, alors la fonction de correspondance finale générée par elementMatcher(matchers) sera renvoyée.

Comme le montre l'introduction ci-dessus, il existe une relation imbriquée entre les fonctions d'exécution générées. En termes simples, setMatcher contient des matchers et la fonction de correspondance de sélecteur relationnel contient des fonctions de correspondance de sélecteur non-pseudo-classe et non relationnelle.

3. Introduction au processus d'exécution :

a) Fonction d'exécution du sélecteur de bloc d'exécution :

Pour elementMatcher, il est exécuté en séquence de l'extérieur vers l'intérieur et d'arrière en avant, c'est-à-dire du tableau le plus externe au tableau le plus interne. Dans le même tableau, il est exécuté en séquence du dernier élément au premier. élément.

Pour setMatcher, obtenez d'abord le résultat correspondant basé sur preFilter et selector ; puis exécutez la fonction matcher pour obtenir le résultat correspondant, puis exécutez la fonction postFilter, et enfin, obtenez le résultat correspondant basé sur postFinder et postSelector ;

c) Après avoir exécuté la fonction d'exécution de chaque sélecteur de bloc dans l'ordre, filtrez les données en double et renvoyez le résultat.

Après avoir lu le processus général ci-dessus, il devrait être plus facile à comprendre en examinant l'introduction détaillée de chaque méthode. Bien entendu, certains détails ne sont pas abordés ici, tels que la génération de l'ensemble de résultats initial (graine) et l'exécution de la fonction qui en résulte. détails logiques. Différences, etc.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn