JavaScriptのメソッド間にリスナーを設けて独立性を高めるなど

JavaScriptの書き方がイマイチわかっていないのですが、考えた事を書き留めておきたいと思いますので、おかしければツッコミをいただければ幸いです。

例えば、こんなHTMLがあったとします。

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="navbar.js"></script>
<title></title>
</head>
<body>

    <div id="navbar"></div>

    <div id="content">
        ...
    </div>
</body>
</html>

id：navbarのdivタグはこのページのナビゲーションバーとする部分でありページに対していくつか操作ができるものとします。その内部構造と処理は、navbar.jsに任せるものとします。なぜそうするかと言うと、index.htmlとnavbar.jsの独立性を高めて、見通しをよくするため。ナビゲーションバーで発生した問題は、navbar.jsを見ればよいと考えたわけです。

かと言って、navbar.jsをロードして終りじゃなくてindex.html側<div id="navbar"></div>と紐付けるために少々コードを記述してやります。ナビゲーションバーの要素はnavbar.js内のクラスのインスタンスから取得します。

index.html

<script type="text/javascript">
var navbar = new Navbar();
window.onload = function(){
    document.getElementById("navbar").innerHTML = navbar.getView();
}

</script>

navbar.js

var Navbar = function() {
    this.html = '<div id="navbar_content">'
            +   '<div class="title">ほげほげ</div>'
            +   '<div id="menu_button" class="btn"></div>'
            +  '</div>';
};
Navbar.prototype = {
    getView : function() {
        return this.html;
    }
};

で、このナビゲーションバーの処理が、その内部で完結していれば良いですが、ナビゲーションバー上の操作に対して、index.htmlで扱う処理や表示に影響を与えることも多々あるでしょう。例えば、再読み込みを実行したりとか。
そういう操作に対して、navbar.jsからナビゲーションバー以外の表示を直接操作するのは良くないでしょうし、index.htmlのJavaScript関数を決め打ちで叩くのも依存度が高くなってしまいます。

というわけで、リスナーのような仕組みを設けてみます。navbar.jsは何の関数かしらないけど、index.htmlから渡されたものを叩いとけばいいというような具合に。

index.html

<script type="text/javascript">
var navbar = new Navbar();
window.onload = function(){
    document.getElementById("navbar").innerHTML = navbar.getView();

    // リスナー登録
    navbar.setOnClickListener(function() {
        // 更新ボタンクリック時の処理
        onRefreshClick();
    });
}
function onRefreshClick() {
    alert("onRefreshClick");
}
</script>

navbar.js

var Navbar = function() {
    this.html = '<div id="navbar_content">'
            +   '<div class="title">ほげほげ</div>'
            +   '<div id="refresh_button" class="btn">メニュー</div>'
            +  '</div>';
};
Navbar.prototype = {
    getView : function() {
        return this.html;
    },
    setOnClickListener : function(listener) {

        var button = document.getElementById("refresh_button");
        // メニューボタンクリック時：内部処理
        button.addEventListener("click", this.onClickButton);
        // メニューボタンクリック時：index.htmlの処理
        button.addEventListener("click", listener);
    },
    onClickButton : function() {

        // ナビゲーションバーの処理
    }
};

なんかAndroidっぽい書き方ですね。これで、<div id="refresh_button" class="btn">メニュー</div>の領域をクリックすると、index.htmlのonRefreshClick()関数が実行されます。これで、index.html側の処理は、onRefreshClick()内に記述することで役割分担ができそうです。

PR:JavaScriptデザインパターン
PR:テスト駆動JavaScript
PR:メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

takaiwa.net

このブログを検索

JavaScriptのメソッド間にリスナーを設けて独立性を高めるなど

ラベル

コメント

コメントを投稿

このブログの人気の投稿

Javaでprivateなfieldやmethodにアクセスする

GolangでWindows GUIアプリケーション

Eclipseの高速化メモ