Hàm ẩn danh so với hàm được đặt tên riêng để khởi tạo trong jquery


9

Giả sử chúng ta có một số mã được sử dụng để khởi tạo mọi thứ khi một trang được tải và nó trông như thế này:

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

Hàm initStuff chỉ được gọi từ dòng thứ ba của đoạn mã. Không bao giờ lặp lại. Vì vậy, mọi người thường đặt nó vào một cuộc gọi lại ẩn danh như thế này:

$(document).ready(function() { 
    //Body of initStuff
});

Có chức năng ở một vị trí chuyên dụng trong mã không thực sự giúp ích cho khả năng đọc, bởi vì với lệnh gọi sẵn sàng () làm cho rõ ràng đây là mã khởi tạo.

Có bất kỳ lý do khác để thích cái này hơn cái kia không?


4
Cái đầu tiên làm tắc nghẽn không gian tên toàn cầu. Chọn cái thứ hai.
riwalk

Câu trả lời:


10

Như @ Stargazer712 đã đề cập, cái đầu tiên làm tắc nghẽn không gian tên toàn cầu, vì vậy cái thứ hai là người chiến thắng IMHO. Bây giờ, đã nói rằng, bởi vì bạn đang sử dụng một hàm ẩn danh trong ví dụ thứ hai, cuộc gọi trình gỡ lỗi của bạn sẽ vô dụng và sẽ nhận được các kết quả khác nhau tùy thuộc vào trình gỡ lỗi bạn sử dụng. Thông thường, những gì tôi kết thúc là:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

Theo cách đó, không gian tên toàn cầu không bị lộn xộn và bạn có một cách gọi hữu ích.

Tôi có xu hướng sử dụng quy ước trên trong tất cả các định nghĩa hàm ẩn danh (tốt, không ẩn danh nữa;)). Đó là một quy ước mà tôi tìm thấy khi duyệt qua mã Firefox Firefox.

Chỉnh sửa: Bây giờ đã nói tất cả những điều đó, Oliver đưa ra một điểm tốt với các bài kiểm tra đơn vị. Ở trên có nghĩa là hoạt động như một trình bao bọc cho các hoạt động phức tạp hơn, không chứa một tấn mã chưa được kiểm tra.


+1 Để đề cập đến gỡ lỗi. Tôi thường thấy việc sử dụng "các cuộc gọi lại có tên" (không biết thuật ngữ này có thực sự tồn tại không) trong mã Node.js, vì vậy tôi cũng đoán đó là cách thực hành tốt.
Oliver Weiler

kangax.github.com/nfe Các biểu thức hàm được đặt tên - Bài viết này cho bạn biết mọi thứ bạn từng muốn biết về chúng.
Sean McMillan

7

Tôi nói trong trường hợp này có lẽ không thành vấn đề, nhưng nếu bạn có chức năng gọi lại ẩn danh, gọi các hàm gọi lại ẩn danh khác, tôi có xu hướng sử dụng cách tiếp cận đầu tiên, vì nó làm cho mã dễ đọc hơn và dễ theo dõi hơn.

Liên quan đến thử nghiệm đơn vị, cách tiếp cận đầu tiên sẽ tốt hơn, vì bạn có thể kiểm tra initstuffchức năng một cách cô lập.


Thông thường chúng ta không có nhiều mã trong các hàm khởi tạo này. Nó có thể lấy một số dữ liệu từ một vài nơi và đó là
Martin N.

3

Tôi sẽ chọn cái đầu tiên, để đọc / gỡ lỗi / kiểm tra, v.v. Bạn có thể tránh vấn đề lộn xộn không gian tên toàn cầu bằng cách tạo một không gian tên cục bộ cho tất cả các chức năng trên trang của bạn. Tôi sử dụng kiểu ký hiệu đối tượng, theo khuyến nghị của Paul Irish (xem các slide 13-15 trên http://paulirish.com/2009/perf/ )

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);

2

Ngoài ra còn có cách thứ ba để đăng ký các phương thức init mà không làm lộn xộn không gian tên toàn cầu mà tôi thích:

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

Nó ngắn và tránh tra cứu tài liệu DOM như

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

làm.


+1: Tôi nghĩ rằng đây là thông lệ tiêu chuẩn, nhưng để tránh mọi vấn đề với các định nghĩa mâu thuẫn về $tôi thích:jQuery(function($) {...});
kevin cline
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.