Łańcuch zdarzeń i iteracji DOM

Question

Poniżej mam dwa selektory jQuery.

Pierwszy szuka elementu DOM w zbuforowanym obiekcie, a następnie przeszukuje jego rodziców, a następnie wybiera rodziców (tabela) dla innego elementu dom. (dawny 2)

Drugi (2 wiersze) wyszukuje za pomocą elementu zapisanego w pamięci podręcznej. (np. 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 

Który jest szybszy/najlepsza praktyka?
Przykł. 1 bez wątpienia będzie szybszy w odniesieniu do funkcji jQuery, tj. .hide().animate().show(), ale kiedy należy szukać elementów DOM?

Answer 1

Wygląda na to, że próbujesz dopasować różnych potomków z table.setting.body i wykonać różne zadania na tych potomkach, bez konieczności określania table.setting.body dwa razy. Aby uzyskać tę wartość, można użyć end(). Na przykład, jeśli table.setting.body jest obiektem jQuery, można napisać:

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

(Jeśli table.setting.body jest elementem DOM, trzeba będzie zastosować $() do niego pierwszy).

Powyższy kod tylko ocenia pamięci podręcznej obiektu raz, wykonuje dwa połączenia do find() (nieco szybciej niż połączeń do $() z context argumentu w moim doświadczeniu), dwa połączenia do on() (takie same) i jednego połączenia do end() (który tylko wyskakuje ze stosu i powinien być dość szybki).

Answer 2

Jedyna różnica widzę jest korzystanie z rodzicami wewnątrz pierwszego podejścia. jQuery.parents szuka potrzebnej nadrzędnego za pomocą pętli wewnątrz dir funkcji:

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 ] oznacza elem["parentNode"] i jest powtarzany dla wszystkich rodziców, ponieważ until jest niezdefiniowany. Nie ma skrótu, jeśli poszukiwany rodzic jest podany jako odniesienie.

W zależności od długości ścieżki między pierwszym szukanym elementem a katalogiem dokumentu pierwsze podejście wymaga więcej operacji DOM.

Dlatego polecam drugie podejście.

Answer 3

Moim zdaniem nie jest to kwestia szybkości, ale raczej kwestia łatwości konserwacji i dobrego stylu kodowania.

I to gdzie Przykład 1 jest znacznie lepsza niż w przykładzie 2.

uniknąć nieporozumień i zachować rzeczy oddzielone. Chcesz dołączyć 2 zdarzenia do 2 różnych elementów - napisz 2 instrukcje. Dzięki temu Twój kod jest bardziej uporządkowany i czytelny.