metodos - methods class javascript

Haciendo un alias corto para document.querySelectorAll

Question

Voy a ejecutar document.querySelectorAll () mucho, y me gustaría tener un alias de taquigrafía.

var queryAll = document.querySelectorAll
queryAll(''body'')
TypeError: Illegal invocation

No funciona Mientras:

document.querySelectorAll(''body'')

Todavía lo hace. ¿Cómo puedo hacer que el alias funcione?

Answer 1

El intérprete de JavaScript querySelectorAll() un error porque se debe invocar querySelectorAll() en el contexto del documento.

Se produce el mismo error cuando está intentando llamar a console.log() alias.

Así que necesitas envolverlo así:

 function x(selector) {
return document.querySelectorAll(selector);
}

Answer 2

Esto funcionaría, necesita invocar el alias usando call() o apply() con el contexto apropiado.

func.call(context, arg1, arg2, ...)
func.apply(context, [args])
var x = document.querySelectorAll;
x.call(document, ''body'');
x.apply(document, [''body'']);

Answer 3

Esto parece funcionar:

var queryAll = document.querySelectorAll.bind(document);

bind devuelve una referencia a la función querySelectorAll , cambiando el contexto de ''this'' dentro del método querySelectorAll para que sea el objeto de documento.

La función de enlace solo se admite en IE9 + (y en todos los demás navegadores) - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Actualización: De hecho, podría crear accesos directos a toda una gama de métodos de documentos como este:

var query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);

Answer 4

Mi solución cubre los cuatro casos de uso siguientes:

• document.querySelector (...)
• document.querySelectorAll (...)
• element.querySelector (...)
• element.querySelectorAll (...)

El código:

let doc=document,
qsa=(s,o=doc)=>o.querySelectorAll(s),
qs=(s,o=doc)=>o.querySelector(s);

En términos de parámetros, se requiere el selector s , pero el objeto del elemento contenedor o es opcional.

Uso:

• qs("div") : consulta todo el documento para el primer div, devuelve ese elemento
• qsa("div") : consulta todo el documento para todos los divs, devuelve una lista de nodos de todos esos elementos
• qs("div", myContainer) : las consultas justo dentro del elemento myContainer para el primer div, devuelven ese elemento
• qsa("div", myContainer) : consultas dentro del elemento myContainer para todos los divs, devuelve una lista de nodos de todos esos elementos

Para hacer el código un poco más corto (pero no tan eficiente), el código qs podría escribirse de la siguiente manera:

let qs=(s,o=doc)=>qsa(s,o)[0];

El código anterior utiliza las características de ES6 ( let , funciones de flecha y valores de parámetros predeterminados). Un equivalente de ES5 es:

var doc=document,
qsa=function(s,o){return(o||doc).querySelectorAll(s);},
qs=function(s,o){return(o||doc).querySelector(s);};

o la versión ES5 equivalente más corta pero menos eficiente de qs :

var qs=function(s,o){return qsa(s,o)[0];};

A continuación se muestra una demostración de trabajo. Para asegurarse de que funciona en todos los navegadores, utiliza la versión ES5, pero si va a utilizar esta idea, recuerde que la versión ES6 es más corta:

var doc = document;
var qs=function(s,o){return(o||doc).querySelector(s);},
qsa=function(s,o){return(o||doc).querySelectorAll(s);}
var show=function(s){doc.body.appendChild(doc.createElement("p")).innerHTML=s;}
// ____demo____ _____long equivalent______ __check return___ _expect__
// | | | | | | | |
let one = qs("div"); /* doc.querySelector ("#one") */ show(one .id ); // "one"
let oneN = qs("div",one); /* one.querySelector ("div") */ show(oneN .id ); // "oneNested"
let many = qsa("div"); /* doc.querySelectorAll("div") */ show(many .length); // 3
let manyN = qsa("div",one); /* one.querySelectorAll("div") */ show(manyN.length); // 2

<h3>Expecting "one", "oneNested", 3 and 2...</h3>
<div id="one">
<div id="oneNested"></div>
<div></div>
</div>

Answer 5

Tomé el enfoque de @David Muller y lo formé con una lambda

let $ = (e) => document.querySelector(e);
let $all = (e) => document.querySelectorAll(e);

Ejemplo:

$(''body'');
// <body>...</body>

Answer 6

Una respuesta común es usar $ y $$ para querySelector y querySelectorAll . Este alias imita a jQuery.

Ejemplo:

$ = document.querySelector.bind(document)
$$ = document.querySelectorAll.bind(document)
$(''div'').style.color = ''blue''
$$(''div'').forEach(div => div.style.background = ''orange'')

div {
margin: 2px;
}

<div>
test
</div>
<section>
<div>
hello
</div>
<div>
foo
</div>
</section>

Answer 7

function x(expr)
{
return document.querySelectorAll(expr);
}