trong jQuery sự khác nhau giữa $ .myFunction và $ .fn.myFunction là gì?

Question

Tôi đang cố gắng viết các plugin cho jQuery và tôi đang cố gắng hiểu sự khác biệt giữa $ .f và $ .fn.f

Tôi đã thấy tác giả của plugin sử dụng cả hai hoặc đôi khi chỉ định $ .f = $ .fn.f

Ai đó có thể giải thích điều này với tôi, lý luận, lợi ích, v.v ... không?

Answer 1

Nhìn vào mã nguồn jQuery sẽ xóa mọi thứ lên. Bằng cách này, jQuery và $ tham khảo cùng một đối tượng, và đây là cách đối tượng jQuery được định nghĩa:

var jQuery = function(selector, context) { 
    return new jQuery.fn.init(selector, context); 
} 

jQuery là một chức năng và trong Javascript, một chức năng cũng là một đối tượng của loại Function. Vì vậy, jQuery.f hoặc $.f gắn f vào đối tượng jQuery Function hoặc gọi đó là lớp jQuery nếu bạn muốn.

nếu bạn nhìn vào nguồn jQuery, bạn sẽ thấy rằng jQuery.prototype đã được giao cho jQuery.fn

jQuery.fn = jQuery.prototype 

Vì vậy, bất cứ khi nào bạn đính kèm một phương pháp (hoặc tài sản) để jQuery.fn, như trong jQuery.fn.f = .., hoặc $.fn.f = .., hoặc jQuery.prototype.f = .. hoặc $.prototype.f = .., phương thức đó sẽ có sẵn cho tất cả các phiên bản của lớp jQuery này (một lần nữa, không có lớp nào trong Javascript, nhưng nó có thể giúp hiểu).

Bất cứ khi nào bạn gọi jQuery() chức năng, như trong jQuery("#someID"), một trường hợp jQuery mới được tạo trên dòng này:

return new jQuery.fn.init(selector, context); 

và trường hợp này có tất cả các phương pháp chúng tôi gắn liền với nguyên mẫu, nhưng không phải là phương pháp mà được gắn trực tiếp vào đối tượng Function.

Bạn sẽ nhận được ngoại lệ nếu bạn thử gọi một hàm không được xác định ở đúng vị trí.

$.doNothing = function() { 
    // oh noez, i do nuttin 
} 

// does exactly as advertised, nothing  
$.doNothing(); 

var jQueryEnhancedObjectOnSteroids = $("body"); 
// Uncaught TypeError: Object #<an Object> has no method 'doNothing' 
jQueryEnhancedObjectOnSteroids.doNothing(); 

---

Oh, và cuối cùng để cắt một sợi dài ngắn và để trả lời câu hỏi của bạn - làm $.f = $.fn.f phép bạn sử dụng các chức năng như một plugin hoặc một phương pháp hữu ích (trong jquery biệt ngữ).

Answer 2

$.f là một chức năng tiện ích trong khi $.fn.f là một plugin/phương pháp jQuery.

Chức năng tiện ích về cơ bản là một hàm trong vùng tên jQuery hữu ích để thực hiện một số thao tác, ví dụ: $.isArray(obj) kiểm tra xem đối tượng obj có phải là một mảng hay không. Sẽ rất hữu ích khi đặt các hàm trong không gian tên jQuery nếu bạn sử dụng chúng thường xuyên và cũng để tránh ô nhiễm không gian tên chung.

Phương thức jQuery hoạt động trên các đối tượng jQuery/bộ gói. Ví dụ: $(document.body).append('<p>Hello</p>'); sẽ nối thêm một đoạn có chứa Hello vào phần tử nội dung của tài liệu. $.fn là viết tắt của $.prototype trong các phiên bản sau của jQuery (không phải lúc nào cũng có trong các phiên bản trước của thư viện). Bạn sẽ sử dụng điều này khi viết các plugin của riêng bạn.

Answer 3

Các $.fn.f chỉ đơn giản là một phím tắt để jQuery.prototype

Bằng việc sử dụng fn, bạn có thể thêm các phương pháp cắm mà không sử dụng mở rộng phương pháp:

jQuery.fn.myPlugin = function(opts) { ... }