Tại sao tôi đóng gói một hàm jQuery trong jQuery (hàm ($) {});

Question

Tôi đã xem qua một đoạn mã mà trông như thế này:

jQuery(function($) { 
    $('#saySomething').click(function() { 
    alert('something'); 
    }); 
}); 

Tôi hoàn toàn không nhận được nó. Tại sao tôi không thể chỉ đơn giản là làm điều này:

$('#saySomething').click(function() { 
    alert('saySomething'); 
}); 

Answer 1

jQuery(function ($) {...}); 

là phiên bản viết tắt của:

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

Nếu bạn không chờ đợi cho document phải sẵn sàng, các yếu tố mà bạn' d ràng buộc các sự kiện trên sẽ không tồn tại trong dom, và các sự kiện sẽ không bị ràng buộc.

Hoặc bạn có thể đợi body để tải xong, tuy nhiên sẽ bao gồm việc đợi hình ảnh mất nhiều thời gian hơn để tải.

Sự thật được kể, you don't have to wait for document.ready. Bạn có thể đi trước và sử dụng $('#saySomething').click(...) nếu bạn biết yếu tố tồn tại trong DOM:

<button id="saySomething>Say Something!</button> 
<script> 
    jQuery('#saySomething').click(...); 
</script> 

Có một sắc thái cuối cùng để jQuery(function ($) {...}); mà bạn nên biết. Tham số $ trong hàm được sử dụng cho bí danh jQuery đến $, cho phép bạn sử dụng viết tắt $ trong hàm mà không phải lo lắng về xung đột với các thư viện khác (chẳng hạn như nguyên mẫu).

Nếu bạn không chờ đợi document.ready nó phổ biến để xem một IIFE sử dụng để bí danh jQuery:

(function ($) { 
    $('#saySomething').click(...); 
}(jQuery)); 

Answer 2

