JavaScriptの書き方がイマイチわかっていないのですが、考えた事を書き留めておきたいと思いますので、おかしければツッコミをいただければ幸いです。
例えば、こんなHTMLがあったとします。
index.html
id:navbarのdivタグはこのページのナビゲーションバーとする部分でありページに対していくつか操作ができるものとします。その内部構造と処理は、navbar.jsに任せるものとします。なぜそうするかと言うと、index.htmlとnavbar.jsの独立性を高めて、見通しをよくするため。ナビゲーションバーで発生した問題は、navbar.jsを見ればよいと考えたわけです。
かと言って、navbar.jsをロードして終りじゃなくてindex.html側<div id="navbar"></div>と紐付けるために少々コードを記述してやります。ナビゲーションバーの要素はnavbar.js内のクラスのインスタンスから取得します。
index.html
navbar.js
で、このナビゲーションバーの処理が、その内部で完結していれば良いですが、ナビゲーションバー上の操作に対して、index.htmlで扱う処理や表示に影響を与えることも多々あるでしょう。例えば、再読み込みを実行したりとか。
そういう操作に対して、navbar.jsからナビゲーションバー以外の表示を直接操作するのは良くないでしょうし、index.htmlのJavaScript関数を決め打ちで叩くのも依存度が高くなってしまいます。
というわけで、リスナーのような仕組みを設けてみます。navbar.jsは何の関数かしらないけど、index.htmlから渡されたものを叩いとけばいいというような具合に。
index.html
navbar.js
なんかAndroidっぽい書き方ですね。これで、<div id="refresh_button" class="btn">メニュー</div>の領域をクリックすると、index.htmlのonRefreshClick()関数が実行されます。これで、index.html側の処理は、onRefreshClick()内に記述することで役割分担ができそうです。
PR:JavaScriptデザインパターン
PR:テスト駆動JavaScript
PR:メンテナブル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コードのための作法
コメント
コメントを投稿