Khi nào tôi nên sử dụng hàm document.ready của jQuery?

107

Tôi đã được yêu cầu sử dụng document. Ngay từ khi tôi mới bắt đầu sử dụng Javascript / jQuery nhưng tôi chưa bao giờ thực sự biết tại sao.

Ai đó có thể cung cấp một số hướng dẫn cơ bản về thời điểm hợp lý khi bọc mã javascript / jquery bên trong jQuery document.readykhông?

Một số chủ đề tôi quan tâm:

  1. .on()Phương thức của jQuery : Tôi sử dụng .on()phương thức cho AJAX khá nhiều (thường là trên các phần tử DOM được tạo động). Nên .on()xử lý nhấp chuột luôn được bên trong document.ready ?
  2. Hiệu suất: Việc giữ các đối tượng javascript / jQuery khác nhau bên trong hoặc bên ngoài document.ready có hiệu quả hơn không ( ngoài ra , sự khác biệt về hiệu suất có đáng kể không?)?
  3. Phạm vi đối tượng: Các trang được tải AJAX không thể truy cập các đối tượng nằm trong tài liệu của trang trước. Đúng không? Họ chỉ có thể truy cập các đối tượng nằm ngoài document.ready (tức là các đối tượng "toàn cục" thực sự)?

Cập nhật: Để làm theo phương pháp hay nhất, tất cả javascript của tôi (thư viện jQuery và mã ứng dụng của tôi) nằm ở cuối trang HTML và tôi đang sử dụng deferthuộc tính trên các tập lệnh chứa jQuery trên các trang được tải AJAX của mình để tôi có thể truy cập thư viện jQuery trên các trang này.

javascript  jquery  dom  event-handling  document-ready 
— tim peterson
nguồn
2
Bởi vì nếu DOM chưa sẵn sàng, bạn có thể nhận được kết quả không mong muốn, vậy thôi.
— Robert Harvey
1
2. Vâng tôi sử dụng bên ngoài chỉ để gỡ lỗi và có thể gọi một số var / chức năng của giao diện điều khiển,
— jd_7
@RobertHarvey loại kết quả "bất ngờ" nào? bạn có thể cung cấp một ví dụ?
— tim peterson
3
Bạn cố gắng sửa đổi một phần tử hoặc thuộc tính chưa được đưa vào DOM.
— Robert Harvey

Câu trả lời:

143

Nói một cách đơn giản,

$(document).readylà một sự kiện diễn ra khi documentsẵn sàng.

Giả sử bạn đã đặt mã jQuery của mình trong headphần và cố gắng truy cập vào một domphần tử (một anchor, một img, v.v.), bạn sẽ không thể truy cập vào nó vì htmlđược diễn giải từ trên xuống dưới và các phần tử html của bạn không xuất hiện khi mã jQuery của bạn chạy.

Để khắc phục vấn đề này, chúng tôi đặt mọi mã jQuery / javascript (sử dụng DOM) bên trong $(document).readyhàm được gọi khi tất cả các domphần tử có thể được truy cập.

Và đây là lý do, khi bạn đặt mã jQuery của mình ở dưới cùng (sau tất cả các phần tử dom, ngay trước đó </body>), bạn không cần$(document).ready

Không cần đặt onphương thức bên trong $(document).readychỉ khi bạn sử dụng onphương thức trên documentvì lý do tương tự như tôi đã giải thích ở trên.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

BIÊN TẬP

Từ nhận xét,

  1. $(document).readykhông đợi hình ảnh hoặc tập lệnh. Đó là sự khác biệt lớn giữa $(document).readyvà$(document).load

  2. Chỉ mã truy cập DOM phải ở trong trình xử lý sẵn sàng. Nếu đó là một plugin, nó sẽ không ở trong sự kiện sẵn sàng.

— Jashwant
nguồn
@Dipaks Có, tại sao không? Chúng tôi chỉ rất quen với việc sử dụng $(document).ready. Xem này
— Jashwant
Miễn là bạn tải jQuery trong headvà bạn là tập lệnh sau khi các phần tử được thao tác, document.readylà không cần thiết. Hình ảnh này là một trường hợp đặc biệt mặc dù ...
— elclanrs
@elclanrs Xem câu hỏi cập nhật của tôi. Tôi đang tải jQuery ở cuối trang HTML với mã dành riêng cho ứng dụng của tôi ngay sau đó.
— tim peterson
@Jashwant làm thế nào về sự khác biệt hiệu suất của dom.ready so với không? Những cái đó có liên quan không?
— tim peterson
1
Chúng tôi không đặt tất cả jQuerymã vào trình xử lý sẵn sàng. Chỉ mã truy cập DOM. Nếu đó là một plugin, nó không phải là trong ready sự kiện
— Juan Mendes
7

Câu trả lời:

Phương thức .on () của jQuery: Tôi sử dụng phương thức .on () cho AJAX khá nhiều (tự động tạo các phần tử DOM). Trình xử lý nhấp chuột .on () có nên luôn ở bên trong document.ready?

Không, không phải luôn luôn. Nếu bạn tải JS của mình trong đầu tài liệu, bạn sẽ cần. Nếu bạn đang tạo các phần tử sau khi tải trang qua AJAX, bạn sẽ cần. Bạn sẽ không cần phải làm như vậy nếu tập lệnh nằm dưới phần tử html mà bạn cũng đang thêm trình xử lý.

