jQuerys $ .each() hoạt động như thế nào?

Question

Có thể là một tiêu đề xấu, nhưng đây là vấn đề của tôi: Tôi đang xây dựng một khuôn khổ để tìm hiểu thêm về javascript. Và tôi muốn sử dụng kiểu "" jQuery "".

Làm cách nào để tạo một chức năng trong đó () là tùy chọn?

$("p").fadeOut(); //() is there 
$.each(arr, function(k, v) {...}); //Dropped the(), but HOW? 

Đây là những gì tôi đã đưa ra, nhưng nó không làm việc:

$2DC = function(selector) 
{ 
    return new function() { 
     return { 
      circle : function() 
      { 
       //... 
      } 
     } 
    } 
} 


$2DC("#id1"); //Work 
$2DC("#id2").circle(); //Work 
$2DC.circle(); //DONT WORK 

Answer 1

$ thực sự chỉ là bí danh cho hàm jQuery. Bạn có thể gọi hàm với:

jQuery("p"); hoặc $("p");

nhưng hãy nhớ, trong JavaScript bạn có thể đính kèm "công cụ" trực tiếp đến chức năng.

function foo(){ 
} 
foo.blah = "hi"; 
foo.func = function() { alert("hi"); }; 

foo.func(); //alerts "hi" 

Đây là cách (khái niệm) Hàm jQuery each của jQuery được xác định.

jQuery.each = function(someArr, callback) { ... 

Và vì vậy bây giờ jQuery.each là một chức năng mà có thể được gọi như thế này:

jQuery.each([1, 2, 3], function(i, val) { 
}); 

hay quen thuộc hơn

$.each([1, 2, 3], function(i, val) { 
}); 

---

Vì vậy, đối với trường hợp cụ thể của bạn, để hỗ trợ :

$2DC.circle(); 

Bạn sẽ phải thêm circle chức năng trực tiếp đến $2DC:

$2DC.circle = function(){ 
    // code 
}; 

Answer 2

Phương pháp $.each mà bạn đề cập đến là một tài sản trên đối tượng $ chức năng.

Đối tượng $ trong jQuery là đối tượng hàm và giống như bất kỳ đối tượng nào trong JavaScript, bạn có thể gán thuộc tính trên đối tượng.

Gọi đối tượng hàm $ hoạt động như hàm hàm dựng và trả về một đối tượng đối tượng mới được tạo bởi hàm jQuery.fn.init(). Nguyên mẫu của jQuery được sao chép sang jQuery.fn.init để các cá thể đối tượng mới được tạo có quyền truy cập vào các phương thức và plugin được xác định trên jQuery.

Answer 3

Chức năng là các đối tượng trong JavaScript. Do đó, chúng có thể được sử dụng làm biến, giống như ints, strings, v.v.

Trong ví dụ của bạn, $2DC là hàm trả về đối tượng có chứa hàm circle.

$2DC.circle(); không hoạt động như circle chỉ là tài sản của đối tượng được trả về, không phải là số $2DC.

Trong trường hợp $.each, tính năng này hoạt động như $ chứa thuộc tính each. $2DC cũng có thể làm điều đó. Như thế này:

$2DC.circle = function(){ 
} 

Bây giờ, $2DC.circle(); sẽ hoạt động. Vì vậy, khi bạn thấy các hàm là các đối tượng, và như vậy có thể có các thuộc tính giống như các đối tượng khác.

Answer 4

$2DC.circle(); //DONT WORK 

này đã không làm việc vì $ 2DC không có bất kỳ chức năng với tên circle. Nó chỉ là một chức năng.

Ở đâu là $2DC("#id2") trả về hàm mới chứa đối tượng có chức năng circle để $2DC("#id2").circle(); hoạt động tốt cho bạn.

Nếu bạn xác định

$2DC.circle = function(){ 

}; 

Bạn có thể sử dụng $2DC.circle();

Answer 5

Hãy thử nó như thế này:

$2DC = (function(selector) 
{ 
    return new function() { 
     return { 
      circle : function() 
      { 
       //... 
      } 
     } 
    } 
})(); 

cách này $ 2DC là đối tượng được trả về bởi các chức năng và không chức năng chinh no.

Answer 6

Tạo hàm cơ sở của bạn, sau đó thêm phương thức vào hàm.

var f = function(text){ 
    alert(text); 
} 
f.fn1 = function(text){ 
    alert('fn:'+text); 
} 
f.fn2 = function(text){ 
    alert('fn2:'+text); 
} 

f('hi'); //hi; 
f.fn1('hi'); //fn:hi; 
f.fn2('hi'); //fn2:hi; 

Answer 7

Có thể đạt được bằng cách sử dụng một cái gì đó như thế này.

$.fn.each = function (otherparams); 

$.each = function (collection, otherparams) { 
    return $.fn.each.apply(collection, arguments.slice(1)); 
}; 

Thêm mỗi thuộc tính của fn (chỉ là bí danh cho jQuery.prototype) có nghĩa là nó có sẵn dưới dạng phương thức của từng bộ sưu tập jQuery. Bit thứ hai của mã có nghĩa là nó có thể được thông qua trong một bộ sưu tập như một đối số để thay thế.

apply (và call) là một số tính năng hữu ích nhất của javascript khi bạn quen với chúng.