JavaScript 클라이언트 코드에 대한 "아키텍처"접근 방식을 변경 하시겠습니까?

Question

자바 스크립트 코드는 어떻게 구성되어 있습니까? MVC와 같은 패턴을 따르는가?

저는 지금 당분간 부업 프로젝트를 진행 해왔고, 더 많은 것을 얻을수록 더 많은 웹 페이지가 완전한 기능의 응용 프로그램으로 바뀌 었습니다. 지금 당장은 jQuery을 고수 하겠지만, 페이지의 논리가 점차 커져가고 있기 때문에 어떤 조직이든 말하든 "아키텍처"가 필요합니다. 내 첫 번째 방법은 "MVC 틱"입니다 :

• '모델은'컨트롤러는 객체이다 헬퍼
• 그것을 조정할
• 뷰는 DOM 플러스 클래스 인으로 확장 된 가져옵니다 JSON 트리입니다 이벤트 처리를 연결하고보기 또는 모델 조작을 시작합니다.

다른 사람들이보다 많은 JavaScript 응용 프로그램을 어떻게 구축했는지는 매우 흥미 롭습니다. 나는 GWT 나 다른 서버 지향 접근법에 관심이 없다. 단지 "자바 스크립트 + < 일반 웹 서비스 -y thingy 여기에 >"

참고 : 이전에 나는 자바 스크립트가 "OO가 아니라고 말했다. , 정말로 기능적이지 않다 ". 이것은 내가 생각하기에, 모든 사람들을 혼란스럽게 만들었다. javaScript는 여러면에서 독창적이기 때문에 강력하게 형식화 된 배경에서 왔기 때문에 제가 알고있는 패러다임을 강요하고 싶지는 않지만 매우 다른 언어로 개발되었습니다.

Answer 1

.. 그러나 자바 스크립트에는 많은 측면이 있습니다. 은입니다.

이것을 고려 :

var Vehicle = jQuery.Class.create({ 
    init: function(name) { this.name = name; } 
}); 

var Car = Vehicle.extend({ 
    fillGas: function(){ 
     this.gas = 100; 
    } 
}); 

나는 자신의 상태를이 페이지 수준 자바 스크립트 클래스를 만들려면이 기술을 사용했습니다, 이것은 유지하는 데 도움이 포함 된 (그리고 나는 종종 내가 다시 넣어 수있는 영역을 식별 다른 클래스들로).

이 기능은 실행할 고유 한 스크립트가있는 구성 요소/서버 컨트롤이 있지만 같은 페이지에 인스턴스가 여러 개있을 때 특히 유용합니다. 이렇게하면 상태가 분리됩니다.

Answer 2

여기서 무엇을 의미하는지 확신 할 수 없지만 지난 6 년 동안 ASP.NET을 수행 한 후 서버에서 기본 페이지 렌더링을 수행하면 내 웹 페이지는 주로 JavaScript로 구동됩니다. JSON을 모든 용도로 사용하고 있습니다. (약 3 년이되었습니다) 클라이언트 측의 요구에 MochiKit을 사용하십시오.

덧붙여서, JavaScript 는 OO입니다 만, 프로토 타입 상속을 사용하고 있기 때문에, 사람들은 그런 식으로 크레디트를주지 않습니다. 나는 또한 그것이 기능적이라고 주장 할 것이다. 그것은 모두 당신이 그것을 어떻게 쓰는지에 달려있다. 기능적 프로그래밍 스타일에 관심이 있다면 MochiKit을 확인하십시오. 자바 스크립트의 함수형 프로그래밍쪽으로 상당히 기울어 져있다.

Answer 3

MochiKit은 훌륭합니다. js 라이브러리가 제공되는 한 내 첫사랑이었습니다. 그러나 MochiKit은 매우 표현적인 문법을 가지고 있지만 Prototype/Scriptaculous 나 jQuery가 나만큼 편안함을 느끼지는 못했다.

당신이 파이썬을 알고 있거나 좋아한다면, MochiKit이 좋은 도구라고 생각합니다.

Answer 4

답장을 보내 주셔서 감사합니다. 얼마 후, 지금까지 배운 것을 게시하고 싶습니다.

은 지금까지 나는 등 내선으로

JQuery UI, Scriptaculous, MochiKit 같은 매우 큰 차이 Ext 같은 것을 사용하는 방법 등을 참조 HTML은 단지 하나의 자리 표시 자입니다 - UI가 여기에 표시됩니다. 그때부터 모든 것은 자바 스크립트로 설명됩니다. DOM 상호 작용은 다른 API 레이어에서 최소화됩니다.

다른 키트를 사용하여 약간의 HTML 디자인을 시작한 다음 snazzy 효과를 사용하여 DOM을 직접 확장하거나 여기에 양식 입력을 대체하여 추가 할 수 있습니다.

이벤트 처리 등을 처리해야 할 때 주요 차이점이 발생하기 시작합니다. 모듈이 서로 "대화"해야하기 때문에 DOM에서 멀리 떨어져 나가야한다는 것을 알게되었습니다.

이 라이브러리 중 많은 부분에도 흥미로운 모듈화 기술이 포함되어 있습니다. 매우 명확한 설명은 a fancy way to "protect" your code with modules을 포함하는 Ext 웹 사이트에서 제공됩니다.

완전히 평가 된 새로운 플레이어는 Sproutcore입니다. DOM이 숨겨져 있고 프로젝트의 API를 다루기를 원하는 Ext의 접근 방식처럼 보입니다.

Answer 5

