Liệu $ (này) truy vấn các dom?

Question

Tôi đã tự hỏi nếu truyền điều này đến hàm jQuery thực sự khiến nó tìm kiếm trong DOM cho nó. Câu hỏi có một ngữ cảnh cụ thể.

Hãy nói rằng tôi có:

$('#foo').click(function(){ 
    var id = $(this).attr('id'); 
    var someVal = $(this).data('someVal'); 
} 

jQuery sẽ truy vấn các DOM để cung cấp các chức năng của nó hoặc là tất cả các thông tin và đọc lấy từ JavaScript đối tượng này?

Và có một sự khác biệt hiệu suất để:

$('#foo').click(function(){ 
    var elem = $(this); 
    var id = elem.attr('id'); 
    var someVal = elem.data('someVal'); 
} 

Answer 1

Nó không truy vấn DOM trong trường hợp này. $() kết thúc tốt đẹp các this (hoặc bất cứ điều gì khác bạn có bên trong nó) với một đối tượng wrapper jQuery.

By bộ nhớ đệm nó:

var $this = $(this); 
// you will see code have a $ before or after a variable ($this, this$, etc) 
// signifying it is a jQuery wrapped object 

Bạn có tiết kiệm thực hiện chỉ gói nó với jQuery lần. Trái ngược với việc nó đi vào bên trong jQuery và quấn nó nhiều lần. Đó là thực hành mã hóa tốt để cache nó.

lưu ý: Tất nhiên nếu bạn có $('#whatever'), nó sẽ truy vấn DOM, vì bạn đã cung cấp bộ chọn cho nó để truy xuất, sau đó nó kết thúc tốt đẹp với jQuery. Vì vậy, nếu bạn sẽ được tái sử dụng nó hơn và hơn nó làm cho tinh thần để lưu nó là tốt! var $whatever = $('#whatever');

Answer 2

Nếu bạn có phần tử DOM trong this thì $(this) không truy vấn DOM. Nó chỉ đặt một đối tượng wrapper jQuery xung quanh một phần tử DOM đó.

Đây không phải là một hoạt động tốn kém, nhưng bạn muốn tránh làm việc đó không cần thiết. ví dụ: đôi khi bạn thấy loại mã này:

$("some_selector_here").mousemove(function() { 
    if ($(this).hasClass('foo')) { 
     $(this).doSomething(); 
    } 
    else { 
     $(this).doSomethingElse(); 
    } 
}); 

Không có lý do gì cho điều đó. Thay vào đó:

$("some_selector_here").mousemove(function() { 
    var $this = $(this); 
    if ($this.hasClass('foo')) { 
     $this.doSomething(); 
    } 
    else { 
     $this.doSomethingElse(); 
    } 
}); 

Trình xử lý click hầu như chắc chắn không quan trọng, mặc dù tôi vẫn cho rằng đó là biểu mẫu kém. Nhưng trong những thứ được gọi rất nhiều, giống như mousemove, tốt, tránh các cuộc gọi chức năng không cần thiết và cấp phát bộ nhớ. :-)