C#と諸々

C#がメインで他もまぁ諸々なブログです
おかしなこと書いてたら指摘してくれると嬉しいです(´・∀・`)
つーかコメント欲しい(´・ω・`)

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~メソッド重複部分多すぎ・・・なんでこんな重複コードを平然と書いてるんだオレ・・・w )
タグ: JavaScript











トラックバックURL↓
http://csharper.blog57.fc2.com/tb.php/157-a704d1f9