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

Question

Cochez cette jsfiddle, et ont un look à la console. $$ n'est pas défini. Maintenant, ouvrez une fenêtre entièrement nouvelle, et entrez $$ dans une console. Il définit une fonction pour obtenir un (jquery) tableau de tous les éléments du dom qui correspondent au sélecteur:

> $$

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

Est-ce être ajoutés par les outils de Dev? Il est également présent lors de l'utilisation de Firebug dans Firefox. Il est utilisé en interne par les outils eux-mêmes?

Answer 1

Tout d'abord, tout ce qui précède est correct.

C'est tout à propos de JavaScript histoire

Il y a un certain nombre de fonctions qui sont disponibles dans diverses navigateur devtools consoles. Collectivement, les méthodes sont connus comme les API en Ligne de Commande et ils provenaient tous de Firebug. Aujourd'hui, nous avons juste la parité dans les navigateurs parce que Firebug fait les choses (pour la plupart) à droite.

Mais de retour quand Pyromane est en cours de création (2006), la bibliothèque JavaScript qui a fait fureur a été Prototype.js. $ a été saisi par le Prototype de certains getElementById() sucre syntaxique qui est certainement la façon la plus rapide à l'accaparement des éléments et le plus commun élément d'acquisition de la technique à l'époque. C'est un gain de temps, les gens utilisé l'ensemble de la bibliothèque juste pour le $ de sucre.

Au début de 2006, jQuery, a fait ses débuts et utilisé $() pour la sélection de n'importe quel élément basé sur le sélecteur css. Comme mon ancien Sélecteur CSS Moteur de Montage post montre, Prototype, suivi quatre jours plus tard, avec leur propre, mais en tant que $ a été déjà prises dans leur bibliothèque, ils ont juste allé à l' $$(), ce qui est maintenant connu comme le bling-bling de la fonction.

Donc Pyromane est en tirant parti de Prototype de l'API, comme il était encore régner en maître en 2006. Maintenant, dans les jours de jQuery et de post-jQuery aliasing comme window.$ = document.querySelectorAll.bind(document), nous constatons que c'est tout à fait en arrière. Fait intéressant, lorsque l'Opéra révolutionné la Libellule, leur navigateur outils de dev, ils ont choisi l' $ leur querySelectorAll alias, afin de mieux correspondre à nos jours, des pratiques, de l'OMI fait un peu plus de sens.

Oh, vous voulez dire le code source..

Maintenant, vous avez demandé à propos de la "source" de la $$ dans les DevTools et j'ai expliqué l'histoire. Oups! Pourquoi il est disponible dans votre console... l'ensemble de l' API en Ligne de Commande méthodes sont disponibles uniquement dans le cadre de votre console, tout comme des méthodes pratiques.

• Chrome DevTools'/WebKit de l'Inspecteur de la ligne de cmd API source
• De Firebug en ligne de cmd API source
• L'opéra de Libellule en ligne de cmd API source

copy() est un de mes favoris; je les couvre et les autres dans cette Console JavaScript pour les Utilisateurs de Puissance de la vidéo.

Answer 2

Eh bien, Firebug Lite se définit 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 ce que

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

C'est en fait documenté et oui, elle est utilisée aussi bien à l'interne.

Donc je suppose que Google Chrome est en train de faire quelque chose de similaire.