Javascript MVCフレームワークBackbone.js_javascriptスキルの詳細説明

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");