Tại sao “$ (). Ready (handler)” không được khuyến nghị?

Từ trang web tài liệu API jQuery choready

Cả ba cú pháp sau đều tương đương:

• $ (tài liệu) .ready (trình xử lý)
• $ (). sẵn sàng (trình xử lý) (điều này không được khuyến nghị)
• $ (trình xử lý)

Sau khi làm bài tập về nhà - đọc và chơi với mã nguồn , tôi không biết tại sao

$().ready(handler) 

không được khuyến khích. Cách đầu tiên và cách thứ ba hoàn toàn giống nhau, tùy chọn thứ ba gọi hàm sẵn sàng trên đối tượng jQuery được lưu trong bộ nhớ cache với document:

rootjQuery = jQuery(document);
...
...

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

Nhưng hàm sẵn sàng không có tương tác với bộ chọn của các phần tử nút đã chọn, readyMã nguồn:

ready: function( fn ) {
    // Attach the listeners
    jQuery.bindReady();
        // Add the callback
    readyList.add( fn );
        return this;
},

Như bạn có thể thấy, nó chỉ thêm lệnh gọi lại vào hàng đợi nội bộ ( readyList) và không thay đổi hoặc sử dụng các phần tử trong tập hợp. Điều này cho phép bạn gọi readyhàm trên mọi đối tượng jQuery.

Giống:

• bộ chọn thông thường : $('a').ready(handler) DEMO
• Bộ chọn vô nghĩa : $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
• Bộ chọn không xác định : $().ready(handler) DEMO

Cuối cùng ... cho câu hỏi của tôi: Tại sao $().ready(handler)không được khuyến khích?

Tôi đã nhận được câu trả lời chính thức từ một trong những nhà phát triển jQuery:

$().ready(fn)chỉ hoạt động vì $()từng là lối tắt đến $(document) _{(jQuery <1.4)}
Vì vậy, $().ready(fn)một mã có thể đọc được.

Nhưng mọi người đã từng làm những điều như $().mouseover()và tất cả những điều điên rồ khác.
và mọi người phải làm gì $([])để có được một đối tượng jQuery rỗng

Vì vậy, trong 1.4, chúng tôi đã thay đổi nó để $()tạo ra một jQuery trống và chúng tôi chỉ làm $().ready(fn)việc để không làm hỏng nhiều mã

$().ready(fn) nghĩa là bây giờ chỉ được vá trong lõi để làm cho nó hoạt động bình thường cho trường hợp kế thừa.

Vị trí tốt nhất cho readychức năng là vậy $.ready(fn), nhưng đó là một quyết định thiết kế thực sự cũ và đó là những gì chúng tôi có bây giờ.

Tôi hỏi anh ấy:

Bạn có nghĩ rằng $ (fn) dễ đọc hơn $ (). Ready (fn) ?!

Câu trả lời của anh ấy là:

Tôi luôn làm $ (tài liệu) .ready (fn) trong các ứng dụng thực tế và thường chỉ có một khối tài liệu sẵn sàng trong ứng dụng, nó không giống như một thứ bảo trì.

Tôi nghĩ $ (fn) cũng khá khó đọc , nó chỉ là Một điều mà bạn phải biết công việc ™ ...

Vì các tùy chọn khác nhau thực hiện khá nhiều điều giống như bạn đã chỉ ra, nên đã đến lúc đội mũ của người viết thư viện và đưa ra một số phỏng đoán.

1. Có lẽ người dùng jQuery muốn có $()sẵn để sử dụng trong tương lai (nghi ngờ $().readylà nó được ghi nhận là có tác dụng, ngay cả khi không được khuyến khích; nó cũng sẽ gây ô nhiễm ngữ nghĩa $nếu được viết chữ đặc biệt).

2. Một lý do thực tế hơn nhiều: phiên bản thứ hai là phiên bản duy nhất không kết thúc gói document, vì vậy nó dễ bị hỏng hơn khi duy trì mã. Thí dụ:

   // BEFORE
   $(document).ready(foo);
   
   // AFTER: works
   $(document).ready(foo).on("click", "a", function() {});

   Đối lập điều này với

   // BEFORE
   $().ready(foo);
   
   // AFTER: breaks
   $().ready(foo).on("click", "a", function() {});

