jQueryPlugin: return này vs lại this.each()

Question

Vâng, có rất nhiều chủ đề về điều đó, nhưng tôi vẫn không nhận được nó:

tôi đã chuẩn bị hai jsfiddle:

return this

return this.each()

Sự khác biệt là gì? Có nhiều câu trả lời, nhưng ví dụ của tôi cho thấy cùng một kết quả. Vì vậy, một số câu trả lời có thể sai?

---

what does "return this.each()" do in jQuery?

"Nó cho phép một để gọi một plugin hoặc một sự kiện trên một loạt các yếu tố và sau đó áp dụng mà chức năng tương tự hoặc sự kiện cho tất cả trong số họ" -> công việc của với "return this!"

"nó cho phép bạn chuỗi nhiều chức năng" -> tương tự ở đây

"Cho phép bạn làm những việc như: $ (" mySelector ") foo() show();.." -> Tôi vẫn có thể để điều này là tốt, khi tôi trở lại 'này'

---

Tôi cũng tạo ra một jsfiddle cho thấy - theo ý kiến ​​của tôi - rằng nó không quan trọng nếu bạn đang gói bạn mã vào return this.each();:

http://jsfiddle.net/7S3MW/1/

Buổi biểu diễn của Chrome Console cũng tương tự đầu ra!

Vậy sự khác biệt là gì?

Answer 1

Hai điều:

1. ví dụ bạn đang sai lầm ở chỗ chúng thực hiện chính xác những điều tương tự cho mỗi yếu tố.
2. Vấn đề thực sự không phải là return this so với return this.each, vấn đề là this so với this.each.

Đối (1), hãy xem xét sự khác biệt giữa các plugin này:

(function($) { 
    $.fn.mangle = function(options) { 
     this.append(' - ' + this.data('x')); 
     return this; 
    }; 
})(jQuery); 

Demo: http://jsfiddle.net/ambiguous/eyHeu/

Và plugin này:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

Demo: http://jsfiddle.net/ambiguous/5dMMH/

Vì vậy, bạn thấy, bạn cần sử dụng this.each nếu bạn cần xử lý các phần tử riêng lẻ trong this đặt khác nhau. Bạn sẽ có các hiệu ứng tương tự nếu plugin của bạn phải đính kèm dữ liệu phần tử cụ thể cho từng phần tử: nếu bạn không sử dụng each thì bạn sẽ kết thúc cùng một phần dữ liệu chính xác cho tất cả các phần tử bên trong this và để bạn nhầm lẫn về lý do tại sao thông tin bị chảy máu khắp nơi.

Đối (2), nó không quan trọng nếu bạn return this hoặc return this.each(... từ x.each(...) lợi nhuận x anyway.

Answer 2

Cả hai đều giống hệt nhau. .each() lợi nhuận this, vì vậy return this.each() là CHÍNH XÁC giống như this.each();return this;

Chỉnh sửa: Phương pháp fiddle mới nhất của bạn makeRed không trả lại this và do đó không thể kết nối.

Answer 3

Hãy để tôi cho bạn thấy hai mảnh "tương đương" mã mà có thể làm rõ câu hỏi của bạn:

Với jQuery "mỗi" chức năng:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

Without jQuery "mỗi" chức năng:

(function($) { 
    $.fn.mangle = function(options) { 
     var objs = this; 
     for (var i=0; i<objs.length; i++) { 
      var obj = objs[i]; 
      $(obj).append(' - ' + $(obj).data('x')); 
     }; 
     return this; 
    }; 
})(jQuery); 

Vì vậy, về cơ bản, each chức năng được sử dụng để áp dụng một số mã cho tất cả các yếu tố chứa trong this đối tượng (như this thường dùng để chỉ một nhóm các phần tử được trả về bởi một selector jQuery) và trả lại tài liệu tham khảo để this (như each hàm luôn trả về mà tham khảo -để phép chaining calls-)

Như một mặt lưu ý: cách tiếp cận thứ hai (-for tiếp vòng) là nhanh hơn (đặc biệt là trên các trình duyệt cũ) so với trước đây một (- each function-).