JavaScript에서 대화 형 객체를 배치 할 위치는 어디입니까?

Question

사용자가 화면의 "객체"와 상호 작용하는 웹 기반 응용 프로그램 (예 : jQuery 및 많은 SVG가 포함 된 JavaScript)을 작성 중입니다. 벡터와 같이 arraows로 크기를 조정하고 연결될 수있는 DIV를 생각해보십시오. 드로잉 프로그램 또는 그래픽 프로그래밍 언어).

각 "개체"는 개별 정보를 포함하고 있지만 요소의 "클래스"에 항상 속해 있으므로이 응용 프로그램을 OOP 방식을 사용하여 프로그래밍해야한다는 것이 분명합니다.

하지만 "개체"를 가장 잘 저장합니까?

• 모든 (JS 네이티브) 객체로 글로벌 구조 ("레지스트리")를 만들고 "DOM에 자신을 그려야"한다고 말합니까?
• 그런 구조를 피하고 (관련) DOM 노드를 내 객체로 생각하고 해당 데이터를 .data()로 첨부해야합니까?

첫 번째 방법은 매우 MVC입니다. 그러나 모든 이벤트 처리기의 첨부는 간단합니다.

두 번째 방법은 사소한 방식으로 이벤트를 처리하고 중복 된 구조를 만들지는 않지만 일반적인 OO (메서드와 같은) 요소는 더 복잡 할 것입니다.

무엇을 권하고 싶습니까? 필자는 대답이 JavaScript와 SVG에 한정 될 것이라고 생각합니다. "일반적인"프로그래밍 언어는 고도로 조직화 된 출력 "캔버스"를 가지고 있지 않습니다.

Answer 1

이라면 당신은 결정하는 기능을 감지 할 수 있습니다 과거에는 JS에서 OOP를 작성했습니다 (글로벌 "클래스", 적절하지 않은 전역 데이터 구조). 각 클래스는 일반적으로 그래픽 표현을 가리키는 .g 속성을가집니다. (그리고 jQuery의 .data는 내가 다시 클래스 인스턴스를 가리키는 DOM의 경우, 이벤트 핸들러 또는 다른 방법을 찾기 위해 필요한있다.에서의 expando 속성을 사용하기 전에)

내가 MVC로 생각할 너무

만의 물론 모델을 저장하고 컨트롤러로 작동하며 뷰를 조작하는 단일 JS 인터프리터를 사용하면 선을 흐리게 처리하는 것이 쉽습니다.

이 시스템에서는 이벤트 처리기를 추가하는 것이 어렵다는 것을 알지 못합니다. 코드에서 새 객체를 인스턴스화하는 것은 뷰에서 해당 인스턴스를 인스턴스화하고 인스턴스 기반 콜백을 트리거하는 자체 이벤트 핸들러를 첨부해야합니다. 이 코드는 특정 입력 이벤트 (예 : mousedown)를 상태에 기반한 논리적 이벤트 (예 : selected)로 매핑합니다.다른 코드는 인스턴스의 이러한 논리적 이벤트에 등록됩니다.

Answer 2

JSON (개체 레지스트리로 사용)을 스크립트 블록에 모두 보관합니다. 그런 다음 구문 분석없이 데이터를 쉽게 저장하고 복구 할 수 있습니다.

Answer 3

JSON을 사용하여 처리 할 "개체"를 정의하고 싶을 것입니다. 예 : 이것은, 페이지로드의 모양을 그릴 당신이 그들을 조작하고 같은 객체의 상태를 업데이트하고 나중에 다시로드 할 상태를 저장 할 수있는 유연성을 허용

[{ 
    type: rectangle, 
    coordinates: {x: 0, y: 0}, 
    size: {width: 100, height: 100} 
},{ 
    type: arrow, 
    start: {x: 150, y: 150}, 
    end: {x: 100, y: 100} 
}] 

.

이것은 당신이 언급 한 바와 같이 MVC 패턴을 사용하도록 설정하고이 같은 상황에서 거 디스플레이 등 캔버스, SVG, 플래시, HTML, 등이