web-dev-qa-db-fra.com

Quelle est la source de la fonction de requête du sélecteur de signe double dans Chrome / Firefox?

Vérifiez ce jsfiddle , et jetez un œil à la console. $$ n'est pas défini. Maintenant, ouvrez une toute nouvelle fenêtre et entrez $$ dans une console. Il définit une fonction pour obtenir un tableau (de type jquery) de tous les éléments dom qui correspondent au sélecteur:

> $$

bound: function () {
  return document.querySelectorAll.apply(document, arguments)
}

Est-ce que cela est ajouté par les outils de développement? Il est également présent lors de l'utilisation de Firebug dans Firefox. Est-il utilisé en interne par les outils eux-mêmes?

javascriptgoogle-chromefirebuggoogle-chrome-devtools
60
minikomi

Eh bien, Firebug Lite définit ceci comme:

this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc)

( Voir la source .)

La version complète de Firebug définit ceci comme

this.$$ = function(selector)
{
    return FBL.getElementsBySelector(baseWindow.document, selector);
};

C'est en fait documenté et oui, il est également utilisé en interne.

Je suppose donc que Google Chrome fait quelque chose de similaire.

32
ziesemer

Premièrement, tout dans la réponse de ziesemer est correct.

Il s'agit de l'historique JavaScript

Il existe un certain nombre de fonctions disponibles dans les différentes consoles devtools du navigateur. Collectivement, les méthodes sont connues sous le nom de API de ligne de commande (hors ligne) ( nouveau lien ) et elles proviennent toutes de Firebug. De nos jours, nous avons juste la parité entre les navigateurs parce que Firebug a fait les choses (principalement) correctement.

Mais à l'époque de la création de Firebug (2006), la bibliothèque JavaScript qui faisait fureur était Prototype.js. $ A été saisi par Prototype pour du sucre syntaxique getElementById() car c'était certainement le moyen le plus rapide pour saisir des éléments et la technique d'acquisition d'éléments la plus courante à l'époque. C'était un tel gain de temps, les gens utilisaient toute la bibliothèque juste pour le $ sugar .

Début 2006, jQuery a ensuite fait ses débuts et utilisé $() pour sélectionner n'importe quel élément basé sur le sélecteur css. Comme le montre mon ancien CSS Selector Engine Timeline , Prototype a ensuite suivi quatre jours plus tard avec le leur, mais comme $ Était déjà pris dans leur bibliothèque, ils sont simplement passés à $$(), qui est maintenant connue sous le nom de la fonction bling-bling .

Firebug tirait donc parti de l'API de Prototype car il régnait toujours sur le roost en 2006. Maintenant, à l'époque de jQuery et de l'alias post-jQuery comme window.$ = document.querySelectorAll.bind(document), nous le voyons comme assez en arrière. Fait intéressant, lorsque Opera a révolutionné Dragonfly, ses outils de développement de navigateur, ils ont choisi $ Comme alias querySelectorAll, pour mieux correspondre aux pratiques actuelles, ce que l'OMI fait un un peu plus de sens.

Oh vous vouliez dire le code source ..

Maintenant, vous avez posé des questions sur la "source" du $$ Dans DevTools et j'ai expliqué l'historique. Oups! Quant à savoir pourquoi il est disponible dans votre console ... toutes les méthodes API de ligne de commande (hors ligne) ( nouveau lien ) ne sont disponibles que dans le contexte de votre console , tout comme les méthodes pratiques.

copy() est l'un de mes favoris; Je le couvre et d'autres dans cette console JavaScript pour les utilisateurs avancés vidéo.

189
Paul Irish