jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。
あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。
できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。
API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。
jquery-mockjax は jQuery.ajax のふるまいをモックと差し替える jQuery プラグインです。Backbone.Model や Backbone.Collection の fetch は内部で jQuery.ajax を使うから、Backbone.js でも使えます。
Backbone.Collection の fetch を差し替えるサンプルがこちら。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>MockjaxSample</title> </head> <body> <h1>MockjaxSample</h1> <div id="main"> </div> <!--ブログエントリを描画するときに使うテンプレート--> <script id="entry-template" type="text/template"> <h2><%- title %></h2> <div> <%- content %> </div> </script> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript" src="underscore.js"></script> <script type="text/javascript" src="backbone.js"></script> <script type="text/javascript" src="jquery.mockjax.js"></script> <script type="text/javascript"> // ブログエントリ。 var Entry = Backbone.Model.extend({ defaults: { title: "", content: "" } }); // ブログ。 var Blog = Backbone.Collection.extend({ model: Entry, // fetch メソッドでサーバーからデータを取得するには、 // url 属性を定義する必要がある。 // url はメソッドでもいい。 url: "blog/" }); // ブログエントリを表示するビュー。 var EntryView = Backbone.View.extend({ template: _.template($("#entry-template").html()), render: function() { var json = this.model.toJSON(); var html = this.template(json); $(this.el).html(html); return this; } }); // メインのビュー。 var BlogView = Backbone.View.extend({ el: $("#main"), render: function() { this.model.each(function(entry) { var view = new EntryView({ model: entry }); view.render(); $(this.el).append(view.el); }, this); return this; } }); // $.ajax のモックを登録。 // url に指定した URL に $.ajax でアクセスすると、 // responseText に指定したデータが返ってくる。 // 下では配列を返しているけど、オブジェクトを返してもいい。 $.mockjax({ url: "blog/", responseText: [ { title: "foo", content:"bar" }, { title: "hoge", content:"fuga" } ] }); window.App = new BlogView({ model: new Blog() }); // fetch メソッドを使ってサーバーからデータを取得する。 window.App.model.fetch({ success: function(resp, xhr) { // データの取得に成功したら描画する。 window.App.render(); } }); </script> </body> </html>
モックを登録しているコード以外は、サーバー側の API を呼び出すときと同じように実装しています。サーバーの API を呼び出すときは、モックを登録しているコードをコメントアウトすればいいだけ。UI の部分には一切手を加える必要なし。
jquery-mockjax を使えば、サーバー側の実装がまったく無くても開発が進められます。JavaScript での UI 開発はもう jquery-mockjax 無しでは考えられないです。