재사용 및 로직 캡슐화 측면에서 ASP.NET UI로 자바 스크립트 UI를 설계하는 가장 좋은 방법은 무엇입니까?

Question

UI JavaScript 코딩에 대한 올바른 연습 문제로 어려움을 겪고 있습니다. 그래서 나는 일을하는 더 똑똑한 방법을 찾고 있습니다. 나는 ASP.NET에서 jQuery를 사용 해왔다. 나는 아래처럼 프로답지 못하고 바보 같다. 자바 스크립트 UI 프로그래밍은 언제나 신비 스럽습니다. 나는 그것을하는 방법을 안다. 그러나 나는 그것을 올바르게하는 법을 결코 알지 못했다.

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

문제 :

• 코드 중복은 종종 유지하고 ClientIds는 ASP.NET에 의해 생성으로
• 를 재사용하는 것이 더 어렵다, 그것은 별도의 js 파일
을에 코드 덩어리를 끌어 어렵다
• 일반적인 선언은 마스터 페이지에 배치되지만 jQuery 문서 준비 함수는 거의 모든 다른 페이지에도 나타납니다.

개

목표 :

• 자바 스크립트 라이브러리/프레임 워크 독립, 길 아래에 프레임 워크를 전환하는 것이 더 쉬울 수 있도록
• 캡슐화/쉬운 재사용을위한 논리를 조절 각 페이지에 있도록, 그것은 단지 초기화 코드 쉬운 유지 보수 및 가독성에 대한 우려의
• 분리의 몇 가지 간단한 줄 것

질문 :

C# 개발자가되는 것은 주로 내 생각은 매우 OO이고 jQuery는 매우 절차 적입니다. 익명 함수의 개념을 이해하지만 일반적으로 내 마음은 여전히 ​​UI를 추상화 한 다음 속성이나 메서드를 선언하는 도메인 모델을 만들려고합니다. 그러나 JavaScript에서이 방법이 맞는지 정말로 확신 할 수 없습니다. 아니면 내가 너무 이상적입니까, 아니면 너무 힘들어서 OO OO와 같지 않은 무언가를 만들려고 노력하고 있습니까? 따라서 질문은 다음과 같습니다.

• JavaScript 프로토 타입을 사용하여 함수를 캡슐화/변조하고 좀 더 비슷하게 작성해야합니까? HTML 컨트롤이나 동작을 재사용 할 수 있도록 캡슐화 할 수 있습니까?
• jQuery 플러그인에 로직을 캡슐화해야합니까? 그러나이 방법으로 코드는 jQuery에 100 % 종속됩니다.
• 또는 다른 방법?

감사합니다.

업데이트 : 방금 ​​찾은이 slide이며 좋은 시작점 인 것으로 보입니다. 이것은 방금 찾은 good example입니다. jQuery를 만든 사람은 good tutorial입니다.

Answer 1

가장 좋은 방법을 살펴 보시기 바랍니다 찾고있는 정확하게 등등에 더 intoduce하는 것입니다 내 자바 스크립트에 대한 객체 지향 접근법.

이

는 클라이언트 ID 광대 극을

난 아직도 내 jQuery를 사용을 관리 할 수 ​​

1. 쉽게는 범위 지정 소개하는 다음과 같은 혜택과 같은 일의 여러 인스턴스를 같은 페이지에
2. 쉽게있다 이.

   자바 스크립트 기반 widgit을 사용하고 싶다면 위젯이라는 "객체"를 만들고 Widget.js 파일에 저장하는 것이 좋습니다. 위젯 객체는 예를 들어 Widget.js는 영문 페이지의 호출이

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

   과 같을 것이다

   // 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() 
   { 
   
   } 
   
   } 
   

   과 같을 것이다 다른 모든 OO의 langauge처럼 인스턴스 변수, 생성자 및 공공, 민간 방법이있을 것입니다

Answer 2

ClientId 문제는 알려진 문제이며 해결하기가 어렵습니다. ASP.NET 4.0은 ClientIDMode를 도입하여 렌더링 된 최종 ID에 대해 좀 더 세밀하게 제어 할 수있게합니다. ASP.NET MVC를 사용하면 클라이언트 스크립팅 작업을 훨씬 쉽게 할 수 있습니다. 이로 인해 많은 슬픔이 생기고 ASP.NET 4.0을 기다리거나 ASP.NET MVC로 갈 수있는 가능성이 있다면 이러한 대안을 살펴볼 것입니다.

Answer 3

jQuery에 종속성이 있다는 것은 아무 문제가 없으며 클라이언트 스크립팅의 사실상 표준이되고 있으며 코드에 추상화가 너무 많이 발생하는 것보다 낫습니다. 따라서 jQuery 플러그인을 사용하는 것이 모듈화에 좋은 방법입니다.

당신은 를 사용하여 ASP.NET 4.0 (케빈 P에서 알 수 있듯이)를 사용하여, 또는 요소를 참조하여 클라이언트 ID의 문제를 해결 얻을 수

은 '종료-과'끝을 일치하는이

$('input[id$=_ProductName] 

같은 선택 따라서 ID가 포함 된 컨트롤의 ID가 변경되는 경우에도

<span id="ctl00_MyHeader_ProductPanelPlaceholder_ProductName"> 

과 일치하게됩니다.

Answer 4

나는 것은 LiveUI 웹 프레임 워크는, 클라이언트 ID를 처리, 내가 코드 재사용을 발견 http://www.codeproject.com/KB/custom-controls/jquery-datepicker-aspnet.aspx