chức năng bên trong hoặc bên ngoài tài liệu jquery sẵn sàng

Question

Cho đến bây giờ, tôi chỉ cần đặt tất cả tính ưu việt của jQuery vào hàm $(document).ready(), bao gồm các hàm đơn giản được sử dụng trong các tương tác người dùng nhất định.

Nhưng các chức năng không yêu cầu tài liệu DOM phải được tải hoặc chỉ được gọi sau đó, có thể được đặt bên ngoài $(document).ready(). Ví dụ, hãy xem xét một hàm xác thực rất đơn giản như:

function hexvalidate(color) { 
// Validates 3-digit or 6-digit hex color codes 
var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/; 
return reg.test(color); 
} 

Chức năng này chỉ được gọi từ trong hàm $(document).ready().

Thực tiễn tốt nhất (cú pháp, tốc độ); đặt một hàm như vậy bên trong hoặc bên ngoài chức năng sẵn sàng của tài liệu jquery?

Answer 1

Đặt nó bên trong để nó không gây ô nhiễm không gian tên chung. Nó cũng đảm bảo giải quyết nhanh hơn tên hàm vì các chuỗi phạm vi của JavaScript.

Đặt nó bên ngoài nếu đó là thành phần có thể sử dụng lại để bạn có thể dễ dàng di chuyển nó trong một tệp riêng biệt và gọi từ các ngữ cảnh khác nhau.

Vì bạn đã sử dụng JQuery, nó worths nhắc đến, rằng trong trường hợp của bạn, bạn có thể muốn xác định hexvalidate như một JQuery pluginngoài và sau đó gọi nó bên.

Answer 2

một lợi thế của việc đặt các chức năng đó vào bên trong chức năng sẵn sàng của tài liệu là chúng không gây ô nhiễm không gian tên chung của bạn ... với nhược điểm là nếu bạn cần chúng ở một nơi khác trên trang, chúng sẽ không có sẵn.

Answer 3

Nếu tất cả các chức năng của bạn chỉ được gọi từ bên trong khối jQuery(function() { }), hãy đặt chúng vào bên trong. Nếu không, bạn không gây ô nhiễm không gian tên toàn cầu, điều này có thể dẫn đến xung đột trên đường.

Chỉ các hàm khai báo chung trên toàn cầu cũng được sử dụng theo mã trong phạm vi khác.

Answer 4

Nếu bạn đang tạo một hàm cần được gọi bên ngoài phạm vi của hàm $ (document) .ready(), hãy giữ nó bên ngoài hàm $ (document) .ready().

Nếu không, hãy giữ nội bộ.

Answer 5

Tôi không nghĩ bạn nên sử dụng bất kỳ 'chức năng nào' ngay từ đầu. Trong OOP javascript, một "hàm" thường thuộc về một trong bốn loại riêng biệt:

• Xây dựng hoặc đóng cửa 'init' ẩn danh - được sử dụng để xây dựng các đối tượng. Các loại duy nhất của chức năng được phép trở thành toàn cầu
• Phương pháp - chức năng đó là một phần của một số đối tượng
• Utility - chức năng bên trong của một nhà xây dựng/phương pháp, vô hình từ bên ngoài
• liên tục - một hằng số chức năng thông qua như thông số

ví dụ

(function() { <- init closure 

     function helper1() { <- utility } 

     globalSomething = { 

       foobar: function() { <- method 
        xyz.replace(/.../, function() { <- constant }) 

       } 
     } 
)() 

Trong ví dụ của bạn, 'hexvalidate' rõ ràng là một phần của đối tượng Validator, trong đó, lần lượt, có thể được thực hiện một plugin jQuery:

(function($) { 
     $.validate = { 
      hexColor: function(color) { ... your code } 
      more validators... 
     } 
    )(jQuery)