スキップしてメイン コンテンツに移動

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コードのための作法

コメント

このブログの人気の投稿

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

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版