ASP.net MVC - Xem và thực hành tốt nhất của jQuery

Question

Tôi đang cố gắng tìm ra cách thực hành tốt nhất là sử dụng jQuery trong ứng dụng MVC. Cụ thể, tôi muốn biết những gì tôi nên làm để tôi không làm lộn xộn tất cả các quan điểm của tôi với các câu lệnh document.ready riêng lẻ.

Như một ví dụ:

Tôi có Views sau:

/Views/Shared/_Layout.cshtml
/Views/Home/Index.cshtml
/Views/Home/_Dialog.cshtml
/Views/Home/_AnotherDialog.cshtml

Tôi có một hành động điều khiển sẽ làm cho Home/Index View, sử dụng Bố cục và hiển thị hai chế độ xem một phần (hoặc các mẫu trình chỉnh sửa, các mẫu hiển thị, v.v.). Hành động một bộ điều khiển này đã hiển thị 4 chế độ xem trở lên. Mỗi khung nhìn đang sử dụng một số mã document.ready jquery.

Hiện nay, tôi có mã ở dưới cùng của mỗi view:

// In Index 
<script type="text/javascript"> 
    $(function() { 
     $('#tabs').tabs() 
    }); 
</script> 

// In _Dialog 
<script type="text/javascript"> 
    $(function() { 
     $('#some-dialog').dialog(...); 
    }); 
</script> 

Tôi biết đây không phải là một thực tế rất tốt vì nó đã nhận được không thể quản lý trong dự án nhỏ của tôi. Một số thực hành tốt để làm theo khi tôi có tấn trang mà tất cả cần một số mã khởi tạo jQuery/javascript được tách ra trên hàng chục lượt xem là gì?

Answer 1

Bạn có thể làm điều gì đó dọc theo những gì Telerik làm với công ty đăng ký javascript của họ. Về cơ bản, hãy đăng ký công ty đăng ký này trong mô hình chế độ xem của bạn.Ở cấp độ đơn giản nhất, tất cả những gì phải làm là theo dõi các chuỗi thêm vào nó:

public class JavascriptRegistrar 
{ 
    private StringBuilder jsBuilder_ = new StringBuilder(); 

    public Add(string js) 
    { 
     builder.Append(js).Append('\n'); 
    } 


    public string ToString() 
    { 
     return "<script type=\"text/javascript\">" + jsBuilder_.ToString() + "\n</script>"; 
    } 
} 

quang cảnh một phần của bạn sau đó sẽ thêm vào điều này khi vẽ:

<h1>In my view!</h1> 

@Model.Registrar.Add("$function() { /* ... */ }") 

Cuối cùng, ở dưới cùng của chế độ xem chính của bạn, khi bạn hoàn thành:

@Model.Registrar.ToString() 

Điều này sẽ ghi lại tất cả javascript mà nó đã thu thập trong khi hiển thị.

Answer 2

Nếu khởi tạo cụ thể cho một chế độ xem và bạn biết chắc chắn nó sẽ không được sử dụng bên ngoài chế độ xem đó, ví dụ như một số hành vi cụ thể của trang, thì hãy để nó ở chế độ xem!

Không có gì sai khi có thẻ tập lệnh trong tất cả các chế độ xem của bạn, miễn là bạn không sao chép js giữa các chế độ xem. Tôi nghĩ mọi người có xu hướng hiểu lầm 'tách mối quan tâm' trong trường hợp này và nghĩ rằng đơn giản có nghĩa là 'giữ ngôn ngữ khác nhau xa nhau bằng mọi giá' ... điều đó là sai, rõ ràng nếu một số logic/hành vi khởi tạo trang cụ thể cho trang, sau đó html và js thực chất là 'quan tâm' lẫn nhau, do đó di chuyển js vào một tệp riêng biệt không thực sự là 'thực hành tốt', nếu bất cứ điều gì làm cho mã của bạn khó hiểu hơn.

Cá nhân tôi muốn mở Chế độ xem và có thể xem tất cả js và css cụ thể cho trang đó ngay sau khi tôi mở nó, làm cho nó đẹp và dễ đọc. Tuy nhiên, rõ ràng nếu mã cần phải được chia sẻ sau đó bạn cần phải phá vỡ nó ra quan điểm của bạn và nhận được trong thư mục script của bạn whwere nó có thể được tham chiếu bởi bất cứ điều gì!

EDIT

Trong ví dụ của bạn ở trên tôi thấy trong Index của bạn xem bạn khởi tab của bạn. Tuy nhiên, nếu bạn thêm tab vào một nơi khác trong dự án thì tốt hơn bạn nên tạo các tab của mình bằng cách sử dụng lớp .tabs thay vì #tabs và sau đó trong tệp js bên ngoài, khởi chạy tất cả các tab cùng một lúc bằng cách gọi số $('.tabs').