Backbone.jsとオブザーバーパターンでビューとオブジェクトを疎結合に実装する。日記その他Backbone.jsとオブザーバーパターンでビューとオブジェクトを疎結合に実装する。2013.07.23Backbone.jsでJavaScriptプログラムが疎結合に書けるのは、オブジェクト(Model)とビュー(View)が明確に分離されていて、オブジェクトの変更が随時ビューに伝搬する仕組みになっているためです。MVCフレームワークBackbone.jsオブジェクトが変更された時に、その変更をビューに通知し、それを受けてビューを更新するという設計を、オブザーバーパターンと呼びます。TECHSCORE(テックスコア)一瞬脱線しますが、デザインパターンについてはこの本がとても分かりやすいのでおすすめです。目次オブザーバーパターンを使わないタイマービューをオブザーバーとして切り出すオブザーバーパターンを使わないタイマーBackbone.Eventsを使うと、簡単にオブザーバーパターンが書けます。オブザーバーパターンはビューとオブジェクトを疎結合にするのが目的です。ここでは逆に、オブザーバーパターンを使わないと独立性の低いプログラムになってしまうという例を示してみます。テキトーにタイマーで数字をカウントアップしていくプログラムを書いてみました。100);これは確かに動きます。タイマーの表示対象のビューを増やそうと思うと、タイマー自体がどんどん肥大化していきます。ただの数字だけでなく、プログレスバー表示をしてみます。タイマーの中に、カウンターとプログレスバーの処理を混ざっていて、複雑な表示をしようとすればするほど、タイマー自体が複雑になってしまいます。100);このくらいのプログラムだったら問題ないですが、ブラウザベースのAjaxアプリケーションなどでは、この数十や数百のオブジェクト、ビューを管理する場合もあります。このままではまともに動かなくなるのも時間の問題でしょう。ビューをオブザーバーとして切り出すそこで登場するのがオブザーバーパターンです。オブザーバーパターンでは、オブジェクト自体がそのビューについての情報を一切持ちません。次のようにタイマーを書きます。これは純粋にタイマーであって、表示に関する処理を一切書いてないのがポイントです。その代わりにタイマーの値が変わったことをイベントnofityとして発生させています。Backbone.Events);timer.start();ビューは次のように、タイマーと分離された形で書くことができます。counterオブジェクトは、timerのnotifyイベントを観測し続けていて、timerがイベントを発生させたタイミングでビューを更新します。{$('#counter').text(i);});次のプログラムは、プログレスバーのビューです。数字のビューと、プログレスバーのビューも完全に分かれているので、片方だけを使うなどという状況にも簡単に対応できます。'|';$('#progressbar').text(str);});このようにオブザーバーパターンを使うと、ビューとオブジェクトを明確に分離することができ、それぞれが複雑化しても安全に実装できます。そんなオブザーバーパターンは、Backboneでは、Eventsオブジェクトを使うことで簡単に作ることができます。上の例で実際に書いた通りです。これはBackbone.Eventsだけを使った例ですが、BackboneのModelクラス、ViewクラスなどはすべてEventsの機能を持っていて、更に拡張されています。Backboneでは、ビューが明確に分離されて、複雑なWEBアプリケーションでも整然と実装していくことができます。コピーkatty0324三度の飯とエレクトロンHandlebars.jsで長すぎる文字列を縮めるヘルパーを作る。MVCの@RequestMappingでパスにピリオドを含めると拡張子とみなされる問題。関連記事AndroidアプリiOSとAndroidのプッシュ通知の開発の違いまとめiOSのAPNSと、AndroidのGCMの実装上の違いをまとめたいと思います。思いつく限り、書き出してみました。追加で思いついたら書き足します。Android...Gruntgrunt-contrib-watchで、JavaScriptやCSSの更新時に自動でビルドする。Gruntで、WEB開発の工程を自動化できることを紹介しました。Gruntに設定を書けば全ての工程は自...Handlebars.jsHandlebars.jsで長すぎる文字列を縮めるヘルパーを作る。Handlebars.jsは、JavaScriptを用いてクライアントサイドでHTMLを生成するテンプレートエンジンです。「Laravel入門中。コントローラとビューを使ってみる。Laravelで、HTTPレスポンスの返送ができるようになりました。あとは、データベースの読み書きができれば、Webアプリケーションが作れます。データベースの...D3.js可視化ライブラリD3.jsの設計が素晴らしすぎる。最近名前を聞くことが多くなってきたD3.jsを試してみています。使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、...GruntJavaScriptやCSSの開発工程を自動化するGruntとは何か?フロントエンドのWEB開発はここ数年で、とても高度になった代わりに、かなり工程が増えました。