Tại sao jQuery làm điều này: jQuery.fn.init.prototype = jQuery.fn?

Question

câu hỏi mở rộng ít là lý do tại sao jQuery làm

jQuery.fn = jQuery.prototype = { 
init: function() {...}, 
    f1: function() {...}, 
    ... 
}; 
jQuery.fn.init.prototype = jQuery.fn; 

Tại sao không chỉ cần thêm f1() vv vào init.prototype? Nó chỉ là thẩm mỹ hay có một số ý tưởng sâu sắc?

Answer 1

jQuery.fn chỉ là bí danh cho jQuery.prototype. Tôi cho rằng nó được xác định vì lý do thẩm mỹ và ít đánh máy hơn.

Vì vậy

jQuery.fn.init.prototype = jQuery.fn; 

thực sự là

jQuery.prototype.init.prototype = jQuery.prototype; 

Như tại sao điều này cần phải được thực hiện, đây forum post là hữu ích:

Nó cung cấp cho các init() có chức năng giống nhau nguyên mẫu làm đối tượng jQuery. Vì vậy, khi bạn gọi init() là một hàm tạo trong "return new jQuery.fn.init ( selector, context);" tuyên bố, nó sử dụng nguyên mẫu đó cho đối tượng nó cấu trúc. Điều này cho phép init() thay thế cho hàm tạo jQuery chính nó.

Điều bạn đạt được là đối tượng được trả về từ một hàm tạo jQuery.fn.init có quyền truy cập vào các phương thức jQuery.

Answer 2

Chức năng jQuery.fn.init là chức năng được thực hiện khi bạn gọi jQuery(".some-selector") hoặc $(".some-selector"). Bạn có thể thấy điều này trong đoạn này từ jquery.js:

jQuery = window.jQuery = window.$ = function(selector, context) { 
    // The jQuery object is actually just the init constructor 'enhanced' 
    return new jQuery.fn.init(selector, context); 
} 

Vì vậy, trên thực tế, dòng bạn đề cập là rất quan trọng để làm sao jQuery cho phép việc bổ sung chức năng cho đối tượng jQuery, cả bên trong jQuery riêng của mình và từ plugins. Đây là dòng:

jQuery.fn.init.prototype = jQuery.fn; 

Bằng cách chỉ định jQuery.fn như nguyên mẫu của hàm này (và vì đoạn đầu tiên sử dụng 'mới' để điều trị jQuery.fn.init như một constructor), điều này có nghĩa là chức năng bổ sung qua jQuery.fn.whatever ngay lập tức có sẵn trên các đối tượng được trả về bởi tất cả các cuộc gọi jQuery.

Vì vậy, ví dụ, một plugin jQuery đơn giản có thể được tạo ra và sử dụng như thế này:

jQuery.fn.foo = function() { alert("foo!"); }; 
jQuery(".some-selector").foo(); 

Khi bạn khai báo 'jQuery.fn.foo' trên dòng đầu tiên những gì bạn đang thực sự làm được thêm rằng chức năng cho nguyên mẫu của tất cả các đối tượng jQuery được tạo bằng hàm jQuery như hàm trên dòng thứ hai. Điều này cho phép bạn gọi đơn giản 'foo()' trên các kết quả của hàm jQuery và gọi các hàm plugin của bạn.

Tóm lại, việc viết các plugin jQuery sẽ tiết kiệm hơn và bị vỡ trong tương lai nếu chi tiết triển khai thay đổi nếu dòng này không tồn tại trong jQuery.