JavascriptとHTMLの絡ませ方１

Javascript HTML

どうもおはようございます。コネタばかりだったので今回はちょっと変えてJavascriptとHTMLの絡ませ方です。
なんかJavascriptの話となると、マニアックな文法とかの使い方とか、山のように出現する便利なライブラリの使い方に終始して、っで全体的にはどうやって使うの？という気分になるので、私がやっている組み込み方をちょっとお話

Javascriptは最終的にユーザーに見せる部分の操作で、つまりUIの構築ですね。動かないUIはHTMLで構築できますから、その止まってるHTMLのパラメータを動的に書き換えましょうということです。DHTMLってやつでしょうか

VisualBasicとかでWindowsアプリケーションを作るときは、空のウィンドウにボタンやらテキストボックスやらをドラッグドロップでベタベタ貼り付けて、そのボタンとかに裏のロジックやイベント、他のボタンやテキストボックスを絡ませます。

これと同じことをHTML＋Javascriptでやります。

まずHTMLを書きますよくありげなのは、こういうやつ。

<div id="main">
    <div id="sidebar">
        ・・・・
    </div>
    <div id="contetns">
        ・・・・
    </div>
</div>

ここで皮のHTMLと内部のロジックを結合させてウィジェット？的なものにします

function ObjSideBar(){
    this.sidebarBlock = document.getElementById("sidebar");
    var self = this;
    this.changeWidth = function(_width){
        self.sidebarBlock.style.width = _width;
    }
}

こんな感じで、内部に操作するメソッドを実装します。出来上がったら・・・

var objSideBar = new ObjSideBar();

こうして、適当にグローバル空間にnewして転がしておきます、これは好みですけどｗ
ブロックはたぶん画面に多くても10個ぐらいでしょうから、グローバルに転がしておいても人間が把握できる範囲内だと思って、こんな感じにしてます。
ブロックの中にブロックが入っていた場合は、状況によっておウィジェットの中で同居させたり、ばらしたり、そこは状況によりけりでやってます。

HTMLの内容を操作するメソッドが実装されている＋全部グローバルに置いてあるということで、あとは互いにメッセージを打ち合うように絡ませます。つまり互いが互いにグローバル上のオブジェクトのメソッドを呼び出しあいます

本当は階層化し、オブジェクトがオブジェクトを所有する関係にして、一方向にしかメッセージが打てない設計が小さいブロック側に影響が無いのでいいのかもしれませんけど・・・
リクエストがあってレスポンスを吐くというサーバサイドプログラムにありげな動きなら実装しやすいです。っが、イベントドリブンな動きでは呼び出され側が呼び出し側のメソッドをトリガできると楽なことが多いですよね？、試した結果、こんな感じがわかりやすいので今のとこのスタイルにしてます

↑が基本で、もう少し細かい部分で、いつも工夫しながら書いているつもりなんですけど。実はJavascript全部理解してないので、もっとうまいやり方があるとは思います。

あ・・・月曜朝から疲れてますわ