JavaScriptプログラムがますます複雑になるにつれて、彼らは多くの場合、チームがコラボレーションで開発する必要があり、コードと組織仕様のモジュール化が非常に重要になります。 MVCパターンは、コード組織の古典的なモデルです。
（…MVCの紹介。）
（1）モデル
モデルは、データレイヤー、つまりプログラムで必要なデータソースを表し、通常はJSON形式で表されます。
（2）表示
ビューは、ユーザーインターフェイスであるプレゼンテーションレイヤーを表します。 Webページの場合、ユーザーが見たWebページのHTMLコードです。
（3）コントローラー
コントローラーは、元のデータ（モデル）を処理し、ビューに転送するために使用されるコントロール層を表します。
MVCに基づいたWebプログラミングはクライアントプログラミングとは異なるため、JavaScriptコミュニティはさまざまなバリアントフレームワークMVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）などを作成しています。
フレームワークの利点は、コードを合理的に整理し、チームワークと将来のメンテナンスを促進することです。不利な点は、特定の学習コストがあり、それを書くことを制限することです。
バックボーンの読み込み
コードコピーは次のとおりです。
<スクリプトsrc = "/javascripts/lib/jquery.js"> </scrip>
<Script src = "/javascripts/lib/anderscore.js"> </script>
<スクリプトsrc = "/javascripts/lib/backbone.js"> </scrip>
<スクリプトsrc = "/javascripts/jst.js"> </script>
<スクリプトsrc = "/javascripts/router.js"> </script>
<スクリプトsrc = "/javascripts/init.js"> </script>
backbone.view
基本的な使用法
Backbone.Viewメソッドは、ビュークラスを定義するために使用されます。
コードコピーは次のとおりです。
var appview = backbone.view.extend（{
render：function（）{
$（ 'main'）。append（ '<h1>第1レベルのタイトル</h1>'）;
}
}）;
上記のコードは、backbone.viewの拡張方法を介してビュークラスのアプリビューを定義します。このクラス内には、Webページにビューを配置するレンダリング方法があります。
それを使用するときは、ビュークラスの新しいインスタンスを作成し、インスタンスを介してレンダリングメソッドを呼び出して、ビューをWebページに表示できるようにする必要があります。
コードコピーは次のとおりです。
var appview = new AppView（）;
appview.render（）;
上記のコードは、View Class AppViewの新しいインスタンスAppViewを作成し、AppView.Renderを呼び出すと、指定されたコンテンツがWebページに表示されます。
新しいビューインスタンスを作成するときは、通常、モデルを指定する必要があります。
コードコピーは次のとおりです。
var document = new Document（{
モデル：doc
}）;
メソッドを初期化します
ビューは、初期化メソッドを定義することもできます。インスタンスを生成すると、インスタンスを初期化するためにメソッドが自動的に呼び出されます。
コードコピーは次のとおりです。
var appview = backbone.view.extend（{
初期化：function（）{
this.render（）;
}、
render：function（）{
$（ 'main'）。append（ '<h1>第1レベルのタイトル</h1>'）;
}
}）;
var appview = new AppView（）;
上記のコードが初期化メソッドを定義した後、インスタンスを生成した後に手動でappview.render（）を呼び出すステップを排除します。
el属性、$ el属性
レンダリング方法で「表示」にバインドされたWebページ要素を指定することに加えて、ビューのEL属性を使用してWebページ要素を指定することもできます。
コードコピーは次のとおりです。
var appview = backbone.view.extend（{
EL：$（ 'main'）、
render：function（）{
これ。$ el.Append（ '<h1>第1レベルのタイトル</h1>'）;
}
}）;
上記のコードは、レンダリング方法でWebページ要素を直接バインドし、効果はまったく同じです。上記のコードでは、EL属性に加えて、$ EL属性でもあります。前者は指定されたDOM要素を表し、後者はDOM要素に対応するjQueryオブジェクトを表します。
tagname属性、className属性
EL属性が指定されていない場合、Tagname属性とclassName属性を介して指定することもできます。
コードコピーは次のとおりです。
var document = backbone.view.extend（{
tagname：「li」、
className： "document"、
render：function（）{
// ...
}
}）;
テンプレートメソッド
ビューのテンプレートプロパティは、Webページテンプレートを指定するために使用されます。
コードコピーは次のとおりです。
var appview = backbone.view.extend（{
テンプレート：_.template（ "<h3> hello <％= who％> <h3>"）、
}）;
上記のコードでは、アンダースコア関数ライブラリのテンプレート関数は、テンプレート文字列をパラメーターとして受け入れ、対応するテンプレート関数を返します。このテンプレート関数を使用すると、特定の値が提供されている限り、Webページコードを生成できます。
コードコピーは次のとおりです。
var appview = backbone.view.extend（{
EL：$（ '＃container'）、
テンプレート：_.template（ "<h3> hello <％= who％> <h3>"）、
初期化：function（）{
this.render（）;
}、
render：function（）{
this。$ el.html（this.template（{who： 'world！'}））;
}
}）;
上記のコードのレンダリングは、テンプレートメソッドを呼び出して、特定のWebページコードを生成します。
実際のアプリケーションでは、テンプレートは通常、スクリプトタグに配置されます。 JavaScriptコードに従ってブラウザの解析を防ぐために、タイプ属性はテキスト/テンプレートに設定されます。
コードコピーは次のとおりです。
<script type = "text/template" data-name = "templatename">
<！ - テンプレートの内容はこちら - >
</script>
次のコードを使用して、テンプレートをコンパイルできます。
コードコピーは次のとおりです。
window.templates = {};
var $ sources = $（ 'script [type = "text/template"]'）;
$ sources.each（function（index、el）{
var $ el = $（el）;
テンプレート[$ el.data（ 'name'）] = _.template（$ el.html（））;
}）;
イベント属性
イベント属性は、ビューのイベントとそれに対応する取り扱い関数を指定するために使用されます。
コードコピーは次のとおりです。
var document = backbone.view.extend（{
イベント：{
「Click.icon」：「Open」、
「click .button.edit」：「openeditdialog」、
「クリック.button.delete」：「破壊」
}
}）;
上記のコードの1つは、3つのCSSセレクターのクリックイベントと、対応する3つのハンドリング関数を指定します。
Listentoメソッド
Listentoメソッドは、特定のイベントのコールバック関数を指定するために使用されます。
コードコピーは次のとおりです。
var document = backbone.view.extend（{
初期化：function（）{
this.listento（this.model、 "change"、this.render）;
}
}）;
上記のコードはモデルの変更イベントであり、コールバック関数はレンダリングとして指定されています。
メソッドを削除します
削除方法は、ビューを削除するために使用されます。
コードコピーは次のとおりです。
updateView：function（）{
view.remove（）;
view.render（）;
};
サブビュー
子ビューは、親ビューで呼び出すことができます。以下は書く方法です。
コードコピーは次のとおりです。
render：function（）{
this。$ el.html（this.template（））;
this.child = new Child（）;
this.child.appendto（$。（ '。container-placeholder'）。render（）;
}
Backbone.Router
ルーターは、バックボーンによって提供されるルーティングオブジェクトであり、バックエンド処理機能を持つユーザーが要求したURLに対応するために使用されます。
まず、新しいルータークラスが定義されています。
コードコピーは次のとおりです。
router = backbone.router.extend（{
ルート：{
}
}）;
ルート属性
BackBone.Routerオブジェクトで最も重要なことは、Routesプロパティです。パス処理方法を設定するために使用されます。
ルート属性はオブジェクトであり、それぞれのメンバーはパス処理ルールを表します。キー名はパスルールであり、キー値は処理方法です。
キー名が空の文字列の場合、ルートパスを表します。
コードコピーは次のとおりです。
ルート：{
''： 'Phonesindex'、
}、
phonesindex：function（）{
New PhonesIndexView（{el： 'セクション＃main'}）;
}
アスタリスクは任意のパスを表し、特定のパス値をキャプチャするパスパラメーターを設定できます。
コードコピーは次のとおりです。
var approuter = backbone.router.extend（{
ルート：{
「*アクション」：「Defaultroute」
}
}）;
var app_router = new AppRouter;
app_router.on（ 'route：defaultroute'、function（action）{
console.log（アクション）;
}）
上記のコードでは、ルートパスの後ろのパラメーターがキャプチャされ、コールバック関数が渡されます。
パスルールを書き込む方法。
コードコピーは次のとおりです。
var myRouter = backbone.router.extend（{
ルート：{
「ヘルプ」：「ヘルプ」、
「検索/：クエリ」：「検索」
}、
ヘルプ：function（）{
...
}、
検索：function（query）{
...
}
}）;
ルート：{
「ヘルプ/：ページ」：「ヘルプ」、
「ダウンロード/*パス」：「ダウンロード」、
「フォルダー/：名前」：「OpenFolder」、
「フォルダー/：name-：mode "：" openfolder "
}
router.on（ "route：help"、function（page）{
...
}）;
Backbone.History
ルーターをセットアップした後、アプリケーションを開始できます。 backbone.historyオブジェクトは、URLの変化を監視するために使用されます。
コードコピーは次のとおりです。
app = new Router（）;
$（document）.ready（function（）{
backbone.history.start（{pushState：true}）;
}）;
プッシュステートメソッドを開きます。アプリケーションがルートディレクトリにない場合は、ルートディレクトリを指定する必要があります。
コードコピーは次のとおりです。
backbone.history.start（{pushstate：true、root： "/public/search/"}）
backbone.model
モデルは単一のオブジェクトエンティティを表します。
コードコピーは次のとおりです。
var user = backbone.model.extend（{
デフォルト：{
名前： ''、
電子メール： ''
}
}）;
var user = new user（）;
上記のコードは、拡張方法を使用して、モデルのテンプレートを表すユーザークラスを生成します。次に、新しいコマンドを使用して、モデルのインスタンスを生成します。デフォルト属性は、デフォルト属性を設定するために使用されます。上記のコードは、ユーザーオブジェクトにデフォルトで2つの属性名と電子メールがあり、その値は空の文字列に等しいことを示しています。
インスタンスを生成する場合、各属性に特定の値を提供できます。
コードコピーは次のとおりです。
var user = new user（{{
ID：1、
名前：「名前」、
電子メール：「[email protected]」
}）;
上記のコードは、インスタンスを生成するときに各属性の特定の値を提供します。
idattribute属性
モデルインスタンスには、他のインスタンスを区別するための主要なキーとして機能するプロパティが必要です。この属性の名前はiDattribute属性によって設定され、通常はIDに設定されます。
コードコピーは次のとおりです。
var music = backbone.model.extend（{
idattribute： 'id'
}）;
メソッドを取得します
GETメソッドは、モデルインスタンスの特定のプロパティの値を返すために使用されます。
コードコピーは次のとおりです。
var user = new user（{name： "name"、age：24}）;
var age = user.get（ "age"）; // 24
var name = user.get（ "name"）; // "名前"
メソッドを設定します
SETメソッドは、モデルインスタンスの特定のプロパティの値を設定するために使用されます。
コードコピーは次のとおりです。
var user = backbone.model.extend（{
購入：function（newcarsname）{
this.set（{car：newcarsname}）;
}
}）;
var user = new user（{name： 'bmw'、model： 'i8'、type： 'car'}）;
user.buy（ 'porsche'）;
var car = user.get（ "car"）; //「ポルシェ」
メソッドについて
ONメソッドは、オブジェクトの変更を聞くために使用されます。
コードコピーは次のとおりです。
var user = new user（{name： 'bmw'、model： 'i8'}）;
user.on（ "change：name"、function（model）{
var name = model.get（ "name"）; //「ポルシェ」
console.log（ "車の名前を" + nameに変更しました）;
}）;
user.set（{name： 'Porsche'}）;
//私の車の名前をポルシェに変更しました
上記のコードのONメソッドはイベントを聞くために使用され、「変更：名前」とは、名前属性が変更されたことを意味します。
Urlroot属性
このプロパティは、サーバー側のモデルで動作するパスを指定するために使用されます。
コードコピーは次のとおりです。
var user = backbone.model.extend（{
urlroot： '/user'
}）;
上記のコードは、モデルに対応するサーバーへのパスが /ユーザーであることを指定しています。
フェッチイベント
フェッチイベントは、サーバーからモデルをフェッチするために使用されます。
コードコピーは次のとおりです。
var user = new user（{id：1}）;
user.fetch（{
成功：function（user）{
console.log（user.tojson（））;
}
}）
上記のコードでは、ユーザーインスタンスにID属性（値は1）が含まれています。 Fetchメソッドは、HTTP動詞を使用してURL "/user/1"にリクエストを発行し、サーバーからインスタンスを取得します。
メソッドを保存します
保存方法は、サーバーに通知してモデルを作成または更新するために使用されます。
モデルインスタンスにID属性が含まれていない場合、保存メソッドはPOSTメソッドを使用してインスタンスを作成します。
コードコピーは次のとおりです。
var user = backbone.model.extend（{
urlroot： '/user'
}）;
var user = new user（）;
var userdetails = {
名前：「名前」、
電子メール：「[email protected]」
};
user.save（userdetails、{
成功：function（user）{
console.log（user.tojson（））;
}
}）
上記のコードは、最初に、モデルの対応するURLがクラス内の /ユーザーであることを指定し、新しいインスタンスを作成し、最後に保存方法を呼び出します。 2つのパラメーターがあります。 1つ目はインスタンスオブジェクトの特定の属性で、2つ目はコールバック関数オブジェクトで、成功イベントのコールバック関数を設定します（正常に保存）。具体的には、保存メソッドは /ユーザーへのpostリクエストを発行し、{name： 'name'、email： '[email protected]'}をデータとして提供します。
モデルインスタンスにID属性が含まれている場合、保存メソッドはPUTメソッドを使用してインスタンスを更新します。
コードコピーは次のとおりです。
var user = new user（{{
ID：1、
名前： 'Zhang San'、
電子メール：「[email protected]」
}）;
user.save（{name： 'li si'}、{
成功：function（model）{
console.log（user.tojson（））;
}
}）;
上記のコードでは、オブジェクトインスタンスにはID属性（値が1）が含まれています。Saveは、PUTメソッドを使用してURL「/user/1」にリクエストを行い、インスタンスを更新します。
メソッドを破壊します
Destroyメソッドは、サーバー上のインスタンスを削除するために使用されます。
コードコピーは次のとおりです。
var user = new user（{{
ID：1、
名前：「名前」、
電子メール：「[email protected]」
}）;
user.destroy（{
成功：function（）{
console.log（ 'Destroud'）;
}
}）;
上記のコードの破壊方法は、HTTP動詞削除を使用して、URL "/user/1"にリクエストを発行し、対応するモデルインスタンスを削除します。
backbone.collection
コレクションは、同じタイプのモデルのコレクションです。たとえば、モデルは動物であり、コレクションは動物園です。モデルは一人で、コレクションは会社です。
コードコピーは次のとおりです。
var song = backbone.model.extend（{}）;
varアルバム= backbone.collection.extend（{
モデル：曲
}）;
上記のコードでは、Songはモデル、アルバムはコレクション、アルバムは曲に等しいモデル属性を持っているので、アルバムは曲のコレクションであることを意味します。
メソッドを追加し、メソッドを削除します
モデルインスタンスは、コレクションインスタンスに直接配置するか、ADDメソッドを使用して追加することができます。
コードコピーは次のとおりです。
var song1 = new song（{id：1、name： "song title 1"、Artist： "Zhang San"}）;
var song2 = new Music（{id：2、name： "Song Title 2"、Artist： "Li Si"}）;
var myalbum = new Album（[song1、song2]）;
var song3 = new Music（{id：3、name： "Song Title 3"、Artist： "Zhao Wu"}）;
myalbum.add（song3）;
削除方法は、コレクションインスタンスからモデルインスタンスを削除するために使用されます。
コードコピーは次のとおりです。
myalbum.remove（1）;
上記のコードは、削除方法のパラメーターがモデルインスタンスのID属性であることを示しています。
メソッドセットメソッドを取得します
GETメソッドは、コレクションから指定されたIDのモデルインスタンスを取得するために使用されます。
コードコピーは次のとおりです。
myalbum.get（2））
メソッドを取得します
Fetchメソッドは、サーバーからの収集データを取得するために使用されます。
コードコピーは次のとおりです。
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch（）;
Backbone.events
コードコピーは次のとおりです。
var obj = {};
_.extend（obj、backbone.events）;
obj.on（ "show-message"、function（msg）{
$（ '＃display'）。text（msg）;
}）;
obj.trigger（ "show-message"、 "hello world"）;