DOM에서 UI 개체를 나타내는 JavaScript 클래스를 디자인하는 가장 좋은 방법은 무엇입니까?

Question

JavaScript 및 OOP에 익숙하지만 UI (HTML) 프로그래밍에 사용되는 JS 클래스를 디자인하는 데 익숙하지 않습니다. 나는 조금 주위를 수색했지만 어떤 보편적 인 패턴을 발견하지 못했다.

필자는 Microsoft Windows 패널과 유사한 패널 형 개체를 동적으로 만들고 싶다고 가정 해 보겠습니다. 각 객체에는 컨테이너, 텍스트 레이블을 포함 할 수있는 헤더 영역 및 클릭 이벤트 핸들러가있는 닫기 버튼이 필요합니다. DOM 표현 (HTML) 외에도 오브젝트에는 JavaScript 오브젝트 표현 (변수 및 메소드)이 있습니다. 시도한 한 가지 방법은 다음과 같습니다.

// 
// Window class 
// 
var Window = function(params) { 
    this.testMethod = function() { 
     console.log('test'); // just an example 
    } 

    this.windowDiv = document.createElement('div'); 
    this.windowDiv.style.width = params.width + 'px'; 
    this.windowDiv.style.height = params.height + 'px'; 
    this.windowDiv.style.position = 'absolute'; 
    this.windowDiv.style.top = '30px'; 
    this.windowDiv.style.left = '30px'; 
    this.windowDiv.style.border = '1px solid #000'; 

    this.headerDiv = document.createElement('div'); 
    this.headerDiv.style.width = '100%'; 
    this.headerDiv.style.height = '30px'; 
    this.headerDiv.style.background = '#bbb'; 
    this.headerDiv.style.borderBottom = '1px solid #000'; 
    this.headerDiv.innerHTML = params.title; 

    this.buttonDiv = document.createElement('div'); 
    this.buttonDiv.style.width = '30px'; 
    this.buttonDiv.style.height = '18px'; 
    this.buttonDiv.style.position = 'absolute'; 
    this.buttonDiv.style.top = '0px'; 
    this.buttonDiv.style.right = '5px'; 
    this.buttonDiv.style.textAlign = 'center'; 
    this.buttonDiv.style.background = 'red'; 
    this.buttonDiv.style.border = '0px 1px 1px 1px solid #000'; 
    this.buttonDiv.innerHTML = 'x'; 
    this.buttonDiv.addEventListener('click', function(e) { 
     document.body.removeChild(e.target.parentNode.parentNode); 
    }, false); 

    this.headerDiv.appendChild(this.buttonDiv); 
    this.windowDiv.appendChild(this.headerDiv); 
    document.body.appendChild(this.windowDiv); 
} 

// Initialize 
var myWindow = new Window({ 
    width: 400, 
    height: 200, 
    title: 'My Window' 
}); 
myWindow.testMethod(); 

"제대로 된 느낌이 들지 않습니다." 또 다른 방법은 render() 메소드를 사용하여 HTML 생성 코드를 분리하는 것입니다. JS 객체가 내부에 여러 개의 중첩 된 HTML 객체를 포함하는 것은 어색한 것처럼 보입니다. innerHTML을 통해 중첩 태그를 전달해야합니까?

그래서 나는 궁금하다. 여기서 가장 좋은 접근 방법은 무엇인가? DOM 코드 (HTML 개체 및 스타일)와 전통적인 변수 및 메서드가있는 클래스를 디자인하는 가장 좋은 방법은 무엇입니까? 이 HTML 객체에 프로토 타입을 사용하는 방법이 있습니까? 이 예제에서 인스턴스화 된 Window 객체를 포함하는 WindowManager 클래스가 있으며이를 관리하고 새로운 객체를 생성하는 방법을 상상해보십시오. 또한 HTML 표현도 가능합니다.

일부는 정적 CSS로 처리하고 ID/클래스를 적용하여 일부 코드를 정리할 수 있지만 위치 지정 및 크기를 프로그래밍 방식으로 수행해야한다고 가정 해 봅시다 (크기 조정, 드래그 드롭 등을 처리하기 위해)).

ExtJS, jQuery 등에서 제공 할 수있는 프레임 워크 수준의 솔루션에는 관심이 없습니다. 자국산 코드에 대한 모범 사례가 무엇인지 알고 싶습니다. 사실, 나는 프레임 워크의 엔지니어가 자신의 UI 클래스를 어떻게 설계하는지 알고 싶어한다.

Answer 1

개체의 HTML 부분에 대해 템플릿을 사용하여 구성 요소의 HTML 구조를 정의하고 구성 요소를 초기화 할 때 필요한 모든 데이터를 연결합니다. 템플릿 함수를 구현하는 데는 여러 가지 방법이 있습니다. 예를 들어 underscore.js을 살펴보십시오.

스타일의 경우 스타일 시트에 기본값을 넣습니다. 그들이 자바 스크립트를 통해 나중에 수정할 필요가 있는지는 중요하지 않습니다. CSS에서 정의 된 경우에도 여전히 작동합니다. 구성 요소에 있어야하는 유일한 정보는 해당 구성 요소가 실행하는 다양한 이벤트의 기본 동작입니다.

기본 "클래스"(자바가 실제 클래스가 없다는 것을 이해하는)에 공통 속성을 배치하는 간단한 프로토 타입 체인을 만들 수도 있습니다.이 작업을 수행하는 확장 함수의 예제는 underscore.js를 참조하십시오. 검색을 수행 할 수있는 다른 구현 중에서.

결국 중요한 것은 사용하기 쉽고 이해하기 쉽고 합리적으로 잘 수행된다는 것입니다. 다시 돌아가서 제대로 작동하지 않는 부분을 개선하거나 코드를 모듈로 재구성 할 수 있습니다.

http://documentcloud.github.com/backbone/

내가 템플릿 내에서 HTML을 저장하고 컨트롤러 (각 인스턴스에 대해 동적으로 생성 된 DIV)를 관리하는 시각적 요소에로드 :

Answer 2

Backbone.js는 명시된 요구 사항에 적합하다 ..이것은 UI의 각 인스턴스에 고유 한 UI의 재사용 가능한 html 요소와 메서드 및 속성을 제공합니다.