Encadenar eventos e iteración DOM

Question

A continuación tengo dos selectores jQuery.

La primera busca un elemento DOM dentro de un objeto almacenado en la memoria caché y luego busca a sus padres, luego establece los padres (tabla) para otro elemento dom. (por ejemplo, 2)

La segunda (2 líneas) busca a través del elemento en caché. (ej. 1)

$('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2 

    $('element', table.setting.body).on('blur focus', function); // ex 1 
    $('another element', table.setting.body).on('click', function); // ex 1 

Cuál es más rápido/mejor práctica?
Ej. Sin duda, sería más rápido referirme a las funciones de jQuery, es decir. .hide().animate().show() pero, ¿cuándo es cuando se buscan elementos DOM?

Answer 1

Parece que intenta hacer coincidir diferentes descendientes de table.setting.body y realiza diferentes tareas en estos descendientes, sin tener que especificar table.setting.body dos veces.

Puede usar end() para lograrlo. Por ejemplo, si table.setting.body es un objeto jQuery, puede escribir:

table.setting.body.find("element").on("blur focus", function).end() 
        .find("another element").on("click", function); 

(Si table.setting.body es un elemento DOM, se le tiene que aplicar $() al primero).

El código anterior sólo se evalúa el objeto en caché una vez, realiza dos llamadas a find() (ligeramente más rápido que sus llamadas a $() con un argumento context en mi experiencia), dos llamadas a on() (el mismo que el suyo) y una sola llamada a end() (que solo saca un elemento de una pila y debe ser bastante rápido).

Answer 2

La única diferencia que veo es el uso de los padres dentro de su primer acercamiento. jQuery.parents se ve que el padre sea necesario el uso de un bucle dentro de la función dir:

parents: function(elem) { 
    return jQuery.dir(elem, "parentNode"); 
}, 

// ... 

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[ dir ]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
}, 

(http://code.jquery.com/jquery-1.8.2.js)

cur = elem[ dir ] significa elem["parentNode"] y se repite para todos los padres, porque hasta está indefinido. No hay atajos si el padre deseado se da como referencia.

Dependiendo de la longitud de la ruta entre el primer elemento que está buscando y la raíz del documento, el primer enfoque necesita más operaciones DOM.

Por lo tanto, recomiendo el segundo enfoque.

Answer 3

En mi opinión, esto es menos una cuestión de velocidad, sino más una cuestión de mantenibilidad y buen estilo de codificación.

Y ahí es donde el ejemplo 1 es mucho mejor que el ejemplo 2.

evitar confusiones y mantener las cosas separadas. Desea adjuntar 2 eventos a 2 elementos diferentes: escriba 2 instrucciones. Esto hace que su código sea mucho más estructurado y legible.