Cú pháp JavaScript / jQuery này hoạt động như thế nào: (hàm (cửa sổ, không xác định) {}) (cửa sổ)?

Bạn đã bao giờ xem qua mã nguồn của mã nguồn jQuery 1.4 và nhận thấy cách nó được gói gọn theo cách sau:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Tôi đã đọc một bài viết về Không gian tên JavaScript và một bài viết khác có tên " Một cặp Parens quan trọng ", vì vậy tôi biết một số điều đang diễn ra ở đây.

Nhưng tôi chưa bao giờ thấy cú pháp đặc biệt này trước đây. Cái đó undefinedđang làm gì vậy? Và tại sao windowcần phải được thông qua và sau đó xuất hiện ở cuối một lần nữa?

Không xác định là một biến bình thường và có thể được thay đổi đơn giản với undefined = "new value";. Vì vậy, jQuery tạo ra một biến "không xác định" cục bộ thực sự không xác định.

Các biến cửa sổ được thực hiện cục bộ vì lý do hiệu suất. Bởi vì khi JavaScript tìm kiếm một biến, đầu tiên nó sẽ đi qua các biến cục bộ cho đến khi tìm thấy tên biến. Khi không tìm thấy, JavaScript sẽ chuyển qua phạm vi tiếp theo, v.v. cho đến khi nó lọc qua các biến toàn cục. Vì vậy, nếu biến cửa sổ được tạo cục bộ, JavaScript có thể tìm kiếm nó nhanh hơn. Thông tin khác: Tăng tốc JavaScript của bạn - Nicholas C. Zakas

Chưa xác định

Bằng cách khai báo undefinednhư một đối số nhưng không bao giờ chuyển một giá trị cho nó, đảm bảo rằng nó luôn luôn không được xác định, vì nó chỉ đơn giản là một biến trong phạm vi toàn cầu có thể được ghi đè. Điều này làm cho a === undefinedmột sự thay thế an toàn typeof a == 'undefined', giúp tiết kiệm một vài ký tự. Nó cũng làm cho mã thân thiện với trình khai thác hơn, ví dụ như undefinedcó thể rút ngắn để ulưu thêm một vài ký tự.

Cửa sổ

Truyền windowdưới dạng đối số sẽ giữ một bản sao trong phạm vi cục bộ, điều này ảnh hưởng đến hiệu suất: http://jsperf.com/short-scope . Tất cả các truy cập windowbây giờ sẽ phải đi một cấp ít hơn trong chuỗi phạm vi. Như với undefined, một bản sao cục bộ một lần nữa cho phép thu nhỏ mạnh mẽ hơn.

Sidenote:

Mặc dù điều này có thể không phải là ý định của các nhà phát triển jQuery, việc truyền vào windowcho phép thư viện được tích hợp dễ dàng hơn trong môi trường Javascript phía máy chủ, ví dụ: node.js - nơi không có windowđối tượng toàn cầu . Trong tình huống như vậy, chỉ cần thay đổi một dòng để thay thế windowđối tượng bằng một dòng khác. Trong trường hợp của jQuery, một windowđối tượng giả có thể được tạo và chuyển qua cho mục đích cạo HTML (một thư viện như jsdom có thể làm điều này).

Những người khác đã giải thích undefined. undefinedgiống như một biến toàn cục có thể được xác định lại thành bất kỳ giá trị nào. Kỹ thuật này là để ngăn chặn tất cả các kiểm tra không xác định bị phá vỡ nếu ai đó viết nói, undefined = 10ở đâu đó. Một đối số không bao giờ được thông qua được đảm bảo là thực tế undefinedbất kể giá trị của biến undefined .

Lý do để vượt qua cửa sổ có thể được minh họa bằng ví dụ sau.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

Bảng điều khiển đăng nhập cái gì? Giá trị của windowđối tượng phải không? Sai lầm! 10? Sai lầm! Nó đăng nhập undefined. Trình thông dịch Javascript (hoặc trình biên dịch JIT) viết lại theo cách này -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

Tuy nhiên, nếu bạn lấy windowbiến làm đối số, không có var và do đó không có gì bất ngờ.

Tôi không biết jQuery có làm việc đó không, nhưng nếu bạn định nghĩa lại windowbiến cục bộ ở bất kỳ đâu trong hàm của bạn vì bất kỳ lý do gì, thì nên mượn nó từ phạm vi toàn cầu.

windowđược truyền vào như thế chỉ trong trường hợp ai đó quyết định xác định lại đối tượng cửa sổ trong IE, tôi giả sử như vậy undefined, trong trường hợp nó được gán lại theo một cách nào đó sau này.

Phần đầu windowtrong tập lệnh đó chỉ là đặt tên cho đối số "cửa sổ", một đối số mang tính cục bộ hơn là windowtham chiếu toàn cầu và mã mà bên trong bao đóng này sẽ sử dụng. Các windowcuối cùng là thực sự xác định những gì để vượt qua cho các đối số đầu tiên, trong trường hợp này có nghĩa là hiện tại của window... hy vọng là bạn chưa screwed up windowtrước khi điều đó xảy ra.

Điều này có thể dễ dàng hơn để nghĩ về bằng cách hiển thị các trường hợp điển hình nhất được sử dụng trong jQuery, cắm .noConflict()xử lý, vì vậy đối với đa số mã bạn vẫn có thể sử dụng $, thậm chí nếu nó có nghĩa là một cái gì đó khác hơn so với jQuerybên ngoài phạm vi này:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Đã thử nghiệm với 1000000 lần lặp. Kiểu nội địa hóa này không có tác dụng trong hiệu suất. Thậm chí không một mili giây trong 1000000 lần lặp. Điều này chỉ đơn giản là vô dụng.