私はJavaScriptとOOPに精通していますが、UI（HTML）のプログラミングに使用されるJSクラスの設計にはほとんど慣れていません。私はちょっと調べたことがありますが、流行のパターンは見当たりません。DOMのUIオブジェクトを表すJavaScriptクラスを設計するためのベストプラクティスは何ですか？
私は、パネルのようなオブジェクト（Microsoft Windowsパネルに似ています）を動的に作成したいとしましょう。各オブジェクトには、コンテナ、テキストラベルを含むことができるヘッダー領域、およびクリックイベントハンドラを持つ閉じるボタンが必要です。 DOM表現（HTML）に加えて、オブジェクトにはJavaScriptオブジェクト表現（変数とメソッド）もあります。私が試した1つの方法は次のとおりです。
//
// 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();
これは「正しく」感じません。もう1つの方法は、render（）メソッドを用意し、それを使ってHTML生成コードを分離する方法です。 JSオブジェクトには、その内部に複数のネストされたHTMLオブジェクトが含まれているように見えます。 innerHTMLを介してネストされたタグを渡すだけですか？
私は好奇心が強いです...ここで最善のアプローチは何ですか？ DOMコード（HTMLオブジェクトとスタイリング）と伝統的な変数とメソッドを持つクラスを設計する最良の方法は何ですか？これらのHTMLオブジェクトにプロトタイプを使用する方法はありますか？この例では、インスタンス化されたWindowオブジェクトを含むWindowManagerクラスもあり、それらを管理し、新しいオブジェクトを作成することができます。また、HTML表現も可能です。
上記のうちいくつかは静的なCSSで処理し、ID /クラスを適用してコードの一部を整理することもできますが、位置付けとサイズをプログラムで達成する必要があるとしましょう（サイズ変更、ドラッグ・ドロップなどを処理するため） ）。
私は、ExtJS、jQueryなどで提供されるフレームワークレベルのソリューションには興味がありません。自家製コードのベストプラクティスについて教えてください。実際、私は、フレームワークのエンジニアがUIクラスをどのように設計しているかを知ることに興味があります。
jQueryとjQueryUIはオープンソースです。あなたはいつも見ることができます;）https://github.com/bmsterling/jquery-ui – AlienWebguy
John Resig（jQuery）は、私が今まで見たことのない最も包括的なデザインディスカッションを提供しています。あなたはそこから始める必要があります。 – dkretz