JavaScriptで単一ページのクライアントを書く

この記事は無料の翻訳です。 オリジナルはこちらです。

はじめに

現代のWebサービスのクライアントアプリケーションがより複雑になり、その中のJSコードの数が増えていることは誰にとっても秘密ではないと思います。 最近まで、クライアント部分のアーキテクチャは、原則としてゼロから開発され、各プロジェクトに固有でした。 当然のことながら、一般的なタスクを何度も処理する必要がありました。

誰もがサーバー側のMVCフレームワークに慣れていますが、クライアント側のJSコードは構造が不十分なことがよくあります。



この問題を解決するのに役立つ、backbone.js、underscore.js、jQueryに基づいたソリューションに慣れることをお勧めします。

問題の声明

アプリケーションをどのように見たいですか？ 私にとって重要と思われる主なポイントは次のとおりです。

1. ドメインモデルを記述する便利な方法があるはずです。
2. モデルに何らかの変更が加えられた場合、モデルへの変更はユーザーインターフェイスにすぐに反映されます。
3. 明確で保守しやすいMVCスタイルのコード構造。

「映画カタログ」というシンプルなアプリケーションの例を使用して、これらの問題を解決してみましょう。

ツール

必要なもの：

• Backbone.js
• jQuery
• underscore.js
• mustache.js
• ICanHaz.js

Backbone.jsの概要

このフレームワークの目的は、ウィジェットの束を提供することではなく、プレゼンテーション（ビュー）のレベルを提供することでもありません。 そのタスクは、コードの構造化に役立ついくつかの重要なオブジェクトを提供することです。

Model、Collection、View、およびControllerオブジェクトが必要です。

モデル

完全に機能するモデルを取得するには、1行のコードを書くだけです。

var Movie = Backbone.Model.extend({});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、オブジェクトのインスタンスを取得し、任意の属性を設定および取得できます。

 matrix = new Movie(); matrix.set({ title: "The Matrix", format: "dvd' }); matrix.get('title');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトを作成するときに、コンストラクターに属性を直接渡すこともできます。

 matrix = new Movie({ title: "The Matrix", format: "dvd' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数を使用してモデルを展開することにより、オブジェクトの作成時にいくつかのチェックまたはその他のアクションを実行できます

初期化（）。 オブジェクトを作成すると、コンストラクターに渡したパラメーターで呼び出されます。

 var Movie = Backbone.Model.extend({ initialize: function (spec) { if (!spec || !spec.title || !spec.format) { throw "InvalidConstructArgs"; } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

validate（）メソッドを定義することもできます。これは、属性を設定するたびに呼び出され、属性の検証に使用されます。 このメソッドが何かを返す場合、属性は設定されていません。

 var Movie = Backbone.Model.extend({ validate: function (attrs) { if (attrs.title) { if (!_.isString(attrs.title) || attrs.title.length === 0 ) { return "    "; } } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バックボーンの可能性をより完全に紹介するために、 ドキュメントに精通することをお勧めします。

コレクション

バックボーンのコレクションは、あるタイプのモデルの順序付きリストです。 通常の配列とは異なり、コレクションは、コンパレータ（）メソッドを使用して並べ替えルールを設定するなど、より多くの機能を提供します。

コレクション内のモデルのタイプが決定され、そこにオブジェクトを追加すると、非常に簡単に見えます。

 var MovieList = Backbone.Collection.extend({ model: Movie }); var library = new MovieList(); library.add({ title: "The Big Lebowski", format: "VHS" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

視聴回数

一般的に、バックボーンビューは、ブラウザーでモデルの変更を表示するためのルールを定義します。

これがDOM操作の始まりであり、jQueryが作用します。 モデルをDOMに初期ロードするには、テンプレートエンジンが必要です。ICanHaz.js+ mustache.jsバンドルを使用します

以下に、アプリケーションのビューの例を示します。

 var MovieView = Backbone.View.extend({ render: function() { var context = _.extend(this.model.toJSON(), {cid: this.model.cid}); this.el = ich.movie(context); return this; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてをまとめる

これまで、アプリケーションのさまざまな部分について説明しましたが、次に、それらを1つに結合する方法を見てみましょう。

コントローラー

コントローラーでは、アプリケーションのすべての部分を接続し、オブジェクトを操作するためのパスとそれらに関連付けられたメソッドも決定します。

 var MovieAppController = Backbone.Controller.extend({ initialize: function(params) { this.model = new MovieAppModel(); this.view = new MovieAppView({ model: this.model }); params.append_at.append(this.view.render().el); }, routes: { "movie/add": "add", "movie/remove/:number": "remove", }, add: function() { app.model.movies.add(new Movie({ title: 'The Martix' + Math.floor(Math.random()*11), format: 'dvd' })); //          this.saveLocation(); }, remove: function(cid) { app.model.movies.remove(app.model.movies.getByCid(cid)); this.saveLocation(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、アプリケーションモデルがコントローラーに格納され、他のすべてのモデルとコレクション、およびアプリケーションのプレゼンテーションが格納されることがわかります。

私たちの場合のアプリケーションモデルは、映画のコレクションを保存します：

 var MovieAppModel = Backbone.Model.extend({ initialize: function() { this.movies = new MovieList(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションビューは次のようになります。

 var MovieAppView = Backbone.View.extend({ initialize: function() { _.bindAll(this, "addMovie", "removeMovie"); this.model.movies.bind('add', this.addMovie); this.model.movies.bind('remove', this.removeMovie); }, render: function() { $(this.el).html(ich.app(this.model.toJSON())); this.movieList = this.$('#movieList'); return this; }, addMovie: function(movie) { var view = new MovieView({model: movie}); this.movieList.append(view.render().el); }, removeMovie: function(movie) { this.$('#movie_' + movie.cid).remove(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、すべての依存関係とテンプレートを含むインデックスファイル：

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Movie App</title> <!-- libs --> <script src="js/lib/jquery.js"></script> <script src="js/lib/underscore.js"></script> <script src="js/lib/backbone.js"></script> <!-- templating --> <script src="js/lib/mustache.js"></script> <script src="js/lib/ICanHaz.js"></script> <!-- app --> <script src="js/app/Movie.js"></script> <script src="js/app/MovieCollection.js"></script> <script src="js/app/MovieView.js"></script> <script src="js/app/MovieAppModel.js"></script> <script src="js/app/MovieAppView.js"></script> <script src="js/app/MovieAppController.js"></script> <script type="text/javascript"> $(function() { var movieApp = new MovieAppController({append_at: $('body')}); window.app = movieApp; Backbone.history.start(); }); </script> <!-- ich templates --> <script id="app" type="text/html"> <h1>Movie App</h1> <a href="#movie/add">add new movie</a> <ul id="movieList"></ul> </script> <script id="movie" type="text/html"> <li id="movie_{{ cid }}"><span class="title">{{ title }}</span> <span>{{ format }}</span> <a href="#movie/remove/{{ cid }}">x</a></li> </script> </head> <body> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーション全体の準備ができました。 もちろん、これはこれらのライブラリが提供する可能性のほんの一部にすぎませんが、この例はこれらのツールを使用した開発の趣味を感じるのに十分だと思います。