트리스탄, 당신은 MVC 애플리케이션으로 자바 스크립트를 만들려고 할 때 하나의 영역, 즉 모델에서 짧아지는 경향이 있다는 것을 알게 될 것입니다. 처리하기 가장 어려운 영역은 데이터가 애플리케이션 전반에 걸쳐 유지되지 않기 때문에 모델입니다. 사실상 모델은 클라이언트 측에서 매우 일관되게 변경되는 것처럼 보입니다. 서버에서 데이터를 전달하고 수신하는 방법을 표준화 할 수 있지만 그 시점에서 모델은 실제로 JavaScript에 속하지 않습니다. 서버 측 응용 프로그램에 속합니다.

JavaScript에서 데이터를 모델링하기위한 프레임 워크를 만든 사람이 한 시도를 잠시 보았습니다. SQLite가 응용 프로그램에 속한 방식과 매우 비슷합니다. Model.select ("Product") 및 Model.update ("Product", "Some data ...")와 같았습니다. 그것은 기본적으로 현재 페이지의 상태를 관리하기 위해 많은 데이터를 보유한 객체 표기법입니다. 그러나 새로 고침하는 순간 모든 데이터가 손실됩니다. 나는 구문에 대해 아마 빠졌지 만, 당신은 요점을 얻는다.

jQuery를 사용하는 경우 Ben의 접근 방식이 가장 좋습니다. 함수와 속성으로 jQuery 객체를 확장 한 다음 "컨트롤러"를 분류하십시오. 필자는 보통 파일을 별도의 소스 파일에 저장하고 섹션 단위로로드하여이 작업을 수행합니다. 예를 들어 전자 상거래 사이트 인 경우 체크 아웃 프로세스 기능을 처리하는 컨트롤러로 가득 찬 JS 파일이있을 수 있습니다. 이것은 가볍고 관리하기 쉬운 것들을 유지하는 경향이 있습니다.

Answer 6

그냥 간략히 설명합니다.

서버 지향형이 아닌 GWT 앱을 작성하는 것이 완벽하게 가능합니다. 저는 Server-Oriented에서 자바 기반 백엔드가 필요한 GWT RPC를 사용한다고 가정합니다.

클라이언트쪽에 매우 "MVC-ish"인 GWT 앱을 작성했습니다.

• 모델은 개체 그래프였습니다. 자바로 코드를 작성해도, 런타임에는 객체가 자바 스크립트로되어있어 클라이언트 또는 서버 측에서 JVM이 필요 없습니다.또한 GWT는 JSON을 완벽하게 분석하고 조작 할 수 있도록 지원합니다. JSON 웹 서비스에 쉽게 연결할 수 있습니다. 2에서 JSON 매시업 예제를 참조하십시오.
• 보기는 표준 GWT 위젯 (우리 고유의 합성 위젯 중 일부)으로 구성되었습니다.
• 컨트롤러 레이어가 Observer 패턴을 통해 View에서 깔끔하게 분리되었습니다.

"강하게 입력 된"배경이 Java 또는 이와 유사한 언어 인 경우 큰 프로젝트의 경우 GWT를 심각하게 고려해야한다고 생각합니다. 소규모 프로젝트의 경우 일반적으로 jQuery를 선호합니다. GWT 1.5에서 작동하는 다가오는 GWTQuery은 jQuery 용 플러그인이 풍부하기 때문에 가까운 장래에 변경 될 수 있습니다.

Answer 7

JavaScriptMVC는 대규모 JS 애플리케이션을 구성하고 개발하는 데 적합한 선택입니다.

아키텍처 설계가 매우 잘 고려되었습니다. 혹시 자바 스크립트와 함께 할 것 4 가지가 있습니다

1. 에 응답 이벤트
2. 요청 데이터가/조작 서비스 (아약스)
3. 은 아약스 응답에 도메인 특정 정보를 추가합니다.
4. 는 업데이트 DOM

JMVC는 모델, 뷰, 컨트롤러 패턴으로이 분할합니다.

먼저 가장 중요한 이점은 컨트롤러입니다. 컨트롤러는 이벤트 위임을 사용하므로 이벤트를 첨부하는 대신 페이지 규칙을 작성하면됩니다. 또한 컨트롤러의 이름을 사용하여 컨트롤러가 작동하는 범위를 제한합니다. 이렇게하면 결정적인 코드가됩니다. 즉, '#todos'요소에서 이벤트가 발생하는 것을 볼 수 있습니다. 즉, 할일 컨트롤러가 있어야한다는 것을 의미합니다.

$.Controller.extend('TodosController',{ 
    'click' : function(el, ev){ ... }, 
    '.delete mouseover': function(el, ev){ ...} 
    '.drag draginit' : function(el, ev, drag){ ...} 
}) 

다음은 모델이됩니다. JMVC는 Ajax 기능 (# 2)을 빠르게 구성하고 도메인 특정 기능 (# 3)으로 데이터를 래핑 할 수있는 강력한 클래스 및 기본 모델을 제공합니다. 완료되면 컨트롤러의 모델을 다음과 같이 사용할 수 있습니다.

Todo.findAll ({after : 새 날짜()}, myCallbackFunction);

마지막으로 귀하의 할 일이 돌아 오면 표시해야합니다 (# 4). 이것은 JMVC의 관점을 사용하는 곳입니다. 에서

'.show click' : function(el, ev){ 
    Todo.findAll({after: new Date()}, this.callback('list')); 
}, 
list : function(todos){ 
    $('#todos').html(this.view(todos)); 
} 

는 '보기/일하러/list.ejs'

<% for(var i =0; i < this.length; i++){ %> 
    <label><%= this[i].description %></label> 
<%}%> 

JMVC 건축보다 더 많은을 제공합니다.

• 코드 생성기
• 통합 브라우저, 셀레늄, 그리고 코뿔소 테스트
• 문서
• 스크립트 압축
• 보고 오류

: 그것은 함께 개발주기의 적 부분에 도움