JavascriptMVC 애플리케이션의 개념 설계

Question

"페이지 컨텐츠"영역과 기본 탐색 링크가있는 1 페이지 웹 사이트를 구축 중입니다. 링크를 클릭하면 애니메이션이 실행되고 콘텐츠 (및 HTML)가 '페이지 콘텐츠'영역에로드됩니다.

저는 MVC에 대해 잘 알고 있습니다 만, javascriptMVC 프레임 워크의 컨텍스트에서 내 응용 프로그램을 디자인하는 데 약간의 문제가 있습니다. 나는 내가 앞으로 나아갈 때 많은 자바 스크립트 (및 자바 스크립트 애니메이션)를 추가하여 내 사이트에 좋은 기반을 제공하고자한다.

• 내가 데이터 (및 HTML) 내가 추가 할를 포함 비품 하나 개의 모델 (인덱스)이 있습니까?

• 액션 (애니메이션 다음 데이터가 고정물에서로드 됨)이있는 페이지 (색인)에 대해 컨트롤러가 하나 있습니까?

• 각 링크가 어떤 행동을 지시합니까?

  기본적으로

, 내가 어떻게 개념적으로 javascriptMVC 프레임 워크를 사용하여 페이지를 디자인 할 수 있습니까?

Answer 1

저는 iPhone 용으로 제작중인 PhoneGap 응용 프로그램과 관련하여 실제로 이와 비슷한 작업을하고 있습니다. 그것은 한 번 페이지 자바 스크립트 응용 프로그램입니다.

1. 모든 페이지 변경이 정상 <a href="/stuff/things/"></a> 태그 완료 : 여기에 내가 사용하고 기본적인 아키텍처입니다. href는 "유효한"href - "/ stuff/things /"입니다.

2. URL 정규식을 컨트롤러에 매핑하는 객체가 있습니다. 따라서 /recipes/\d+?/과 같은 URL은/recipes/10 /,/recipes/5 /와 같은 URL을 캡처하여 지정된 컨트롤러를 호출합니다.

3. 나는 링크 클릭을 검사하는 문서에 이벤트를 바인딩하고 다양한 정규 표현식으로 링크의 href 속성을 확인합니다. 일치하는 것이 있으면 "페이지 변경"을 시작합니다.

4. pagechange 함수는 history.pushState()을 사용하여 URL을 변경 한 다음 미리 설정된 데이터 객체를 컨트롤러에 전달합니다. 그 데이터 객체의 일부는 익명의 "완전한"기능으로 컨트롤러 자체가 일을 마친 후에 사용하게됩니다.

5. "완료"기능이 전달 된 이유는 종종 페이지 변경에 아약스가있는 데이터베이스를 쿼리하는 것과 같은 비동기 작업이 포함되기 때문입니다. 또한 우리는 코드의 한 섹션에 "pagechange"동작을 유지할 수 있으며 컨트롤러는 효과적으로 html 블록을 빌드하고 DOM에 추가합니다. 컨트롤러가 전달 된 complete() 함수를 호출하면 pagechange 함수는 작업을 마칩니다.

당신은 나의 프레임 워크의 전체를 볼 수 있습니다 http://eatery.decoratelife.net/eatery.js

그것은이 "true"로 MVC 아니다. 이후 모델이나 뷰를 갖고 있지 않습니다. Mustache JS와 비슷한 HTML 템플릿 스트링과 데이터 오브젝트를 병합하여 뷰를 처리하고 모델은 원격 mongoDB에 대한 API 호출을 통해 수행됩니다. 그러나 나는 그것이 당신의 문제를 해결하는 훌륭한 방법의 예라고 생각합니다.