Hiệu suất: Việc giữ các đối tượng javascript / jQuery khác nhau bên trong hoặc bên ngoài document.ready có hiệu quả hơn không (ngoài ra, sự khác biệt về hiệu suất có đáng kể không?)?

Nó phụ thuộc. Sẽ mất cùng một khoảng thời gian để đính kèm các trình xử lý, nó chỉ phụ thuộc vào việc bạn muốn nó xảy ra ngay lập tức khi trang đang tải hoặc nếu bạn muốn nó phải đợi cho đến khi toàn bộ tài liệu được tải. Vì vậy, nó sẽ phụ thuộc vào những gì khác bạn đang làm trên trang.

Phạm vi đối tượng: Các trang được tải AJAX không thể truy cập các đối tượng nằm trong tài liệu của trang trước. Đúng không? Họ chỉ có thể truy cập các đối tượng nằm ngoài document.ready (tức là các đối tượng "toàn cục" thực sự)?

Về cơ bản, nó là một chức năng riêng vì vậy nó chỉ có thể truy cập các vars được khai báo ở phạm vi toàn cục (bên ngoài / bên trên tất cả các chức năng) hoặc với window.myvarname = '';

— Justin
nguồn
6

Trước khi có thể sử dụng jQuery một cách an toàn, bạn cần đảm bảo rằng trang ở trạng thái sẵn sàng được thao tác. Với jQuery, chúng tôi thực hiện điều này bằng cách đặt mã của chúng tôi vào một hàm, rồi chuyển hàm đó sang $(document).ready(). Hàm chúng ta chuyển qua có thể chỉ là một hàm ẩn danh .

$(document).ready(function() {  
    console.log('ready!');  
});

Thao tác này sẽ chạy hàm mà chúng ta chuyển đến .ready () khi tài liệu đã sẵn sàng. Những gì đang xảy ra ở đây? Chúng tôi đang sử dụng $ (document) để tạo một đối tượng jQuery từ tài liệu trên trang của chúng tôi, sau đó gọi hàm .ready () trên đối tượng đó, chuyển cho nó hàm mà chúng tôi muốn thực thi.

Vì đây là điều bạn sẽ thấy mình phải làm rất nhiều, có một phương pháp viết tắt cho việc này nếu bạn thích - hàm $ () thực hiện hai nhiệm vụ như một bí danh cho $ (document) .ready () nếu bạn chuyển nó một hàm:

$(function() {  
    console.log('ready!');  
});

Đây là một bài đọc hay: Nguyên tắc cơ bản về Jquery

— Tom Sarduy
nguồn
3
Không nên nhầm lẫn với (function($){ })(jQuery);bao bọc mã của bạn để $ đó là jQuery bên trong đóng cửa mà
— John Magnolia
3

Thực tế, document.readykhông cần thiết cho bất kỳ điều gì khác ngoài việc thao tác chính xác DOM và nó không phải lúc nào cũng cần thiết hoặc là lựa chọn tốt nhất. Ý tôi là khi bạn phát triển một plugin jQuery lớn, chẳng hạn, bạn hầu như không sử dụng nó trong suốt mã bởi vì bạn đang cố giữ nó KHÔ, vì vậy bạn trừu tượng hóa càng nhiều càng tốt trong các phương thức thao túng DOM nhưng có nghĩa là được gọi sau này. Khi tất cả mã của bạn được tích hợp chặt chẽ, phương pháp duy nhất document.readyđược hiển thị thường là initnơi mọi phép thuật DOM xảy ra. Hy vọng điều này trả lời câu hỏi của bạn.

— elclanrs
nguồn
0

Bạn nên ràng buộc tất cả các hành động trong document.ready, vì bạn nên đợi cho đến khi tài liệu được tải đầy đủ.

Tuy nhiên, bạn nên tạo các hàm cho tất cả các hành động và gọi chúng từ bên trong document.ready. Khi bạn tạo các hàm (đối tượng chung của bạn), hãy gọi chúng bất cứ khi nào bạn muốn. Vì vậy, khi dữ liệu mới của bạn được tải và các phần tử mới được tạo, hãy gọi lại các hàm đó.

Những hàm này là những hàm mà bạn đã ràng buộc các sự kiện và mục hành động.

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

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
— Pulkit Mittal
nguồn
0

Tôi đã thêm một liên kết đến một div và muốn thực hiện một số tác vụ khi nhấp chuột. Tôi đã thêm mã bên dưới phần tử được nối thêm trong DOM nhưng nó không hoạt động. Đây là mã:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

Nó đã không hoạt động. Sau đó, tôi đặt mã jQuery bên trong $ (document) .ready và nó hoạt động hoàn hảo. Đây rồi.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});
— An toàn hơn Ahmed
nguồn
-2

sự kiện sẵn sàng xảy ra khi DOM (mô hình đối tượng tài liệu) đã được tải.

Bởi vì sự kiện này xảy ra sau khi tài liệu đã sẵn sàng, đây là một nơi tốt để có tất cả các sự kiện và hàm jQuery khác. Giống như trong ví dụ trên.

Phương thức ready () chỉ định điều gì sẽ xảy ra khi một sự kiện sẵn sàng xảy ra.

Mẹo: Không nên sử dụng phương thức ready () cùng với.

— Shrikant Shiledar
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.