3. Liên quan đến những điều trên: readycó một điều kỳ lạ ở chỗ nó (là phương thức duy nhất?) Sẽ hoạt động giống nhau cho dù đối tượng jQuery có bao bọc gì đi nữa (ngay cả khi nó không bao bọc bất cứ thứ gì như trường hợp ở đây). Đây là một sự khác biệt lớn so với ngữ nghĩa của các phương thức jQuery khác, vì vậy việc dựa vào nó một cách cụ thể không được khuyến khích.

   Cập nhật: Như nhận xét của Esailija đã chỉ ra, từ góc độ kỹ thuật readythực sự nên là một phương thức tĩnh vì nó hoạt động như thế này.

Cập nhật # 2: Đào tại nguồn, có vẻ như tại một số điểm trong nhánh 1.4 $()đã được thay đổi để phù hợp $([]), trong khi ở 1.3 nó hoạt động như thế nào $(document). Sự thay đổi này sẽ củng cố những lý do trên.

Tôi sẽ nói nó chỉ đơn giản là thực tế là $()trả về một đối tượng rỗng trong khi $(document)không áp dụng ready()cho những thứ khác nhau của bạn ; nó vẫn hoạt động, nhưng tôi sẽ nói rằng nó không trực quan.

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document

Nhiều khả năng đây chỉ là một lỗi tài liệu và cần được khắc phục, nhược điểm duy nhất khi sử dụng $().ready(handler)là tính dễ đọc. Chắc chắn, lập luận rằng $(handler)cũng không thể đọc được. Tôi đồng ý, đó là lý do tại sao tôi không sử dụng nó .

Bạn cũng có thể tranh luận rằng một phương pháp này nhanh hơn phương pháp khác. Tuy nhiên, bạn có thường gọi phương thức này đủ lần liên tiếp trên một trang để nhận thấy sự khác biệt không?

Cuối cùng thì nó phụ thuộc vào sở thích cá nhân. Không có nhược điểm khi sử dụng $().ready(handler)khác với đối số khả năng đọc. Tôi nghĩ rằng tài liệu là thiếu hàng đầu trong trường hợp này.

Chỉ để làm rõ ràng rằng có một số điểm không nhất quán trong ba, thêm vào đó tôi đã thêm biểu mẫu thứ tư thường được sử dụng: (function($) {}(jQuery));

Với đánh dấu này:

<div >one</div>
<div>two</div>
<div id='t'/>

và mã này:

var howmanyEmpty = $().ready().find('*').length;
var howmanyHandler = $(function() {}).find('*').length;
var howmanyDoc = $(document).ready().find('*').length;
var howmanyPassed = (function($) { return $('*').length; }(jQuery));
var howmanyYuck = (function($) {}(jQuery));
var howmanyYuckType = (typeof howmanyYuck);

$(document).ready(function() {
    $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" 
        + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType);
});

Kết quả hiển thị của div từ câu lệnh cuối cùng là: 0: 9: 9: 9: undefined

VẬY, chỉ có phiên bản Trình xử lý và Tài liệu là phù hợp với quy ước jQuery về việc trả lại thứ gì đó sử dụng được khi chúng nhận được bộ chọn tài liệu và với biểu mẫu Đã qua, bạn phải trả lại thứ gì đó (Tôi sẽ nghĩ vậy, nhưng hãy đặt nó vào để hiển thị "bên trong" nó có một cái gì đó).

Đây là một phiên bản fiddle của điều này cho những người tò mò: http://jsfiddle.net/az85G/

Tôi nghĩ rằng điều này thực sự là để dễ đọc hơn bất cứ điều gì khác.

Cái này không biểu cảm bằng

$().ready(handler);

như

$(document).ready(handler)

Có lẽ họ đang cố gắng quảng bá một số dạng jQuery thành ngữ.