Phương pháp lõi jQuery so với phương pháp tiện ích

Question

Phương thức jQuery được cho là có 2 loại; phương pháp cốt lõi và phương pháp Utility

Tôi đoán họ gọi nó là $ vs $()

Ai đó có thể vui lòng cung cấp một ví dụ về từng loại và làm nổi bật sự khác biệt. Cảm ơn bạn.

Answer 1

(Skip to TL; DNR ở cuối nếu bạn ghét đọc và muốn có một bản tóm tắt, sau đó quay trở lại và đọc toàn bộ điều nếu bạn cần những gì tôi đang nói rõ)

Bản chất của jQuery

Điều đầu tiên và thường gây nhầm lẫn nhất cho những người mới sử dụng jQuery là đối tượng jQuery là gì và tại sao nó hoạt động theo cách của nó. Kiến trúc của jQuery nhằm cho phép các nhà phát triển lựa chọn và sau đó tương tác và thao tác tất cả các phần tử liên quan trong một câu lệnh với cú pháp đơn giản, ngắn gọn và không phải lo lắng về những cạm bẫy và sự cẩn trọng giữa các trình duyệt khác nhau. Vì vậy, nếu tôi muốn đính kèm một trình xử lý sự kiện vào tất cả các liên kết trên một trang có lớp CSS cụ thể, tôi muốn mã trông giống như $('a.my-selector').click(function() { /* my handler here */ }); chứ không phải là một quái vật nhìn vào tất cả các phần tử con của document.body, kiểm tra xem đó có phải là một neo hay không phần tử với lớp my-selector và nếu có, hãy đính kèm trình xử lý mong muốn theo cách cụ thể cho trình duyệt đó và gọi đệ quy cho chính con của phần tử đó.

gì là một phương pháp cốt lõi và những gì là một Plugin Phương pháp

Core và phương pháp Plugin đều giống nhau, ngoại trừ một phương pháp cốt lõi được định nghĩa trong kịch bản jQuery, và một plugin được xác định bởi bạn hoặc một nhà phát triển để mở rộng hoặc tăng cường chức năng cốt lõi của jQuery.

Core và Plugin phương pháp (Tôi sẽ chỉ đơn giản gọi chúng là "phương pháp" từ nay trở đi) là chức năng mà là một thành viên của đối tượng jQuery ($ là một bí danh của jQuery, để giảm gõ, vì vậy $() và jQuery() giống nhau). Các phương thức này cung cấp phương tiện để đi qua, tương tác và thao tác các phần tử trên một trang.

Làm thế nào Phương pháp làm việc

Khi bạn gọi $(), bạn tạo một thể hiện của lõi đối tượng jQuery, trong đó có tất cả các phương pháp đã được xác định cho đến nay. Cũng chứa trong đối tượng này là một tham chiếu đến tất cả các phần tử HTML trình duyệt mà bạn đã chọn, tham chiếu hoặc tạo, tùy thuộc vào (các) đối số mà bạn đã cung cấp cho $(). Vì vậy, trong một phương pháp, bạn nên luôn luôn giả sử bạn đang làm việc với một tập hợp các phần tử, với số không đến nhiều mục trong bộ sưu tập. Trong hầu hết các trường hợp, phương pháp của bạn sẽ bắt đầu với một cái gì đó như thế này:

$.fn.myPlugin = function() { 
    // `this` is the jquery object. the next line iterates over each element currently 
    // in the collection and invokes the specified function against it. 
    return this.each(function() { 
    // within _this_ function, `this` is a reference to the current element 
    // here, you can interact with or manipulate the element to whatever 
    // ends required by your plugin. 
    }); 
}; 

Lưu ý rằng $.fn chỉ là một bí danh cho các đối tượng $() của prototype. Vì vậy, $.prototype và $.fn là đồng nghĩa. fn/prototype chỉ đơn giản là cách cho phép bạn thêm hoặc thay thế các phương thức trên một đối tượng.

Phương thức nào nên trả lại?

Ngoại trừ các trường hợp ngoại lệ tôi sẽ nêu trong một thời điểm, một phương thức sẽ trả về đối tượng jQuery kết quả. Ý tôi là gì? Nếu phương thức đi qua hoặc lọc các phần tử hiện tại, nó sẽ trả về một đối tượng jQuery chứa các phần tử mới đó. Ví dụ: $.fn.filter lấy các thành phần ban đầu mà bạn đã chọn và sau đó xóa bất kỳ phần tử nào không khớp với công cụ chọn bạn chỉ định. Ví dụ:

$('a').filter('.my-selector'); // finds all anchor tags on the document, then removes any that don't have the class `my-selector`. 

