Ngăn nhiều tìm kiếm DOM trong jquery

Question

Tôi đã tạo một hàm để trả lại cho tôi một phần tử jquery.

function GetDialogButton() { 
    return $('a.dialog'); 
}; 

Điều này được thực hiện như một yếu tố tương tự được sử dụng trong nhiều chức năng khác. Tôi nghĩ rằng nó tốt nhất nếu nó được lấy từ một nơi duy nhất, do đó làm cho nó dễ dàng hơn để thay đổi trong tương lai nên thay đổi tên thuộc tính.

Tôi muốn cải thiện bộ thu thập này để nó không thực hiện tìm kiếm mọi lúc khi được gọi nhiều lần trong một lần tải trang.

Làm thế nào tôi có thể làm điều này? tôi có nhớ cache không? hoặc có lẽ không cần thiết vì điều này được tối ưu hóa?

Answer 1

Bạn có thể tạo một biến bộ nhớ cache, nhưng nó sẽ làm ô nhiễm không gian tên toàn cầu một lần nữa

var dialogButton; 
function GetDialogButton() { 
    if(dialogButton){ 
     return dialogButton; 
    } 

    dialogButton = $('a.dialog'); 
    return dialogButton; 
}; 

Answer 2

Vâng, bạn có thể lazy-load nó.

var $dialogButton = null; 

function GetDialogButton() { 
    if($dialogButton == null) 
     $dialogButton = $('a.dialog'); 
    return $dialogButton 
}; 

Một lựa chọn khác, nếu bạn mong đợi ở đó để chỉ có một nút hộp thoại, bạn có thể cung cấp nguyên tố này một id và sau đó là hành động tìm kiếm nó sẽ hiệu quả hơn

<a id="dialogButton">...</a> 

$('#dialogButton')... // nice and quick 

Answer 3

Bạn có thể giữ không gian tên toàn cầu sạch sẽ;

function GetDialogButton() { 
    if (typeof GetDialogButton.element === 'undefined') { 
     GetDialogButton.element = $("a.dialog"); 
    } 
    return GetDialogButton.element; 
}; 

Answer 4

Tạo biến bộ nhớ cache chung là không cần thiết. Bạn có thể làm điều đó mà không cần thêm biến vào phạm vi toàn cục. Một cái gì đó như thế này sẽ làm:

var GetDialogButton = (function() { 
    var set; 

    return function() { 
     if (set === undefined) { 
      set = $('a.dialog'); 
     } 

     return set; 
    }; 
}());