jQuery document. yet vs tự gọi hàm ẩn danh

137

Sự khác biệt giữa hai cái đó là gì.

$(document).ready(function(){ ... });
(function(){ ... })();

Cả hai chức năng này được gọi cùng một lúc? Tôi biết, document. Yet sẽ được kích hoạt khi toàn bộ trang HTML được trình duyệt hiển thị nhưng chức năng thứ 2 (tự gọi hàm ẩn danh). Có phải nó chờ trình duyệt hoàn thành hiển thị trang hoặc nó được gọi bất cứ khi nào nó gặp phải?

javascript jquery

— Ashit Vora
nguồn

18

Đối với những gì nó có giá trị, $(function() {});tương đương với$(document).ready(function() {});

— Ian Henry

1

Hàm tự gọi ẩn danh sẽ được thực thi bất cứ khi nào nó gặp phải. Ngoài ra, thực sự hiển thị tài liệu trên màn hình và tạo mô hình đối tượng trong bộ nhớ là không liên quan.

— Anurag

liên quan: Tại sao định nghĩa hàm ẩn danh và chuyển nó jQuery làm đối số? sử dụng mô hình nào với xương sống

— Bergi

4

Bạn nên thực sự chấp nhận câu trả lời cho câu hỏi của bạn khi họ trả lời một cách hiệu quả. Bạn có tỷ lệ chấp nhận rất thấp.

— leigero

Cách không phải jQuery để thực hiện cái đầu tiên là: document.addEventListener ('domContentLoaded', function () {...});

— Evan Thompson

112

$(document).ready(function(){ ... }); hoặc ngắn $(function(){...});

Hàm này được gọi khi DOM is readycó nghĩa là, bạn có thể bắt đầu truy vấn các phần tử chẳng hạn. .ready()sẽ sử dụng các cách khác nhau trên các trình duyệt khác nhau để đảm bảo rằng DOM thực sự sẵn sàng.
(function(){ ... })();

Đó không gì khác hơn là một chức năng tự gọi càng sớm càng tốt khi trình duyệt đang diễn giải của bạn ecma-/javascript. Do đó, rất khó có khả năng bạn có thể hành động thành công DOM elementsở đây.

— jAndy
nguồn

1

@NimChimpsky Tôi nhầm lẫn (hàm () {}); với $ (hàm () {}). Bạn ngược lại với sai lầm;)

— ALH

Tôi đang bối rối, liên quan đến việc (function(){ ... })();không có bất kỳ mã JS nào chạy càng sớm càng tốt? Nếu bạn đã nói, một alert()bên trong SIAF hoặc bên ngoài nó, hiệu ứng sẽ không giống nhau?

— skube

2

@skube Có, bất kỳ mã JS nào sẽ chạy ngay khi trình phân tích cú pháp đọc nó, nhưng sự nhầm lẫn của bạn có thể xuất hiện cho dù có "$" phía trước SIAF hay không. Nếu vậy, và trang web này đang sử dụng jQuery, thì đây là dạng rút gọn của hàm trợ giúp tài liệu jQuery., Nó sẽ lên lịch cho hàm đã cho để thực thi khi DOM có sẵn. Chức năng của trình trợ giúp sẽ tự chạy ngay khi được đọc, nhưng chức năng bạn cung cấp sẽ không.

— Neil Monroe

46

(function(){...})(); sẽ được thực thi ngay khi gặp trong Javascript.

$(document).ready()sẽ được thực thi khi tài liệu được tải. $(function(){...});là một phím tắt cho $(document).ready()và làm điều tương tự chính xác.

— Michal
nguồn

25

$(document).ready(function() { ... });chỉ đơn giản là liên kết chức năng đó với readysự kiện của tài liệu, vì vậy, như bạn đã nói, khi tài liệu tải, sự kiện sẽ kích hoạt.
(function($) { ... })(jQuery);thực sự là một cấu trúc của Javascript và tất cả đoạn mã đó làm là chuyển jQueryđối tượng thành function($)một tham số và chạy hàm, vì vậy bên trong hàm đó, $luôn luôn đề cập đến jQueryđối tượng. Điều này có thể giúp giải quyết xung đột không gian tên, v.v.

Vì vậy, # 1 được thực thi khi tài liệu được tải, trong khi # 2 được chạy ngay lập tức, với jQueryđối tượng có tên $là tốc ký.

— Alan Christopher Thomas
nguồn

25

Đoạn mã sau sẽ được thực thi khi DOM (Mô hình đối tượng tài liệu) đã sẵn sàng để mã JavaScript thực thi.

$(document).ready(function(){
  // Write code here
});

Các tay ngắn cho mã trên là:

$(function(){
  // write code here
});

Mã được hiển thị bên dưới là một hàm JavaScript ẩn danh tự gọi và sẽ được thực thi ngay khi trình duyệt diễn giải nó:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

Hàm tự gọi jQuery được hiển thị bên dưới, chuyển đối tượng jQuery toàn cầu làm đối số function($). Điều này cho phép $được sử dụng cục bộ trong chức năng tự gọi mà không cần phải đi qua phạm vi toàn cầu cho một định nghĩa. jQuery không phải là thư viện duy nhất sử dụng $, vì vậy điều này làm giảm xung đột đặt tên tiềm năng.

(function($){
  //some code
})(jQuery);

— JSON C11
nguồn

2

Rất đơn giản, rõ ràng và giải thích ngắn gọn về việc đóng javascript.

— MÃ SỐ

16

document. yet chạy sau khi DOM được "xây dựng". Các hàm tự gọi chạy ngay lập tức - nếu được chèn vào <head>, trước khi DOM được xây dựng.

— srigi
nguồn

6

+1 để chống lại một downvote không cần thiết. Tuy nhiên, có một vấn đề nhỏ trong câu trả lời của bạn. Hàm tự gọi sẽ thực thi bất cứ nơi nào nó được tìm thấy khi phân tích cú pháp và không nhất thiết phải ở bên trong <head>và các quy tắc không khác nhau sau khi DOM ban đầu được xây dựng.

— Anurag