Si vous tapez $ dans la console de Chrome dans une page HTML simple contenant un script. Vous verriez cette sortie
> $
< bound(selector, startNode)
Cependant, lorsque vous faites window. $, La sortie est indéfinie,
> window.$
< undefined
Qu'est-ce que le $ défini ici et pourquoi ne puis-je pas y accéder via l'objet window ?
$ est une variable locale injectée dans votre console à partir de l'objet __commandLineAPI , via une instruction with enveloppant votre code (c'est pourquoi il ne s'agit pas d'une variable globale). Si vous l'examinez de plus près (en utilisant, par exemple, debugger; $('*'); ), vous verrez également qu'il s'agit essentiellement d'une fonction liée à la fenêtre en cours avec la source suivante:
$: function (selector, opt_startNode) {
if (this._canQuerySelectorOnNode(opt_startNode))
return opt_startNode.querySelector(selector);
return inspectedWindow.document.querySelector(selector);
}
(défini sur CommandLineAPIImpl.prototype )
À partir de la Ligne de Commande la Référence de l'API:
L'API en Ligne de Commande est un ensemble de fonctions pour l'exécution de tâches courantes avec les Outils de développement Chrome. Ces inclure des fonctions de confort pour la sélection et le contrôle des éléments dans le DOM...
$(selector) Renvoie la référence au premier élément du DOM avec le sélecteur CSS.Cette fonction est un alias pour le document.querySelector() fonction.
Par exemple:
$('body')
Pour ajouter à la réponse à la question précédente, il peut être trouvé dans le code de la machine virtuelle de google chrome.
// NOTE: Please keep the list of API methods below snchronized to that in WebInspector.RuntimeModel!
// NOTE: Argument names of these methods will be printed in the console, so use pretty names!
/**
* @type {!Array.<string>}
* @const
*/
CommandLineAPI.members_ = [
"$", "$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd",
"monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners",
"debug", "undebug", "monitor", "unmonitor", "table"
];
Toutes les implémentations peuvent être trouvés ici
CommandLineAPIImpl.prototype = {
/**
* @param {string} selector
* @param {!Node=} opt_startNode
* @return {*}
*/
$: function (selector, opt_startNode)
{
if (this._canQuerySelectorOnNode(opt_startNode))
return opt_startNode.querySelector(selector);
return inspectedWindow.document.querySelector(selector);
},
/**
* @param {string} selector
* @param {!Node=} opt_startNode
* @return {*}
*/
$$: function (selector, opt_startNode)
{
if (this._canQuerySelectorOnNode(opt_startNode))
return opt_startNode.querySelectorAll(selector);
return inspectedWindow.document.querySelectorAll(selector);
},
/**
* @param {!Node=} node
* @return {boolean}
*/
_canQuerySelectorOnNode: function(node)
{
return !!node && InjectedScriptHost.subtype(node) === "node" && (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE);
},
/**
* @param {string} xpath
* @param {!Node=} opt_startNode
* @return {*}
*/
$x: function(xpath, opt_startNode)
{
var doc = (opt_startNode && opt_startNode.ownerDocument) || inspectedWindow.document;
var result = doc.evaluate(xpath, opt_startNode || doc, null, XPathResult.ANY_TYPE, null);
switch (result.resultType) {
case XPathResult.NUMBER_TYPE:
return result.numberValue;
case XPathResult.STRING_TYPE:
return result.stringValue;
case XPathResult.BOOLEAN_TYPE:
return result.booleanValue;
default:
var nodes = [];
var node;
while (node = result.iterateNext())
push(nodes, node);
return nodes;
}
},
/**
* @return {*}
*/
dir: function(var_args)
{
return InjectedScriptHost.callFunction(inspectedWindow.console.dir, inspectedWindow.console, slice(arguments));
},
/**
* @return {*}
*/
dirxml: function(var_args)
{
return InjectedScriptHost.callFunction(inspectedWindow.console.dirxml, inspectedWindow.console, slice(arguments));
},
/**
* @return {!Array.<string>}
*/
keys: function(object)
{
return Object.keys(object);
},
/**
* @return {!Array.<*>}
*/
values: function(object)
{
var result = [];
for (var key in object)
push(result, object[key]);
return result;
},
/**
* @return {*}
*/
profile: function(opt_title)
{
return InjectedScriptHost.callFunction(inspectedWindow.console.profile, inspectedWindow.console, slice(arguments));
},
/**
* @return {*}
*/
profileEnd: function(opt_title)
{
return InjectedScriptHost.callFunction(inspectedWindow.console.profileEnd, inspectedWindow.console, slice(arguments));
},
/**
* @param {!Object} object
* @param {!Array.<string>|string=} opt_types
*/
monitorEvents: function(object, opt_types)
{
if (!object || !object.addEventListener || !object.removeEventListener)
return;
var types = this._normalizeEventTypes(opt_types);
for (var i = 0; i < types.length; ++i) {
object.removeEventListener(types[i], this._logEvent, false);
object.addEventListener(types[i], this._logEvent, false);
}
},
/**
* @param {!Object} object
* @param {!Array.<string>|string=} opt_types
*/
unmonitorEvents: function(object, opt_types)
{
if (!object || !object.addEventListener || !object.removeEventListener)
return;
var types = this._normalizeEventTypes(opt_types);
for (var i = 0; i < types.length; ++i)
object.removeEventListener(types[i], this._logEvent, false);
},
/**
* @param {*} object
* @return {*}
*/
inspect: function(object)
{
return injectedScript._inspect(object);
},
copy: function(object)
{
var string;
if (injectedScript._subtype(object) === "node") {
string = object.outerHTML;
} else if (injectedScript.isPrimitiveValue(object)) {
string = toString(object);
} else {
try {
string = JSON.stringify(object, null, " ");
} catch (e) {
string = toString(object);
}
}
var hints = { copyToClipboard: true, __proto__: null };
var remoteObject = injectedScript._wrapObject(string, "")
InjectedScriptHost.inspect(remoteObject, hints);
},
clear: function()
{
InjectedScriptHost.clearConsoleMessages();
},
/**
* @param {!Node} node
* @return {!Array.<!{type: string, listener: function(), useCapture: boolean, remove: function()}>|undefined}
*/
getEventListeners: function(node)
{
var result = nullifyObjectProto(InjectedScriptHost.getEventListeners(node));
if (!result)
return result;
/** @this {{type: string, listener: function(), useCapture: boolean}} */
var removeFunc = function()
{
node.removeEventListener(this.type, this.listener, this.useCapture);
}
for (var type in result) {
var listeners = result[type];
for (var i = 0, listener; listener = listeners[i]; ++i) {
listener["type"] = type;
listener["remove"] = removeFunc;
}
}
return result;
},
debug: function(fn)
{
InjectedScriptHost.debugFunction(fn);
},
undebug: function(fn)
{
InjectedScriptHost.undebugFunction(fn);
},
monitor: function(fn)
{
InjectedScriptHost.monitorFunction(fn);
},
unmonitor: function(fn)
{
InjectedScriptHost.unmonitorFunction(fn);
},
table: function(data, opt_columns)
{
InjectedScriptHost.callFunction(inspectedWindow.console.table, inspectedWindow.console, slice(arguments));
},
/**
* @param {number} num
*/
_inspectedObject: function(num)
{
return InjectedScriptHost.inspectedObject(num);
},
/**
* @param {!Array.<string>|string=} types
* @return {!Array.<string>}
*/
_normalizeEventTypes: function(types)
{
if (typeof types === "undefined")
types = ["mouse", "key", "touch", "control", "load", "unload", "abort", "error", "select", "input", "change", "submit", "reset", "focus", "blur", "resize", "scroll", "search", "devicemotion", "deviceorientation"];
else if (typeof types === "string")
types = [types];
var result = [];
for (var i = 0; i < types.length; ++i) {
if (types[i] === "mouse")
push(result, "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel");
else if (types[i] === "key")
push(result, "keydown", "keyup", "keypress", "textInput");
else if (types[i] === "touch")
push(result, "touchstart", "touchmove", "touchend", "touchcancel");
else if (types[i] === "control")
push(result, "resize", "scroll", "zoom", "focus", "blur", "select", "input", "change", "submit", "reset");
else
push(result, types[i]);
}
return result;
},
/**
* @param {!Event} event
*/
_logEvent: function(event)
{
inspectedWindow.console.log(event.type, event);
}
}
Afin de vérifier cette juste appuyez sur bound(selector, startNode) c'est un lien actif
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