Nếu phương pháp này chỉ áp dụng cho một số hành vi, sau đó nó nên chỉ trả lại các yếu tố hiện tại trong jQuery (trong trường hợp này, đó là dễ dàng nhất để chỉ trả lại kết quả của this.each, như tôi đã trình bày ở trên). Ví dụ: $.fn.hide làm cho mỗi phần tử đã chọn bị ẩn bằng cách áp dụng CSS display:none, vì vậy, chỉ có thể trả lại this.each. Đây là hình ảnh gần giống như sau:

$.fn.hide = function() { 
    return this.each(function() { 
     $(this).css({'display':'none'}); 
    }); 
} 

Hiện tại, đối với trường hợp ngoại lệ. Bạn có thể có một phương thức trả về một giá trị từ các phần tử trong bộ sưu tập. Trong trường hợp đó, bạn có thể để không trả về đối tượng jQuery, nhưng giá trị. Ví dụ: $.fn.html trả lại nội dung HTML của tất cả các phần tử đã chọn dưới dạng một chuỗi.

Vì vậy, bạn có thể hỏi, "OK, nhưng tại sao phải trả lại một đối tượng jQuery khác cho các phương thức không trả về một giá trị?". Bạn làm điều này để nhà phát triển có thể kết hợp chức năng với nhau trong một cuộc gọi. Quay lại ví dụ .my-selector, giả sử bạn không chỉ muốn áp dụng trình xử lý nhấp chuột mà còn muốn làm cho văn bản được in đậm.

Bạn có thể nói điều gì đó như:

var myLinks = $('a.my-selector'); 

myLinks.click(function() { /* handle click */ }); 
myLinks.css({'font-weight':'bold'}); 

Nhưng, đó là khá dài dòng, và trong JavaScript, every line counts against your page weight. Vì tất cả các phương thức đó trả về một đối tượng jQuery, bạn có thể chuỗi các cuộc gọi trong một tuyên bố:

$('a.my-selector').click(function() { /* handle click */ }).css({'font-weight':'bold'}); 

Ngắn gọn hơn, đúng không?

Utility Chức năng

chức năng tiện ích là chức năng tĩnh hoặc chia sẻ rằng quấn lên chức năng thường được sử dụng. Chúng hoạt động hơi bên ngoài mẫu jQuery bình thường như được mô tả ở trên, vì chúng chỉ tồn tại để đóng gói một số logic hữu dụng và có thể sử dụng lại được. Họ có thể lấy bất kỳ thông số nào cần và trả lại bất cứ thứ gì họ muốn. Ví dụ, $.isArray được sử dụng như thế này:

var myArray = []; 

alert($.isArray(myArray)); // displays true 

Nó được định nghĩa gần như thế này:

$.isArray = function(o) { 
// check if o is array and return true or false 
}; 

Bây giờ, bạn có thể chỉ là một cách dễ dàng vừa làm điều này "trường phái cũ" JavaScript cách bằng cách định nghĩa nó như thế này:

function isArray(o) { 
    // check if o is array and return true or false 
} 

Bên cạnh đó, bạn có thể hỏi những gì lợi thế là gắn nó vào $. Lý do cho việc này là ngăn chặn ghi đè các hàm cùng tên đã được nhà phát triển, các kịch bản khác hoặc thậm chí các phiên bản khác của jQuery xác định (có, bạn có thể bao gồm nhiều phiên bản của jQuery trong một trang nếu bạn thực sự cần, nhưng nó là một câu chuyện khác).

TL; DNR

$() đề cập đến một thể hiện của đối tượng jQuery, $.fn cho phép bạn thêm hoặc thay thế một phương pháp trên đối tượng jQuery, và $.yourFunctionNameHere phép bạn xác định một "tĩnh" hay chức năng "chia sẻ" tiện ích để đóng gói các chức năng hữu ích mà nếu không thì không tuân theo mẫu cá thể jQuery.

Answer 2

Tôi không chắc chắn nếu lõi vs tiện ích là cách đúng để đối chiếu hai, nhưng tôi sẽ chạy với nó.

Nói chung, các phương thức lõi hoạt động trên các đối tượng jQuery đã chọn.

// Loop through selected jQuery objects, operating on each 
$('li').each(function(index) { 
    alert(index + ': ' + $(this).text()); 
}); 

Phương thức tiện ích làm không hoạt động trực tiếp trên các đối tượng jQuery đã chọn; nhưng, thay vào đó, chỉ cần cung cấp một số dạng chức năng hoặc tiện ích cho nhà phát triển. Nó tương tự như bất kỳ hàm JavaScript nào khác. $ cho phép nó có một "không gian tên giả" vốn đã quen thuộc với jQuery.

// Loop through an array of numbers 
$.each([52, 97], function(index, value) { 
    alert(index + ': ' + value); 
}); 

Như @cleric đã chỉ ra, điều này chapter giải thích chi tiết hơn.