$ (Tài liệu). Đã cần thiết chưa?


111

Tôi đã thấy câu hỏi này trong stackoverflow nhưng không cảm thấy rằng nó đã được trả lời chút nào.

$(document).readycần thiết không?

Tôi liên kết tất cả các javascrip của mình ở cuối trang nên về lý thuyết, chúng đều chạy sau khi tài liệu đã sẵn sàng.


3
Các trình duyệt cũ hơn có thể không được tải xuống song song mà các trình duyệt mới hơn sử dụng. Đó là lý do chính mà các tập lệnh của bạn được đặt ở dưới cùng. Nó đặc biệt cho phép HTML và CSS của bạn được hiển thị đầu tiên trên các trình duyệt cũ hơn. Tại thời điểm này, bạn có một lựa chọn để thực hiện về cách bạn muốn thực hiện việc cảm nhận rằng DOM được tải. Hai phương pháp phổ biến để khởi động js của bạn là window.onload & $ (document) .ready (kết hợp với jQuery). Có các tùy chọn khác và dễ dàng tìm kiếm, nhược điểm rõ ràng của window.onload. Vấn đề là $ (tài liệu) .ready hoạt động thường xuyên hơn không và rất dễ sử dụng.
BradChesney79

Câu trả lời:


125

$(document).readycần thiết không?

Không

nếu bạn đã đặt tất cả các tập lệnh của mình ngay trước </body>thẻ đóng, bạn đã làm điều tương tự.

Ngoài ra, nếu tập lệnh không cần truy cập DOM, nó sẽ không quan trọng khi nó được tải ở đâu ngoài sự phụ thuộc có thể có vào các tập lệnh khác.

Đối với nhiều CMS, bạn không có nhiều lựa chọn về nơi tải các tập lệnh, vì vậy, đây là một hình thức tốt để mã mô-đun sử dụng document.readysự kiện. Bạn có thực sự muốn quay lại và gỡ lỗi mã cũ nếu bạn sử dụng lại nó ở nơi khác không?

đề ra:

Một lưu ý phụ: bạn nên sử dụng jQuery(function($){...});thay vì $(document).ready(function(){...});nó buộc bí danh $.


Bạn có chắc rằng nó là "điều chính xác"? Tôi có ấn tượng rằng css của bạn (hoặc mã khác được tải song song với html chính) có thể chưa được phân tích cú pháp đầy đủ.
Zach Lysobey

6
@ZachL, tài liệu có thể sẵn sàng trước khi CSS được phân tích cú pháp hoàn toàn. document.ready không giống như onloadsự kiện, nơi hình ảnh và các nội dung bên ngoài khác đã tải xong.
zzzzBov

Cảm ơn bạn đã làm rõ.
Zach Lysobey

5
"Không" này chỉ làm tôi mất 3 giờ làm việc .. chỉ cần đảm bảo rằng bạn không nhầm </body> với <body> :)
teejay

1
Mặc dù vậy, tôi không nhất thiết đồng ý với việc ép buộc bí danh, đặc biệt nếu noConflict()cần được sử dụng vì một số lý do.
Jay Blanchard

22

Không, nếu javascript của bạn là thứ cuối cùng trước khi đóng, bạn sẽ không cần thêm các thẻ đó.

Lưu ý thêm, viết tắt của $ (document) .ready là mã bên dưới.

$(function() {
// do something on document ready
});

Câu hỏi này có thể tốt. Bạn đã đọc nó? jQuery: Tại sao lại sử dụng document.ready nếu JS bên ngoài ở cuối trang?


6
Câu hỏi về cơ bản là "Tôi có cần tài liệu sẵn sàng khi tôi đặt các tập lệnh của mình ở cuối nội dung không?", Chứ không phải "Có cách viết tắt nào không $(document).ready()".
nnnnnn

4

Không, điều đó không cần thiết với điều kiện bạn biết rằng bạn không có bất kỳ điều gì bị trì hoãn xảy ra - và trong hầu hết các trường hợp, bạn sẽ biết liệu bạn đã phát triển những gì bạn đang làm từ trên xuống dưới hay chưa.

- Đó là khi bạn mang mã của người khác mà không kiểm tra kỹ lưỡng, mà bạn không biết.

Vì vậy, hãy tự hỏi bạn có đang sử dụng một khuôn khổ hoặc trình soạn thảo giúp bạn với cấu trúc không? Bạn đang mang mã của người khác và bạn không buồn đọc qua từng tệp? Bạn đã chuẩn bị đi qua ma trận Hệ điều hành, Trình duyệt và Phiên bản Trình duyệt để kiểm tra mã của mình chưa? Bạn có cần phải tăng tốc độ từng chút một từ mã của mình không?

document.ready () khiến nhiều câu hỏi trong số đó trở nên không liên quan. document.ready () được thiết kế để giúp cuộc sống của bạn dễ dàng hơn. Nó có hiệu suất nhỏ (và tôi dám nói là chấp nhận được).


Chỉ là một cái gì đó tôi đã thấy - một trong những chỉnh sửa của bạn đã bị từ chối, nhưng nó có vẻ ổn đối với tôi. Bạn có thể muốn gửi lại cái đó: stackoverflow.com/review/suggested-edits/3224385
Qantas 94 Heavy

1

Tôi đã thấy các tài liệu tham khảo / bài đăng blog trên internet về việc sử dụng jquery's document.ready. Theo tôi, cả việc sử dụng nó hoặc đặt tất cả javascript của bạn ở cuối trang đều hợp lệ. Và bây giờ câu hỏi sẽ là cái nào tốt hơn? Nó chỉ là một vấn đề của phong cách lập trình.


0

Không nó không cần thiết. Bạn có thể đặt thẻ script ngay trước thẻ đóng nội dung hoặc nếu bạn đang hỗ trợ IE9 +, bạn có thể sử dụng JS gốc.

<script>alert('DOM Loaded!');</script>
</body>

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
      // DOM has loaded ready to fire JS scripts
    });
</script>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.