C#と諸々 HTML や ASPX と対になる JS ファイルの書き方

[ JavaScript ] その他

2007/09/12 01:43

最近、というか今日から、HTML や ASPX と対になる JS ファイルの書き方を変えてみた。
こんな感じ。

HogePage.js
// HogePage.html を制御するオブジェクトを生成します。
function HogePage()
{
    // Fuga ボタンです。
    this._fugaButton = document.getElementById("_fugaButton");
    // Piyo ボタンです。
    this._piyoButton = document.getElementById("_piyoButton");
    // Fuga テキストボックスです。
    this._fugaTextBox = document.getElementById("_fugaTextBox");

    this._registerEventHandlers();

    return this;
}

/* Static Members { */

    HogePage.piyo = "Piyo";

/* } Static Members */

/* Methods { */

    // 各イベントハンドラを登録します。
    HogePage.prototype._registerEventHandlers =
        function()
        {
            var _this = this;
            this._fugaButton.onclick = function(){_this._fugaButton_Click();};
            this._piyoButton.onclick = function(){_this._piyoButton_Click();};
        };

    // ふがふがします。
    HogePage.prototype._fugaFuga =
        function()
        {
            alert("Hello " + this._fugaTextBox.value + "!!");
        };

    // ぴよぴよします。
    HogePage.prototype._piyoPiyo =
        function()
        {
            alert("Hello " + HogePage.piyo + "!!");
        };

/* } Methods */

/* Event Handlers { */

    // Fuga ボタンのクリック時に呼び出されます。
    HogePage.prototype._fugaButton_Click =
        function()
        {
            this._fugaFuga();
        };

    // Piyo ボタンのクリック時に呼び出されます。
    HogePage.prototype._piyoButton_Click =
        function()
        {
            this._piyoPiyo();
        };

/* } Event Handlers */

// ページのロード時に HogePage オブジェクトを生成します。
this.onload =
    function()
    {
        new HogePage();
    };

要は、ページに対応する JavaScript を一つのオブジェクトにまとめたという感じ。
イベントハンドラの登録が少し遠回りなコードになってしまったのが残念。

ちなみに、これと対になる HogePage.html はこんな。

HogePage.html
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
     <title>Hoge</title>
     <script type="text/javascript" src="HogePage.js"></script>
</head>
<body>
    <input id="_fugaTextBox" type="text"/>
    <button id="_fugaButton">Fuga</button>
    <button id="_piyoButton">Piyo</button>
</body>
</html>

あと、僕の以前の書き方は、このブログの JS ファイルを見るとわかる通り、少し強引に C# っぽく書いていた＾＾； ( つーか、Setting～メソッド重複部分多すぎ・・・なんでこんな重複コードを平然と書いてるんだオレ・・・ｗ )

タグ: JavaScript