Sự kiện chuỗi và lặp lại DOM

Question

Dưới đây tôi có hai bộ chọn jQuery.

Tìm kiếm đầu tiên cho phần tử DOM trong đối tượng được lưu trong bộ nhớ cache và sau đó tìm kiếm cha mẹ của nó, sau đó tìm kiếm cha mẹ (bảng) cho phần tử dom khác. (ví dụ: 2)

Tìm kiếm thứ hai (2 dòng) qua phần tử được lưu trong bộ nhớ cache. (ví dụ. 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 

Cái nào là nhanh hơn/thực hành tốt nhất?
Ví dụ: 1 sẽ không nghi ngờ gì nữa sẽ nhanh hơn để giải quyết các chức năng jQuery, tức là. .hide().animate().show() nhưng, khi nào khi tìm kiếm các phần tử DOM?

Answer 1

Có vẻ như bạn đang cố gắng kết hợp các hậu duệ khác nhau từ table.setting.body và thực hiện các tác vụ khác nhau trên các hậu duệ này mà không phải chỉ định table.setting.body hai lần.

Bạn có thể sử dụng end() để đạt được điều này. Ví dụ, nếu table.setting.body là một đối tượng jQuery, bạn có thể viết:

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

(Nếu table.setting.body là một phần tử DOM, bạn sẽ phải áp dụng $() để nó đầu tiên).

Đoạn mã trên chỉ đánh giá các đối tượng được lưu trữ một lần, thực hiện hai cuộc gọi đến find() (nhanh hơn một chút so với các cuộc gọi của bạn để $() với một cuộc tranh luận context trong kinh nghiệm của tôi), hai cuộc gọi đến on() (giống như bạn) và một cuộc gọi duy nhất đến end() (chỉ bật một mục ra khỏi ngăn xếp và phải khá nhanh).

Answer 2

Sự khác biệt duy nhất tôi thấy là cách sử dụng của cha mẹ trong cách tiếp cận đầu tiên của bạn. jQuery.parents trông cho phụ huynh cần sử dụng một vòng lặp bên trong hàm 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 ] nghĩa elem["parentNode"] và được lặp lại cho tất cả các bậc cha mẹ, bởi vì cho đến khi không xác định. Không có phím tắt nếu phụ huynh muốn được đưa ra làm tham chiếu.

Tùy thuộc vào độ dài đường dẫn giữa phần tử đầu tiên bạn đang tìm kiếm và gốc của tài liệu, cách tiếp cận đầu tiên cần nhiều thao tác DOM hơn.

Vì vậy, tôi khuyên bạn nên sử dụng phương pháp thứ hai.

Answer 3

Theo tôi, đây không phải là câu hỏi về tốc độ mà còn là câu hỏi về khả năng bảo trì và kiểu mã hóa tốt.

Và đó là nơi mà Ví dụ 1 là tốt hơn nhiều so Ví dụ 2.

Tránh nhầm lẫn và giữ cho mọi thứ tách ra. Bạn muốn đính kèm 2 sự kiện vào 2 phần tử khác nhau - viết 2 câu lệnh. Điều này làm cho mã của bạn được cấu trúc và dễ đọc hơn nhiều.