こんな感じ。
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 )
トラックバックURL↓
http://csharper.blog57.fc2.com/tb.php/157-a704d1f9