JavaScript プログラムはますます複雑になるため、多くの場合、チームによる共同開発が必要になります。その際、コードのモジュール化と組織化の仕様が非常に重要になります。 MVC パターンは、コード編成の古典的なパターンです。
(…MVC の概要)
（1）モデル
モデルは、プログラムに必要なデータ ソースであるデータ層を表し、通常は JSON 形式で表現されます。
（2）
を見る
ビューは、ユーザー インターフェイスであるプレゼンテーション層を表します。Web ページの場合、ユーザーに表示される Web ページの HTML コードです。
(3)コントローラー
Controller は、元のデータ (Model) を処理して View に送信するために使用される制御層を表します。
Web プログラミングは MVC に基づいたクライアント プログラミングとは異なるため、JavaScript コミュニティは MVP (Model-View-Presenter)、MVVM (Model-View-ViewModel) などのさまざまなバリアント フレームワークを作成しました。このタイプのフレームワークのモードは総称して MV* と呼ばれます。
フレームワークの利点は、コードが合理的に整理され、チームワークと将来のメンテナンスが容易になることですが、欠点は、一定の学習コストがかかり、記述方法が制限されることです。
バックボーンの読み込み
<スクリプト src="/javascripts/lib/jquery.js">
<スクリプト src="/javascripts/lib/underscore.js">
<スクリプト src="/javascripts/lib/backbone.js">
<スクリプト src="/javascripts/jst.js">
<スクリプト src="/javascripts/router.js">
<スクリプト src="/javascripts/init.js">
バックボーン.ビュー
基本的な使い方
Backbone.View メソッドは、ビュー クラスを定義するために使用されます。
var AppView = Backbone.View.extend({
レンダリング: function(){
$('main').append('
第1レベルのタイトル
');
}
});
上記のコードは、Backbone.View の extend メソッドを通じてビュー クラス AppView を定義します。このクラス内には、Web ページ上にビューを配置するために使用される render メソッドがあります。
これを使用する場合は、まずビュー クラスの新しいインスタンスを作成し、そのインスタンスを通じて render メソッドを呼び出して、Web ページ上にビューを表示する必要があります。
var appView = new AppView();
appView.render();
上記のコードは、ビュー クラス AppView の新しいインスタンス appView を作成し、appView.render を呼び出すと、指定されたコンテンツが Web ページに表示されます。
新しいビュー インスタンスを作成するときは、通常、モデルを指定する必要があります。
var document = 新しいドキュメント({
モデル: ドキュメント
});
メソッドの初期化
ビューでは、インスタンスの生成時に初期化メソッドを定義することもできます。このメソッドはインスタンスを初期化するために自動的に呼び出されます。
var AppView = Backbone.View.extend({
初期化: function(){
This.render();
}、
レンダリング: function(){
$('main').append('
第1レベルのタイトル
');
}
});
var appView = new AppView();
上記のコードで初期化メソッドが定義されているため、インスタンス生成後に appView.render() を手動で呼び出す手順が省略されます。
el 属性、$el 属性
「ビュー」にバインドされた Web ページ要素を render メソッドで直接指定することに加えて、ビューの el 属性を使用して Web ページ要素を指定することもできます。
var AppView = Backbone.View.extend({
el: $('main'),
レンダリング: function(){
This.$el.append('
第一レベルのタイトル
');
}
});
上記のコードは Web ページ要素を render メソッドに直接バインドしており、効果はまったく同じです。上記のコードでは、el 属性に加えて、$el 属性も存在します。前者は指定された DOM 要素を表し、後者は DOM 要素に対応する jQuery オブジェクトを表します。
tagName 属性、className 属性
el 属性が指定されていない場合は、tagName 属性と className 属性を通じて指定することもできます。
var Document = Backbone.View.extend({
タグ名: "li"、
クラス名: "ドキュメント",
render: function() {
// ...
}
});
テンプレートメソッド
ビューの template 属性は、Web ページのテンプレートを指定するために使用されます。
var AppView = Backbone.View.extend({
テンプレート: _.template("
こんにちは "),
});
上記のコードでは、アンダースコア関数ライブラリのテンプレート関数はテンプレート文字列をパラメータとして受け取り、対応するテンプレート関数を返します。このテンプレート機能を使用すると、特定の値を指定するだけで Web ページのコードを生成できます。
var AppView = Backbone.View.extend({
el: $('#container'),
テンプレート: _.template("
こんにちは "),
初期化: function(){
This.render();
}、
レンダリング: function(){
This.$el.html(this.template({who: 'world!'}));
}
});
上記のコードのレンダリングでは、テンプレート メソッドを呼び出して特定の Web ページ コードを生成します。
実際のアプリケーションでは、ブラウザが JavaScript コードに従って解析しないように、テンプレートは script タグ内に配置されるのが一般的です。type 属性は text/template に設定されます。
テンプレートは以下のコードを使用してコンパイルできます。
window.templates = {};
var $sources = $('script[type="text/template"]');
$sources.each(function(index, el) {
var $el = $(el);
テンプレート[$el.data('name')] = _.template($el.html());
});
イベント属性
events 属性は、ビューのイベントとそれに対応する処理関数を指定するために使用されます。
var Document = Backbone.View.extend({
イベント: {
".icon をクリック": "開く",
"click .button.edit": "openEditDialog",
".button.delete をクリック": "破棄"
}
});
上記のコードでは、クリック イベントは 3 つの CSS セレクターとそれらに対応する 3 つのハンドラーを指定します。
listento メソッド
listento メソッドは、特定のイベントのコールバック関数を指定するために使用されます。
var Document = Backbone.View.extend({
初期化: function() {
This.listenTo(this.model, "変更", this.render);
}
});
上記のコードはモデルの変更イベントで、コールバック関数にはrenderを指定しています。
メソッドを削除
remove メソッドはビューを削除するために使用されます。
updateView: function() {
view.remove();
view.render();
};
サブビュー
サブビューは親ビューで呼び出すことができます。ここでは、その書き方の 1 つを紹介します。
render : function (){
This.$el.html(this.template());
This.child = new Child();
This.child.appendTo($.('.container-placeholder').render();
}
バックボーン.ルーター
RouterはBackboneが提供するルーティングオブジェクトであり、ユーザーが要求したURLとバックエンド処理機能を1対1に対応させるために使用されます。
まず、新しい Router クラスを定義します。
Router = Backbone.Router.extend({
ルート: {
}
});
ルート属性
Backbone.Router オブジェクトで最も重要なのは、routes 属性です。パスの処理方法を設定するために使用されます。
routes 属性はオブジェクトであり、その各メンバーはパス処理ルールを表し、キー名はパス ルール、キー値は処理メソッドを表します。
キー名が空の文字列の場合、それはルート パスを表します。
ルート: {
'': 'phonesIndex',
}、
PhonesIndex: function () {
new PhonesIndexView({ el: 'section#main' });
}
アスタリスクは任意のパスを表し、特定のパス値を取得するようにパス パラメーターを設定できます。
var AppRouter = Backbone.Router.extend({
ルート: {
"*アクション": "デフォルトルート"
}
});
var app_router = 新しい AppRouter;
app_router.on('route:defaultRoute', function(actions) {
console.log(アクション);
})
上記のコードでは、ルート パスの後のパラメーターがキャプチャされ、コールバック関数に渡されます。
パスルールの書き方。
var myrouter = Backbone.Router.extend({
ルート: {
"ヘルプ": "ヘルプ"、"ヘルプ"、
"search/:query": "検索"
}、
ヘルプ: function() {
...
}、
検索: 関数(クエリ) {
...
}
});
ルート: {
"help/:page": "ヘルプ",
"download/*path": "ダウンロード",
"folder/:name": "openFolder",
"folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
...
});
バックボーン.ヒストリー
ルーターをセットアップしたら、アプリケーションを起動できます。 Backbone.history オブジェクトは、URL の変更を監視するために使用されます。
App = new Router();
$(document).ready(function () {
Backbone.history.start({ PushState: true });
});
PushState メソッドを開きます。アプリケーションがルート ディレクトリにない場合は、ルート ディレクトリを指定する必要があります。
Backbone.history.start({pushState: true, root: "/public/search/"})
バックボーン.モデル
モデルは単一のオブジェクト エンティティを表します。
var User = Backbone.Model.extend({
デフォルト: {
名前: ''、
メール: ''
}
});
var user = new User();
上記のコードは、extend メソッドを使用して、モデルのテンプレートを表す User クラスを生成します。次に、新しいコマンドを使用して Model のインスタンスを生成します。上記のコードは、デフォルト属性を設定するために使用されます。デフォルトでは、ユーザー オブジェクトに名前と電子メールの 2 つの属性があり、それらの値は空の文字列に等しいことを示します。
インスタンスを生成するとき、各属性に特定の値を指定できます。
var user = 新しいユーザー ({
ID: 1、
名前: '名前'、
電子メール: 'name@email.com'
});
上記のコードは、インスタンスの生成時に各属性の特定の値を提供します。
idAttribute 属性
モデル インスタンスには、他のインスタンスを区別するための主キーとして機能する属性が必要です。この属性の名前は idAttribute 属性によって設定され、通常は id に設定されます。
var Music = Backbone.Model.extend({
id属性: 'id'
});
メソッドの取得
get メソッドは、Model インスタンスの特定の属性の値を返すために使用されます。
var user = new User({ name: "name", age: 24});
var age = user.get("年齢") // 24
;
var name = user.get("name") // "名前"
;
メソッドの設定
set メソッドは、Model インスタンスの特定の属性の値を設定するために使用されます。
var User = Backbone.Model.extend({
購入: function(newCarsName){
This.set({car: newCarsName });
}
});
var user = new User({name: 'BMW',model:'i8',type:'car'});
user.buy('ポルシェ');
var car = user.get("car") // 'ポルシェ'
;
メソッド
on メソッドは、オブジェクトの変更を監視するために使用されます。
var user = 新しいユーザー({名前: 'BMW',モデル: 'i8'});
user.on("変更:名前", 関数(モデル){
var name = model.get("name") // "ポルシェ"
;
console.log("車の名前を " name に変更しました);
});
user.set({名前: 'ポルシェ'});
// 車の名前をポルシェに変更しました
上記のコードの on メソッドは、イベントをリッスンするために使用されます。「change:name」は、name 属性が変更されたことを示します。
urlroot 属性
この属性はサーバー側でモデルを操作するためのパスを指定するために使用されます。
var User = Backbone.Model.extend({
URLルート: '/user'
});
上記のコードは、モデルに対応するサーバーのパスが /user であることを指定しています。
イベントを取得
フェッチ イベントは、サーバーからモデルを取得するために使用されます。
var user = 新しいユーザー ({id: 1});
user.fetch({
成功: 関数 (ユーザー){
console.log(user.toJSON());
}
})
上記のコードでは、ユーザー インスタンスに id 属性 (値は 1) が含まれており、フェッチ メソッドは HTTP 動詞 GET を使用して URL「/user/1」にリクエストを送信し、サーバーからインスタンスを取得します。
保存方法
save メソッドは、モデルを作成または更新するようにサーバーに通知するために使用されます。
Model インスタンスに id 属性が含まれていない場合、save メソッドは POST メソッドを使用して新しいインスタンスを作成します。
var User = Backbone.Model.extend({
URLルート: '/user'
});
var user = 新しいユーザー ();
var userDetails = {
名前: '名前'、
電子メール: 'name@email.com'
};
user.save(userDetails, {
成功: 関数 (ユーザー) {
console.log(user.toJSON());
}
})
上記のコードは、まず Model に対応する URL がクラス内の /user であることを指定し、次に新しいインスタンスを作成し、最後に save メソッドを呼び出します。これには 2 つのパラメータがあり、1 つ目はインスタンス オブジェクトの特定の属性で、2 つ目のパラメータは成功イベント (正常に保存) のコールバック関数を設定するコールバック関数オブジェクトです。具体的には、save メソッドは /user に POST リクエストを作成し、データとして {name: ‘name’, email: ‘name@email.com’} を提供します。
Model インスタンスに id 属性が含まれている場合、save メソッドは PUT メソッドを使用してインスタンスを更新します。
var user = 新しいユーザー ({
ID: 1、
名前: '张三'、
電子メール: 'name@email.com'
});
user.save({name: '李思'}, {
成功: 関数 (モデル) {
console.log(user.toJSON());
}
});
上記のコードでは、オブジェクト インスタンスに id 属性 (値は 1) が含まれており、save は PUT メソッドを使用して URL「/user/1」にリクエストを作成し、インスタンスを更新します。
メソッドを破棄します
destroy メソッドは、サーバー上のインスタンスを削除するために使用されます。
var user = 新しいユーザー ({
ID: 1、
名前: '名前'、
電子メール: 'name@email.com'
});
user.destroy({
成功: function () {
console.log('破壊');
}
});
上記のコードの destroy メソッドは、HTTP 動詞 DELETE を使用して、URL "/user/1" に対してリクエストを作成し、対応する Model インスタンスを削除します。
バックボーン.コレクション
コレクションは同じタイプのモデルのコレクションです。たとえば、モデルは動物、コレクションは動物園、モデルは一人の人間、コレクションは会社です。
var Song = Backbone.Model.extend({});
var Album = Backbone.Collection.extend({
モデル: ソング
});
上記のコードでは、Song はモデル、Album はコレクションであり、Album には Song と等しいモデル属性があり、Album が Song のコレクションであることを示しています。
メソッドの追加、メソッドの削除
モデル インスタンスは、Collection インスタンスに直接配置することも、add メソッドを使用して追加することもできます。
var Song1 = new Song({ id: 1 ,name: "歌名1", アーティスト: "张三" });
var Song2 = new Music ({id: 2,name: "歌名2", アーティスト: "李思" });
var myAlbum = 新しいアルバム([曲 1, 曲 2]);
var Song3 = new Music({ id: 3, name: " 曲名 3", アーティスト: "Zhao Wu" });
myAlbum.add(song3);
Remove メソッドは、Collection インスタンスから Model インスタンスを削除するために使用されます。
myAlbum.remove(1);
上記のコードは、remove メソッドのパラメーターがモデル インスタンスの id 属性であることを示しています。
get メソッド、set メソッド
get メソッドは、指定された ID を持つ Model インスタンスをコレクションから取得するために使用されます。
myAlbum.get(2))
フェッチメソッド
fetch メソッドは、サーバーからコレクション データを取得するために使用されます。
var songs = 新しいBackbone.Collection;
songs.url = '/songs';
songs.fetch();
バックボーン.イベント
var obj = {};
_.extend(obj, バックボーン.イベント);
obj.on("メッセージの表示", function(msg) {
$('#display').text(msg);
});
obj.trigger("show-message", "Hello World");
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
