'DHTML'대 프론트 엔드의 핵심 부분으로 자바 스크립트로 성장

Question

여기에 일반적인 질문이 더 많습니다.

내가 작업하는 많은 프로젝트가 서버 쪽보기를 사용하여 사용자 인터페이스를 렌더링하고 여기저기서 JavaScript를 사용하여 멋지게 꾸며 놓습니다. 작은 프로젝트에서는 괜찮습니다.하지만 최근에는 .js 파일의 크기가 커지면서 스택의 .live 및 .bind jQuery 호출이 더 이상 사용하지 않는 것처럼 보입니다.

자바 스크립트를보기 및 웹 응용 프로그램의 컨트롤러에 혼합하는 좋은 방법은 무엇입니까? 자바로 구동되는 웹 사이트의 경우 매우 유용하다고 알았지 만, 사용자가 시작한 이벤트는 컨트롤러 로직을 필요로하기 때문에 페이지에 포함 된 많은 고독한 기능의 일부일 때 압도적으로 혼란스러워지고 있습니다.

전적으로 AJAX 기반 템플릿 엔진이라고 생각했지만 약간 극단적 인 것으로 보이며 누구나 사용할 수있는 고통이 될 것입니다. 반면에 기존 백엔드 클래스의 기능을 복제하는 것은 중복 된 것처럼 보입니다.

AJAX가 완전히 무료가 아니거나 완전히 자바 스크립트로 구동되지 않는 웹 응용 프로그램에서 사용하는 좋은 "중간 근거"접근 방식은 무엇입니까?

편집 : 아마도 나는 일상적인 문제의 예를 제공 할 것입니다. 내가 뭔가를 확인하거나 거부 모달 대화를 사용자에게 제공하고 싶은 말 :

"Your picture is uploaded but looks terrible. You need a new 'do." (OK | What?) 

이제 하나 개의 시나리오에서, 그 대화는 페이지 새로 고침 이미지를 업로드의 결과로 팝업 수있는 서버 쪽보기에서 렌더링합니다. 또 다른 시나리오에서는 AJAX를 통해 이미지를 업로드 한 후 나타날 수 있습니다.이 경우 페이지의 JavaScript에 의해 트리거 될 수 있습니다. 두 경우 모두 대화 작성 코드에 액세스해야하며, 두 경우 모두 동일하게 작동하는 Dialog 클래스를 가질 수있는 방법을 지금까지 생각할 수 없습니다.

Answer 1

저는 내부 회사 앱으로 최근에 JavascriptMVC (2.0)으로 작업했습니다. 사마귀가 있지만 전반적인 아키텍처가 좋으며 "컨트롤러"JS 클래스를 만들 수 있습니다. 각 컨트롤러는 DOM 트리의 하위 집합 (또는 원하는 경우 페이지의 시각적 부분)을 "소유"하고 해당 영역 내의 이벤트에 응답하고 EJS templates ("보기"부분)을 사용하여 영역 아래의 영역을 변경합니다. 그렇지 않으면 $(...).bind()과 $(...).live()이 많이 OOP 모델로 호출된다는 것을 멋지게 추상화합니다.

필자의 경우 인터페이스가 거의 100 % JS 기반으로되어 있지만 프로젝트와 관련된 제약으로 인해 믹싱 앤 매치 할 수 없습니다.

한 시나리오에서 페이지 새로 고침을 사용하여 이미지를 업로드 한 결과 해당 대화 상자가 표시 될 수 있습니다.이 경우 서버 쪽보기에서 이미지를 렌더링합니다. 또 다른 시나리오에서는 AJAX를 통해 이미지를 업로드 한 후 나타날 수 있습니다.이 경우 페이지의 JavaScript에 의해 트리거 될 수 있습니다.

다음은 자바 스크립트가 비활성화 된 상태에서도 작동하는 방법입니다.

1. 서버 쪽에서 HTML 업로드 양식을 출력합니다. 일반 HTML 양식은 다른 PHP 페이지로 제출됩니다.
2. 페이지로드가 완료되면 해당 자바 스크립트 스 니펫이 실행되어 해당 양식을 찾습니다.
3. 자바 스크립트는 HairdoUploadController 인스턴스를 생성하고 <form>...</form>을 생성자에 전달합니다.
4. 컨트롤러는 양식을 변경하고 이벤트를 제출하는 양식을 트랩하기 위해 JQuery 선택기를 사용하여 양식을 "인수"합니다.
5. 컨트롤러가 새 div를 추가하고 (처음에는 숨겨진) Jquery-UI 대화 상자와 연결합니다.
6. 양식이 제출되면 컨트롤러는 대신 AJAX 호출을 일반 양식과 약간 다른 URL로 만듭니다.
7. AJAX 호출의 결과가 Dialog의 div로 푸시되고 대화 상자가 표시됩니다.

