Sử dụng chức năng tự gọi ẩn danh và $ (tài liệu) .ready

Question

Tôi vừa mới học về các chức năng ẩn danh tự gọi. Một số đoạn mã mà tôi bắt gặp đã sử dụng chức năng tự gọi cùng với $ (tài liệu) .ready. Nó có vẻ dư thừa, hoặc vô nghĩa, để sử dụng cả hai.

Có một trường hợp bạn muốn sử dụng

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

vs

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

Tôi hình dung mà bạn muốn hoặc muốn kịch bản được thực hiện ngay lập tức hoặc sau khi DOM nạp. Tôi không thể hiểu tại sao bạn lại dùng cả hai.

Cảm ơn.

Answer 1

Chắc chắn có trường hợp sử dụng cho ví dụ đầu tiên. Nếu bạn có các thư viện/tập lệnh JS khác được tải trên cùng một trang, không đảm bảo rằng chúng không ghi đè biến số $. (Điều này rất phổ biến khi bạn có Prototype và jQuery trên cùng một trang).

Vì vậy, nếu Prototype đang sử dụng $, bạn sẽ cần phải sử dụng jQuery bất cứ khi nào bạn muốn làm việc với jQuery. Điều này có thể nhận được khá xấu xí:

jQuery(function(){ 
    jQuery('a', '#content').bind('click', function(){ 
     if(jQuery(this).attr('href') == 'www.google.com') 
     { 
      alert("This link goes to Google"); 
      jQuery(this).addClass('clicked')); 
     } 
    }); 
}) 

Hãy nhớ rằng, chúng ta không thể sử dụng $ bởi vì đó là một phương pháp từ thử nghiệm trong phạm vi toàn cầu.

Nhưng nếu bạn quấn nó bên trong này ..

(function($){ 
    $(function(){ 

     // your code here 

    }); 
})(jQuery); 

Các $ sẽ thực sự tham khảo các thư viện jQuery trong khi vẫn đề cập đến Nguyên mẫu ở bên ngoài!Điều này có thể giúp dọn dẹp mã của bạn:

(function($){ 
    $(function{}(
     jQuery('a', '#content').bind('click', function(){ 
      if(jQuery(this).attr('href') == 'www.google.com') 
      { 
       alert("This link goes to Google"); 
       jQuery(this).addClass('clicked')); 
      } 
     }); 
    )); 
})(jQuery); 

Đây là một mô hình phổ biến với phần mở rộng jQuery để đảm bảo rằng họ luôn được bổ sung vào đối tượng jQuery, nhưng có thể được viết bằng $ để giữ mã gọn gàng.

Answer 2

Bạn sẽ không muốn sử dụng cả hai cùng nhau, có điều gì đó bạn đang thực hiện yêu cầu bạn phải không?

Trong tài liệu jquery api đây, http://api.jquery.com/ready/, bạn có thể thấy những ví dụ:

Các .ready() phương pháp thường được sử dụng với một chức năng ẩn danh:

$ (document) .ready (function() {
// Trình xử lý cho .ready() được gọi là.

});

Đó là tương đương với cách gọi:

$ (function() {.
// Handler cho .ready() được gọi

});

Nhưng tôi không chắc chắn nếu điều này trả lời câu hỏi của bạn vì tôi không thấy nơi bạn thực sự yêu cầu. Hy vọng điều này sẽ giúp chỉ giống nhau!

Answer 3

Lý do duy nhất bạn giới thiệu một kết thúc khác là giới thiệu một phạm vi ranh giới khác để tải/bảo vệ các đối tượng toàn cầu như $.

Ví dụ:

$(document).ready(function(){ 

    // Do upper scope things. 

    (function(){ 

     // Do lower scope things. 

    })(); 

}); 

Dựa trên bạn nói thời gian gần đây bạn đã tìm hiểu về công cụ này tôi giả sử bạn đang relativly mới JavaScript.

Tôi đã đặt cùng một bài đăng trên blog có thể giúp giải thích một số khái niệm cơ bản hình thành quan điểm của người mới đến JavaScript, bao gồm phạm vi chức năng. http://bit.ly/tLkykX