Những cạm bẫy của việc thực thi jQuery mà không có $ (tài liệu) .ready() ;?

Question

Tự giải thích, tôi hy vọng.

Answer 1

Bộ chọn jQuery của bạn sẽ ngẫu nhiên bỏ lỡ bất kỳ phần tử nào vì nó chưa được tải (bởi trình duyệt).

Answer 2

Sẽ không thể đoán trước khi tập lệnh sẽ chạy từ trình duyệt đến trình duyệt, từng trang.

Answer 3

$ (document) .ready() là cách của jQuery để đảm bảo rằng mã bạn muốn chạy trên tải trang chạy cùng một lúc trên các trình duyệt.

Nó cũng cung cấp cơ chế để ngăn xếp các chức năng khác nhau để chạy khi tải trang. Nếu bạn không sử dụng nó và bạn có nhiều bài tập onLoad, chỉ bài tập được thêm vào cuối cùng mới thực sự chạy.

Answer 4

Khi bạn chọn các phần tử trong DOM, đôi khi chúng sẽ hoạt động và đôi khi chúng không hoạt động.

Nó chỉ phụ thuộc vào việc chúng có được tải hay không.

Tuy nhiên, nếu bạn ném vào tập lệnh ở cuối tài liệu, thông thường sẽ không sao. (Kể từ thời điểm đó trong thời gian nó nên đã nạp tất cả mọi thứ).

Answer 5

Đây là điều đầu tiên cần tìm hiểu về jQuery: Nếu bạn muốn một sự kiện hoạt động trên trang của mình, bạn nên gọi nó bên trong hàm $ (document) .ready(). Mọi thứ bên trong nó sẽ tải ngay khi DOM được tải và trước khi nội dung trang được tải.

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
}); 

Hàm $ (tài liệu) .ready() có nhiều ưu điểm hơn các cách khác để các sự kiện hoạt động. Trước hết, bạn không phải đặt bất kỳ đánh dấu "hành vi" nào trong HTML. Bạn có thể tách tất cả JavaScript/jQuery của mình thành một tệp riêng biệt, nơi nó dễ bảo trì hơn và nơi nó có thể nằm ngoài cách của nội dung. Tôi không bao giờ thích nhìn thấy tất cả các thông báo "javascript: void()" đó trên thanh trạng thái khi tôi di chuột qua một liên kết. Đó là những gì xảy ra khi bạn đính kèm sự kiện trực tiếp vào trong thẻ.

Trên một số trang sử dụng JavaScript truyền thống, bạn sẽ thấy thuộc tính "onload" trong thẻ. Vấn đề với điều này là nó bị giới hạn chỉ một chức năng. Oh yeah, và nó thêm đánh dấu "hành vi" vào nội dung một lần nữa. Cuốn sách tuyệt vời của Jeremy Keith, DOM Scripting, đã chỉ cho tôi cách tạo một hàm addLoadEvent cho một tệp JavaScript riêng biệt cho phép nhiều hàm được nạp bên trong nó. Nhưng nó đòi hỏi một số tiền hợp lý của mã cho một cái gì đó nên được khá đơn giản. Ngoài ra, nó kích hoạt các sự kiện đó khi tải cửa sổ, dẫn tôi đến một lợi thế khác của $ (document) .ready().

Với $ (tài liệu) .ready(), bạn có thể tải sự kiện hoặc kích hoạt hoặc bất cứ điều gì bạn muốn họ thực hiện trước khi tải cửa sổ. Tất cả mọi thứ mà bạn dính vào bên trong dấu ngoặc đơn đã sẵn sàng để đi vào thời điểm sớm nhất có thể - ngay khi DOM được trình duyệt đăng ký, cho phép ẩn và hiển thị các hiệu ứng và các nội dung khác ngay lập tức khi người dùng nhìn thấy các yếu tố trang đầu tiên.

tham chiếu từ http://docs.jquery.com/Tutorials:Introducing_ $ (document) .ready()

Answer 6

Bassicly sử dụng quy tắc cơ bản này:

nếu mã của bạn liên quan đến DOM quấn mã của bạn trong $ (document) .ready(). Nếu nó không liên quan đến DOM, thì đừng bao bọc nó trong $ (tài liệu).sẵn sàng()

Answer 7

hmm nếu nó không được bao bọc, JavaScript đơn giản của nó cũ, làm những gì bạn muốn với điều đó, nhưng thư viện jQuery sẽ được tải, khó nói.

Answer 8

Có hai lý do chính để sử dụng

$(document).ready (function()) // or $(function()) 

1) Nó đảm bảo rằng mã trong vòng chỉ chạy một lần DOM được nạp đầy đủ (điều này không bao gồm tải hình ảnh, đèn flash hoặc các nguồn lực khác, chỉ cần DOM được xây dựng từ HTML). Điều này có nghĩa rằng bạn có thể đặt javascript ở bất kỳ đâu trong HTML thay vì ở dưới cùng (với vani javascript là nơi duy nhất bạn có thể đặt nó để đảm bảo rằng nó sẽ hoạt động trên toàn bộ DOM thay vì những gì hiện đang được tải). Trừ khi bạn sử dụng sự kiện window.onload cũng đảm bảo điều này, nhưng chỉ có thể được sử dụng một lần. Điều đó đưa tôi đến điểm thứ hai của tôi;

2) Nó cho phép bạn kích hoạt nhiều chức năng khi trang đã tải, thay vì sử dụng duy nhất window.onload mà bạn có khi sử dụng javascript vanilla. Điều này là tuyệt vời bởi vì nó có nghĩa là bạn không phải a) viết chức năng của riêng bạn để chăm sóc nó, b) lo lắng về việc kiểm tra xem có chức năng onload từ thư viện khác hay không, c) chi tiêu những gì cảm thấy như năm gỡ lỗi chỉ để tìm ra rằng window.onload của bạn đã bị ghi đè bởi mã của người khác.

Điểm thưởng: 3) Có vẻ thú vị, phải không? : P

Ghi chú khác: Nếu bạn không sử dụng hoặc thao tác DOM thì mã của bạn không cần phải đi bên trong hàm $ (document) .ready().

Đặt tệp javascript của bạn ở cuối html, ngay trước khi </body > sẽ giúp tăng tải cảm giác - không thực sự nhanh hơn, nhưng trình duyệt sẽ tải JS sau HTML, vì vậy có thể bắt đầu hiển thị HTML trong khi JS đang tải. Điều này lần lượt có nghĩa là một cái gì đó sẽ xuất hiện trên màn hình của người dùng một phần hai sớm hơn một kịch bản trong < đầu > - và trong web, chia giây đếm :)