jQuery, Điều gì là tốt nhất, có tất cả các ràng buộc trong một tệp duy nhất cho toàn bộ trang web hoặc trên cơ sở mỗi trang?

Question

Tôi đang ở giữa xây dựng một ứng dụng web với việc sử dụng nhiều plugin jQuery và rất nhiều các ràng buộc.

Phần cuối được phát triển với hệ thống mẫu chỉ cho phép (tính từ bây giờ) đặt tất cả các tập lệnh trong một tệp HTML đó. Chúng tôi sẽ sử dụng máy nén YUI để hợp nhất tất cả những thứ này thành một.

Bây giờ, đối với các ràng buộc, mức độ ràng buộc của nó trong tệp HTML (bây giờ là mẫu cho toàn bộ trang web) đối với các thành phần có thể không có trên một trang cụ thể?

Bất cứ lời khuyên được đánh giá rất

Answer 1

Tôi đã sử dụng Paul Irish's markup-based solution khá rộng rãi trên các trang web lớn hơn.

Answer 2

vấn đề lớn nhất cho việc sử dụng tất cả các ràng buộc trên tất cả các trang là bạn có thể nhận được các ràng buộc mà bạn không có ý định có, gây phiền hà ...

Và tất nhiên bạn sẽ có một số vấn đề hiệu suất trong tải trang, nhưng nếu đó là một vấn đề là tất nhiên tùy thuộc vào bao nhiêu bindings bạn có và làm thế nào mã trông giống như.

Answer 3

Bạn có thể mất một số hiệu suất ở phía máy khách (phân tích cú pháp tệp, thực hiện trình xử lý sẵn sàng tài liệu), nhưng nó cải thiện bộ nhớ đệm trên máy khách (nghĩa là tệp không cần chuyển nhiều lần). Điều đó tiết kiệm tra cứu máy chủ là tốt. Tôi nghĩ rằng đây là một lợi thế hơn là một bất lợi miễn là bạn có thể đảm bảo bạn không vô tình sửa đổi các đối tượng.

Answer 4

Tôi nghĩ rằng công cụ chọn đủ nhanh để bạn hoặc bất kỳ ai khác không nên nhận thấy sự khác biệt. Rõ ràng đây không phải là một "thực hành tốt nhất", nhưng nếu bạn đang ràng buộc với ID và tên lớp và bạn sẽ không có bất kỳ xung đột hoặc ràng buộc không mong muốn sau đó tôi không thấy tác hại.

Answer 5

Hãy cẩn thận với bộ chọn của bạn nếu bạn có một số trang lớn. Ví dụ, nếu bạn đã có một số trang có lớn, nhưng trơ ​​(không ràng buộc) bảng, nhưng khác các trang mà bảng nhỏ nhưng có các điều khiển trong đó, có thể bạn không muốn làm điều này:

$('td.bindMe').bind('whatever', function() { ... }); 

(Đặt sang một bên vấn đề live() ở đây; đôi khi bạn cần phải làm công việc từng phần tử và đó là những gì tôi đang nói.) Vấn đề là Sizzle sẽ phải xem xét tất cả các phần tử td trên trang, có khả năng. Thay vào đó, bạn có thể đặt một số loại "đánh dấu" container xung quanh những thứ như bảng "hoạt động" với các điều khiển, và làm việc theo cách đó:

$('table#withControls').find('td.bindMe').bind(/* ... */); 

Bằng cách đó những lời sáo rỗng chỉ cần tìm ra rằng không có bảng tên " withControls ", và sau đó nó được thực hiện.

Answer 6

Một trong những vấn đề lớn nhất khi thực hiện điều này là một trong hiệu suất - bộ chọn sẽ được đánh giá và DOM tìm kiếm mỗi liên kết không dành cho một trang cụ thể. Ít nhất, có lẽ thiết lập một đối tượng theo nghĩa đen để chạy mã ràng buộc sẵn sàng thích hợp dựa trên một mã định danh trang, có thể là window.location.href hoặc một chuỗi con của. Một cái gì đó như

// avoid global pollution! 
(function() { 

    var pages = { 

     pageX : { 

      ready: function() { /* code to run on ready */ }, 
      teardown: function() { /* code to run on teardown */ } 

     }, 

     pageY : { 

      ready: function() { /* code to run on ready */ }, 
      teardown: function() { /* code to run on teardown */ } 

     }, 

    } 

    // set up ready event handler 
    $(ready); 

    // handler function to execute when ready event raised 
    // Note: Access to pages through closure 
    function ready() { 
     var location = window.location.href; 
     pages[location].ready(); 
    } 

})();