jQuery(function($) { 

là một phím tắt cho

jQuery(document).ready(function(){ 

này chờ đợi cho đến khi tài liệu là trong trạng thái "sẵn sàng" trong đó DOM được tạo. Các kịch bản jQuery của bạn có thể làm việc với trang hoàn chỉnh và không bỏ sót bất kỳ phần tử nào.

Nhưng - bạn có thể chạy jQuery mà không cần nó. Nếu kịch bản của bạn nằm trong phần đầu, bạn có nguy cơ chọn các phần tử chưa được tạo. Tôi đã sử dụng jQuery trong phần nội dung tài liệu của mình ngay lập tức sau khi (các) thành phần tôi muốn ảnh hưởng đến trong nỗ lực hoạt động trên chúng ngay khi có thể. Đó là một trường hợp bất thường và tôi thường không làm điều đó.

Một lý do khác để sử dụng chức năng sẵn sàng - bạn có thể chạy nhiều lần. Nếu bạn bao gồm nhiều tập lệnh hoặc bạn có mã được bao gồm có điều kiện, bạn có thể có nhiều hàm ready(). Mã trong mỗi khối sẵn sàng được giữ cho đến khi trạng thái sẵn sàng đạt được, và sau đó mã được thực thi theo thứ tự nó được thêm vào.

Answer 3

Ví dụ đầu tiên được thoát sau khi trang được tải hoàn toàn. Ví dụ thứ hai được thực hiện trực tiếp (và có thể sẽ thất bại).

Vì vậy, đầu tiên là viết tắt của:

$(document).ready(function(){ 
    // Do something after the page is loaded. 
}); 

Answer 4

Đây là viết tắt cho "tải tài liệu" và họ cũng đã sử dụng longhand "jQuery" với $ aliased bên trong để tránh va chạm với các thư viện khác sử dụng ký hiệu $.

Nếu bạn không đợi tải tài liệu, mọi thứ có thể không thể dự đoán được/không hoạt động. Ngoài ra nếu bạn có đặt tên va chạm, mọi thứ sẽ chỉ đơn giản thổi lên.

Answer 5

$(function() {}) là viết tắt của jQuerys tài liệu chức năng sẵn sàng http://api.jquery.com/jQuery/#jQuery3 và http://api.jquery.com/ready/ để biết thêm thông tin

Answer 6

jQuery(function($) { ... }); là những gì ngăn cản mã của bạn từ thực hiện cho đến khi DOM (HTML) được trả lại đầy đủ và dễ tiếp cận.

Answer 7

Bạn sẽ tìm thấy tất cả các thông tin lên đây: http://api.jquery.com/ready/

Answer 8

sao chép và dán trực tiếp từ docs:

jQuery(callback) Returns: jQuery

Mô tả: liên kết với một chức năng được thực hiện khi DOM đã hoàn tất tải .

version added: 1.0jQuery(callback) 

`callback` The function to execute when the DOM is ready. 

Chức năng này hoạt động giống như $(document).ready(), ở chỗ nó nên được sử dụng để quấn $() hoạt động khác trên trang của bạn mà phụ thuộc vào DOM là sẵn sàng. Trong khi chức năng này, về mặt kỹ thuật, có thể thay đổi, thì có thực sự không được sử dụng nhiều cho việc chống lại nó.

Vui lòng xem lại api

Answer 9

jQuery(function(){...} Đây là một shorcut cho jQuery(document).ready(function(){...}). Sự kiện đã sẵn sàng được kích hoạt khi DOM đã sẵn sàng, do đó bạn sẽ chắc chắn rằng bạn không truy cập vào thứ gì đó chưa có sẵn.

Mặt khác, nếu bạn ràng buộc phương pháp nhấp chuột như bạn thực hiện trên đoạn mã thứ hai của mình. Mã đó sẽ được thực hiện ngay lập tức, vì vậy bạn cần phải chắc chắn rằng bạn đặt nó sau khi khai báo #saySomething.

Answer 10

Nó sẽ phụ thuộc vào ngữ cảnh của mã, nhưng có một thực hành thiết kế chung trong JavaScript để đóng gói các biến và phương thức trong một Không gian tên hoặc Mô hình mô-đun. Mã này có thể là một dẫn xuất của mục đích đó.

Lý do đằng sau Mô hình thiết kế mô-đun bao gồm các biến chứng với các biến toàn cục và sự nguy hiểm của 'clobbering'.

Có thể xảy ra hiện tượng Clobbering khi bất kỳ biến (hoặc hàm) nào cùng tên được xác định hai lần. Định nghĩa thứ hai sẽ ghi đè lên giá trị đầu tiên, và về bản chất là nó.

Vì vậy, quy tắc để bao bọc mã của bạn trong một cấu trúc bảo vệ các biến (và hàm) của bạn khỏi không gian tên chung. Douglas Crockford mô tả các loại kịch bản này.

example này cho thấy một hơi thân phổ biến hơn gọi là 'đóng cửa':

var jspy = (function() { 
    var _count = 0; 

    return { 
     incrementCount: function() { 
     _count++; 
     }, 
     getCount: function() { 
     return _count; 
     } 
    }; 
})(); 

Người ta mất phương hướng lúc đầu, nhưng một khi bạn nhận ra nó, nó trở thành bản chất thứ hai. Vấn đề là để đóng gói biến _count như một thành viên riêng cho đối tượng trả về có hai phương thức có thể truy cập.

Điều này là mạnh mẽ bởi vì không gian tên toàn cầu hiện chỉ bao gồm một var (jspy) trái ngược với một với hai phương pháp. Lý do thứ hai là nó mạnh mẽ là nó đảm bảo biến _count chỉ có thể được truy cập bởi logic trong hai phương thức (incrementCount, getCount).

Như tôi đã nói, mã của bạn có thể là một hóa thân của quy tắc chung này. Một trong hai cách điều quan trọng là phải biết mẫu này trong JavaScript vì nó mở ra cánh cửa cho các tương tác mạnh mẽ hơn nhiều giữa các khung công tác, ví dụ, và tải không đồng bộ của chúng như trong AMD.

Dưới đây là ví dụ đẹp namespace.

Tóm lại, có một Mẫu thiết kế JavaScript nâng cao sẽ giúp bạn biết và các cụm từ có liên quan là Mẫu mô-đun, Mẫu không gian tên. Các thuật ngữ liên quan bổ sung được đóng và AMD.

Hy vọng điều đó sẽ hữu ích. Tất cả tốt nhất! Nash