Cách tốt nhất để kiến ​​trúc mã JavaScript UI với ASP.NET về tái sử dụng và logic encapulation?

Question

Tôi gặp sự cố khi giải quyết thực hành thích hợp cho mã JavaScript UI. Vì vậy, tôi đang tìm kiếm một cách thông minh hơn để làm việc. Tôi đã sử dụng jQuery với ASP.NET và tôi đã làm những việc như dưới đây mà dường như không chuyên nghiệp và câm. Lập trình UI JavaScript luôn là một bí ẩn đối với tôi. Tôi biết làm thế nào để làm điều đó nhưng tôi không bao giờ biết làm thế nào để làm điều đó đúng.

$(function(){ 
    $('submit').click(function() { 
     //behaviors, setup styles, validations, blah... 
    }); 
}); 

vấn đề:

• trùng lặp Mã thường do đó khó khăn hơn để duy trì và tái sử dụng
• Với clientIds được tạo ra bởi ASP.NET, thật khó để kéo khối mã vào file js riêng
• Tuyên bố chung được đặt trên trang chính, tuy nhiên chức năng sẵn sàng của tài liệu jQuery xuất hiện gần như trên mọi trang khác cũng như

Mục tiêu:

• thư viện JavaScript/khung độc lập, do đó nó sẽ được dễ dàng hơn để chuyển đổi các khuôn khổ xuống đường
• Encapsulate/điều chỉnh logic để tái sử dụng dễ dàng, do đó trên mỗi trang, nó sẽ chỉ có một vài dòng mã đơn giản khởi
• Tách mối quan tâm để bảo trì dễ dàng và khả năng đọc

Câu hỏi:

Là một nhà phát triển C# chủ yếu là suy nghĩ của tôi là rất OO và jQuery rất thủ tục. Tôi hiểu các khái niệm về chức năng ẩn danh tuy nhiên nói chung tâm trí của tôi vẫn đang cố gắng tạo ra một mô hình miền trừu tượng hóa giao diện người dùng sau đó khai báo các thuộc tính hoặc phương thức. Nhưng tôi thực sự không chắc chắn nếu đây là cách trong JavaScript. Hay tôi quá lý tưởng hoặc tôi đang cố gắng làm một thứ gì đó không phải là OO OO như thế nào? Vì vậy, các câu hỏi là:

• Tôi có nên bắt đầu đóng gói/điều chỉnh các chức năng bằng cách sử dụng JavaScript nguyên mẫu và làm cho nó một chút OO như thế nào? Vậy các điều khiển hoặc hành vi HTML có thể được đóng gói để tái sử dụng không?
• Hoặc tôi có nên bắt đầu đóng gói các tệp logic vào trình cắm thêm jQuery không? Nhưng theo cách này, mã sẽ phụ thuộc 100% vào jQuery.
• Hoặc bất kỳ phương pháp tiếp cận nào khác?

Cảm ơn bạn.

Đã cập nhật: Tôi vừa tìm thấy trang này slide và dường như đây là điểm khởi đầu tốt. Đây cũng là một số good example mà tôi vừa tìm thấy. Và một good tutorial bởi tác giả của jQuery.

Answer 1

Kỹ thuật tốt nhất mà tôi đã tìm thấy để tái sử dụng mã, đối phó với id khách hàng và như vậy là để intoduce một nhiều cách tiếp cận hướng đối tượng vào Javascript của tôi.

này có các lợi ích sau

1. dễ dàng hơn để giới thiệu Phạm vi và nhiều trường hợp của những điều tương tự trên cùng một trang
2. Dễ quản lý id khách hàng trò hề

tôi vẫn sử dụng jquery trong vòng điều này.

Vì vậy, để đưa ra một ví dụ nếu tôi có một Widgit dựa trên javascript tôi muốn sử dụng, tôi sẽ tạo một "đối tượng" được gọi là widget và lưu nó trong một tệp Widget.js. Các đối tượng widget sẽ có các biến Ví dụ, một nhà xây dựng và công cộng, phương pháp tư nhân giống như trong bất kỳ langauge OO khác ví dụ như Widget.js sẽ trông như thế

// constructor 
function Widget(aFooId,bBarId) 
{ 
// instance variables 
var fooId = aFooId; 
var barId = bBarId; 

// some magic to expose public methods 
this.Init = Init; 

// public methods 
function Init() 
{ 
    alert("called init"); 
} 

//private methods 
function PrivateMethod() 
{ 

} 

} 

Cuộc gọi trên trang aspx sẽ trông như thế

var widgetInstance = new Widget("<%=Foo.ClientId%>",<%=Bar.ClientId%>); 
widgetInstance.Init(); 

Answer 2

Vấn đề ClientId là một vấn đề đã biết và khó khăn để có được xung quanh. ASP.NET 4.0 giới thiệu một ClientIDMode sẽ cho phép bạn có một số kiểm soát hạt mịn hơn đối với id cuối cùng được hiển thị. ASP.NET MVC chắc chắn sẽ làm cho cuộc sống kịch bản của khách hàng của bạn dễ dàng hơn nhiều. Nếu điều này gây ra cho bạn rất nhiều đau buồn và chờ đợi cho ASP.NET 4.0 hoặc đi với ASP.NET MVC là lựa chọn khả thi, tôi sẽ khám phá những lựa chọn thay thế.

Answer 3

Không có gì sai khi có sự phụ thuộc vào jQuery, nó trở thành tiêu chuẩn thực tế cho kịch bản ứng dụng khách và tốt hơn là có quá nhiều trừu tượng trong mã của bạn. Vì vậy, sử dụng các plugin jQuery là một cách tốt để mô đun hóa.

Bạn có thể khắc phục vấn đề ClientId bằng cách sử dụng ASP.NET 4.0 (như Kevin P gợi ý), hoặc tham khảo các yếu tố sử dụng một 'kết thúc với các' chọn như thế này

$('input[id$=_ProductName] 

mà phù hợp cuối cùng thuộc tính ID, do đó, nó sẽ khớp với

<span id="ctl00_MyHeader_ProductPanelPlaceholder_ProductName"> 

ngay cả khi ID của các điều khiển chứa thay đổi.

Answer 4

tôi điều LiveUI khuôn khổ web là chính xác những gì bạn đang tìm kiếm, xin hãy xem http://www.codeproject.com/KB/custom-controls/jquery-datepicker-aspnet.aspx