Answer 2

필자는 확실히이 분야의 전문가는 아니지만 과거에는 웹 사이트 개발의 'AJAXY'세계에 잘 어울리는 RESTful 서비스를 사용하는 프로젝트에서 일했습니다. 웹 앱에 이상적이라고 말할 수는 없지만 콘텐츠가 풍부한 프리젠 테이션 사이트에 적합했습니다. 사용자 정의 템플릿을 통해 다중 프리젠 테이션 형식에 대한 필요성을 충족시키는 것처럼 보입니다. 따라서 서비스는 HTML 페이지 템플릿을 사용하여 pictureUpload 서비스를 호출하거나 서비스를 호출하고 AJAX 컴포넌트 템플릿을 요청할 수 있습니다.

Answer 3

내 레이아웃 구성 요소 (마스터 파일)를 재사용 할 수있는 수단으로 최근에 내 서버 측 코드 (내 경우 ASP.Net MVC)를 사용하고 작은 캡슐화 된 UI 비트 (부분보기) , 그리고 자바 스크립트에서 상당한 양의 일을하고 있습니다. 이 특별한 경우에 저는 아직 UI ​​작업 초기 단계에 있지만 jQuery와 jQuery UI를 사용하면 아주 작은 풋 프린트로 많은 기능을 사용할 수 있습니다.

혼합 된 솔루션을 사용하는 데 따르는 어려움 중 하나는 다양한 로직 비트를 어디에 배치해야하는지 파악하는 것입니다. 그 후 나머지 부분은 아마도 자바 스크립트 및 CSS 코드를 최대한 재사용하는 방법을 알아내는 데 사용됩니다. 나는 여전히 다양한 자바 스크립트 아티팩트를 관리하는 방법을 찾지 못했다. (비록 Google CDN이 jQuery, jQuery UI, jQuery UI CSS 리소스를 제공함으로써 많은 것을 덜어 주었지만).

Answer 4

서버에서 모든 로직을 던질 수 있으며 서버가 보내는 모든 것을 표시하는 벙어리 클라이언트로 가정 할 수 있습니다.

는 두 가지 시나리오가 있습니다

1. 비 Ajax 요청
2. Ajax 요청 그들 사이의 유일한 차이는

, 당신이 단지보다 더 많은 콘텐츠를 렌더링하고 처음에 모달 대화 상자. 서버의 Dialog 클래스가 대화 상자의 HTML 표현을 뱉어 낼 수없고 두 가지 유형의 요청에 모두 사용되는 이유는 없습니다. 그런 다음 AJAX 호출에서 서버의 응답을 DOM에 추가하기 만하면됩니다.

당신이 말했듯이 클라이언트와 서버 측 모두에서 UI 작성 로직을 공유하는 것이 문제가 될 수 있으므로 하나를 선택하고이를 고수하는 것이 좋습니다. 위의 경우 모든 로직이 서버로 푸시됩니다. AHAH에 대해 더 자세히 읽어보십시오.

Answer 5

Google Web Toolkit 같은 소리 일 수도 있습니다.

그것은 당신이 자바 클라이언트 측에게 응용 프로그램을 작성하고 자바 스크립트로 그들에게 를 배포 할 수 있습니다.

아마도 GWT를 직접 사용하지는 않았지만 아마도 Java로 코드를 작성하여 두 곳에서 사용할 수 있습니다.

내가 개발하고있는 자체 프레임 워크에서 개발자는 기본적으로 코드를 두 번 작성해야합니다. 한 번은 모국어로, 한 번은 JavaScript로. JS를 반환하는 함수를 채우게하고, 필요하면 자동으로 호출 할 수 있습니다. 그러나 모든 코드는 하나의 클래스에 포함되어 있으므로 적어도 논리가 장소 전체에 퍼져있는 것은 아니며 기능적으로 동일한 지 신속하게 비교할 수 있습니다. 정규 표현식과 같은 경우 일반적으로 한 번만 작성한 다음 JS로 전달할 수 있습니다 (클라이언트 측에서 한 번 검증 한 다음 서버 측에서 다시 검증하는 데 사용합니다).