js trình bày so với js chức năng: Tách chúng? Kiến trúc chung?

Question

Đây là một loại câu hỏi chung.

Rất thường xuyên, tôi cần phải viết JavaScript cho các trang web. Lưu ý các phương pháp hay nhất, js không phô trương, v.v. Tôi có JavaScript của mình trong các tệp * .js riêng biệt. Mỗi trang đều có tệp js riêng. Điều gì đã phần nào làm phiền tôi gần đây, là sự pha trộn của mã trình bày với mã chức năng mà tôi luôn luôn kết thúc với. Vì vậy, ví dụ, tôi sẽ chỉ định một handler .click cho một phần tử. Khi nhấn vào đó, phần tử phải thay đổi diện mạo của nó và một cuộc gọi AJAX phải được thực hiện tới máy chủ. Vì vậy, ngay bây giờ, tôi sẽ làm cả hai thứ này bên trong trình xử lý .click đó. Nó có thể trở nên cồng kềnh tùy thuộc vào những gì cần phải hoàn thành. Khi tôi trở lại các khối mã sau khi không chạm vào chúng trong một tuần, tôi thường cảm thấy như nó mất quá nhiều thời gian để theo dõi qua tất cả các dòng mã khi tôi chỉ cần sửa một cái gì đó với sự xuất hiện.

Dù sao, bất kỳ ý tưởng nào về kiến ​​trúc/thiết kế cho presentational js so với chức năng js? Giữ chúng trong một tập tin, nhưng đột nhập vào các chức năng riêng biệt? Chia chúng thành 2 tệp riêng biệt? Để họ một mình?

Cảm ơn!

Answer 1

Tôi có xu hướng giữ tất cả chúng lại với nhau liên quan đến sự kiện đã khởi động sự kiện, nhưng đôi khi đặt chức năng gọi để thực hiện một nhóm cụ thể. Ví dụ:

function domyUIstuff(myevent, myselector) 
{ 
// stuff here 
}; 
function domyBehaviorStuff(myevent, myselector) 
{ 
//dostuffhere 
}; 
$(selector).click(function(e) 
{ 
    domyUIstuff(e,$(this)); 
    domyBehaviorStuff(e,$(this)); 
}; 

Side lưu ý: Tôi làm giữ những thứ riêng biệt (tôi làm rất nhiều thứ asp.net) từ người dùng điều khiển khác nhau - tôi có thể tạo một tập tin myusercontrol.js cho myusercontrol.ascx của tôi cũng như một tệp mypage.js cho mypage.aspx của tôi có xu hướng cắt giảm "nhiễu" khi tôi gỡ lỗi - tôi đặt các hàm "chung" của mình trong tệp trang mà tôi có thể gọi từ các điều khiển của tôi như trình xử lý tin nhắn chung hoặc thông thường " Các chức năng tiện ích.

Answer 2

Tôi thấy hữu ích khi có ba tệp JS trong mỗi trang được tạo động. Các chức năng chung được tái sử dụng ở khắp mọi nơi, các chức năng cụ thể của dự án được sử dụng trên toàn bộ dự án và tệp js trang cụ thể. Bằng cách này bạn có một xử lý về những gì là "tái sử dụng" và những gì không phải là. Điều này cũng khuyến khích bạn "quảng bá" mã của bạn. Khi bạn "quảng cáo" nó, bạn sẽ thấy mình tách nó ngày càng nhiều vào giao diện người dùng hoặc hành vi. Khi có nhiều thứ bị tách ra, bạn có thể thấy mình gồm 6 tệp hoặc chỉ phá vỡ từng tệp với cấu trúc gói như bạn đã đề xuất trước đó UIFunctions(). DoStuff() ... Tuy nhiên, nếu bạn phải thêm tiền tố cho trang của mình với PageName bạn chưa quảng bá mã của bạn và có thể đó là lúc bạn làm như vậy :-)

Đó là cách tôi đã làm. Hy vọng nó giúp.