Backbone.js の旅に乗り出しましょう

Web 開発の対応物とは異なり、JavaScript はフレームワークの形式で実際に構造を提供したことはありません。ありがたいことに、近年、この状況が変わり始めています。

今日は、複雑でインタラクティブなデータ駆動型アプリケーションの作成プロセスをはるかに簡単にする、かわいい小さなライブラリである Backbone.JS を紹介したいと思います。データをプレゼンテーションから分離する明確な方法を提供します。

---

Backbone.JS の概要

CoffeeScript を構築した JS 忍者、Jeremy Ashkenas によって作成された Backbone は、保守しやすいフロントエンドを作成できる超軽量ライブラリです。バックエンドに依存せず、すでに使用している最新の JavaScript ライブラリとうまく連携します。

Backbone は、重さ 4kb 未満のまとまりのあるオブジェクトのコレクションで、コードに構造を提供し、基本的にブラウザーで適切な MVC アプリケーションを構築するのに役立ちます。公式ウェブサイトではその目的が次のように説明されています:

Backbone は、キーと値のバインディングとカスタム イベントを備えたモデル、列挙可能な関数 API の豊富なコレクション、宣言型イベント処理を備えたビューを提供し、すべてを既存のアプリケーション RESTful JSON に接続することで、JavaScript を多用するアプリケーションの構造を提供します。インターフェース。

正直に言って、上記は解析して理解するのが少し難しいです。それでは、ジェレミーの助けを借りて専門用語を分解していきましょう。

キー値バインディングとカスタム イベント

モデルのコンテンツまたは状態が変更されると、そのモデルにサブスクライブされている他のオブジェクトがそれに応じて処理できるように通知されます。ここでは、モデルが手動でビューを処理するのではなく、ビューがモデル内の変更をリッスンし、それに応じて自身を更新します。

豊富な列挙可能な関数 API

Backbone には、データを処理および操作するための非常に便利な機能が多数付属しています。他の実装とは異なり、JavaScript の配列はかなり中立的であるため、データを処理する必要がある場合に実際の障害となる可能性があります。

宣言型イベント処理を使用したビュー

スパゲッティ バインディング コールを書く日々は終わりました。どのコールバックを特定の要素に関連付ける必要があるかをプログラムで宣言できます。

RESTful JSON インターフェイス

サーバーと通信する場合のデフォルトの方法は標準の AJAX 呼び出しを使用することですが、これを必要に応じて簡単に切り替えることができます。多くのアダプターが登場し、Websocket やローカル ストレージなど、最も人気のあるアダプターのほとんどをカバーしています。

もっと簡単な言葉に分解してみましょう:

Backbone は、データをプレゼンテーションから分離するための明確な方法を提供します。データを処理するモデルはサーバーとの同期のみに関係しますが、ビューの主な役割は、サブスクライブされたモデルへの変更をリッスンして HTML をレンダリングすることです。

---

簡単なFAQ

あなたは今少し混乱していると思いますので、いくつかの点を明確にしましょう:

jQuery に代わるものになるのでしょうか?

＃＃＃いいえ。それらのスコープは非常に補完的であり、機能の重複はほとんどありません。 Backbone はすべての高レベルの抽象化を処理し、jQuery (または同様のライブラリ) は DOM、正規化されたイベントなどを処理します。

それらの範囲とユースケースは大きく異なります。一方を知っているからといって、もう一方を学ばなくてもよいというわけではありません。 JavaScript 開発者は、両方を効果的に使用する方法を知っておく必要があります。

なぜこれを使用する必要があるのですか?

フロントエンド コードは、ネストされたコールバック、DOM 操作、プレゼンテーション用の HTML、その他の言葉では言い表せない動作が入り混じった、蒸し暑い汚い混乱になることがよくあります。

Backbone は、この混乱を管理するための非常にクリーンでエレガントな方法を提供します。

どこで使用すればよいですか?

Backbone は、フロントエンドの重いデータ駆動型アプリケーションの作成に最適です。 GMail インターフェイス、新しい Twitter、または過去数年間に明らかになったその他のことを思い出してください。複雑なアプリケーションの作成が容易になります。

これをより主流の Web ページ

page に組み込むこともできますが、これは実際には Web アプリケーション用に特別に作られたライブラリです。

カプチーノやスプラウトコアに似ていますか?

＃＃＃はいといいえ。

はい。上記のフレームワークと同様、これは主に Web アプリケーションの複雑なフロントエンドを作成するために使用されます。

他との違いは、Backbone が非常に合理化されており、追加のウィジェットが付属していないことです。

バックボーンは非常に軽量で、4kb 未満です。

Cappuccino では Objective-J でコーディングする必要があるのに対し、Sproutcore のビューは JS でプログラム的に宣言する必要があるという事実もあります。これらのアプローチのいずれにも問題はありませんが、Backbone を使用すると、プレーンな JavaScript で一般的な HTML と CSS を使用して作業を完了できるため、より穏やかな学習曲線が可能になります。

ページ上の他のライブラリは引き続き使用できますね?

＃＃＃絶対に。一般的な DOM アクセス、AJAX ラッピング タイプだけでなく、残りのテンプレートやスクリプト読み込みタイプも同様です。これは非常に疎結合であるため、Backbone ではほぼすべてのツールを使用できます。

それは世界平和をもたらすでしょうか?

いいえ、申し訳ありません。しかし、ここであなたを元気づける何かがあります。

さて、この質問は脇に置いて、始めましょう!

---

バックボーンのバックボーンを理解する

バックボーンの MVC は、フレームワークにコントローラーがなかったため、元々はモデル、ビュー、コレクションを表していました。それ以来、状況は変わりました。

Backbone のコアは 4 つの主要なクラスで構成されます:

＃＃＃モデル＃＃＃ ＃＃＃集める＃＃＃ ＃＃＃ビュー＃＃＃ ＃＃＃コントローラ＃＃＃

• 時間が少し限られているので、今日はコアコースのみを見ていきます。すべてを 1 つの記事にまとめて読者がすべてを解析することを期待するのはやりすぎになるため、ここで説明する概念を実証するために、非常にシンプルなアプリを使用してフォローアップします。
• 今後数週間は常に警戒してください。
• ＃＃＃モデル＃＃＃
Model は、MVC 実装ごとに異なる意味を持つ場合があります。 Backbone では、モデルは単一のエンティティ、つまりデータベース内のレコードを表します。しかし、ここには厳格なルールはありません。バックボーン Web サイトから:

モデルは JavaScript アプリケーションの中核であり、対話型データとそれを取り巻くロジック (変換、検証、計算されたプロパティ、アクセス制御など) の多くが含まれています。

モデルは、データセット上の任意のプロパティを読み書きする方法を提供するだけです。これを念頭に置くと、次の 1 行のコードは完全に使用可能です。 リーリー

これを基に進めていきましょう。

---

リーリー

initialize

オブジェクトがインスタンス化されるときにトリガーされます。ここでは、いくつかの愚かな動作に注意を促しているだけです。おそらく、アプリケーションでデータをブートストラップするか、その他のハウスキーピングを行う必要があります。データが渡されない場合に備えて、一連のデフォルト値も定義しました。

プロパティの読み取りと書き込みの方法を見てみましょう。まず、新しいインスタンスを作成しましょう。

リーリー

get/set ミューテーターに気づいたら、クッキーを食べてください!モデルの属性は、一般的な object.attribute 形式では読み取ることができません。誤ってデータを変更する可能性は低いため、ゲッター/セッターを実装する必要があります。

現時点では、すべての変更はメモリ内にのみ保持されます。サーバーと通信して、これらの変更を永続的にしましょう。

リーリー ＃＃＃それでおしまい。もっと期待していますか？上記のコード行により、サーバーにリクエストが送信されます。リクエストのタイプはインテリジェントに変更されることに注意してください。これは新しいオブジェクトであるため、POST が使用されます。それ以外の場合は、PUT を使用します。

Backbone モデルはデフォルトでより多くの機能を提供しますが、これが間違いなく使い始めるはずです。詳細については、ドキュメントをクリックしてください。

＃＃＃集める＃＃＃ Backbone のコレクションは、本質的には単なるモデルのコレクションです。前のデータベースの例えと同様に、コレクションはクエリの結果であり、結果は多くのレコード [モデル] で構成されます。次のようにコレクションを定義できます:

リーリー

最初に注意すべきことは、これがどのモデルのコレクションであるかを定義していることです。前の例を拡張して、このコレクションをゲーム コレクションにしました。

これで、引き続きデータを必要に応じて使用できるようになります。たとえば、このコレクションを拡張して、特定のゲームのみを返すメソッドを追加してみましょう。

リーリー

簡単ですね。ゲームが 2009 年より前にリリースされたかどうかのみを確認し、リリースされている場合はゲームを返却します。

以下に示すように、コレクションの内容を直接操作することもできます:

リーリー

上記のコード スニペットは、新しいコレクションをインスタンス化し、ID 0 のモデルを取得します。次のように

at

---

メソッドのインデックスを参照することで、特定の位置にある要素を見つけることができます:

game.at(0);

最後に、次のようにコレクションを動的に設定できます:

リーリー

url

プロパティを介してデータの取得元を Backbone に指示するだけです。完了したら、新しいオブジェクトを作成して

fetch

メソッドを呼び出すだけです。これにより、サーバーへの非同期呼び出しがトリガーされ、コレクションに結果が設定されます。

これでバックボーン コレクションの基本がカバーされます。先ほども述べたように、ここには良いものがたくさんあり、Backbone は Underscore ライブラリから多くの気の利いたユーティリティをエイリアスしています。公式ドキュメントをざっと読めばすぐに始めることができます。

＃＃＃チェック＃＃＃ Backbone のビューは、一見すると少しわかりにくいかもしれません。 MVC 純粋主義者にとって、それらはビューそのものではなくコントローラーに似ています。 ビューは基本的に 2 つの責任を処理します:

DOM およびモデル/コレクションによってスローされたイベントをリッスンします。

アプリケーションのステータスとデータ モデルをユーザーに表示します。 非常に単純なビューの作成を続けましょう。

リーリー

これまでこのチュートリアルに従ってきたのであれば、それは非常に簡単です。ビューのラップに使用する HTML 要素を

tagName

---

属性で指定し、その ID を

className

で指定するだけです。

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

el 指的是视图引用的 DOM 元素。我们只是通过元素的 innerHTML 属性访问游戏的名称。简而言之，div 元素现在包含我们游戏的名称。显然，如果您以前使用过该库，则 jQuery 方式会更简单。

对于更复杂的布局，在 JavaScript 中处理 HTML 不仅乏味而且鲁莽。在这些情况下，模板是可行的方法。

Backbone 附带了由 Underscore.JS 提供的最小模板解决方案，但我们非常欢迎您使用任何可用的优秀模板解决方案。

最后我们看一下视图是如何监听事件的。首先是 DOM 事件。

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

如果您以前处理过事件，那么应该很简单。我们基本上是通过事件对象定义和连接事件。正如您在上面看到的，第一部分指的是事件，下一部分指定触发元素，最后一部分指应触发的函数。

现在绑定到模型和集合。我将在这里介绍模型的绑定。

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

首先要注意的是我们如何将绑定代码放置在初始化函数中。当然，最好从一开始就这样做。

bindAll 是 Underscore 提供的一个实用程序，用于保存函数的 this 值。这特别有用，因为我们传递了一堆函数，并且指定为回调的函数已删除该值。

现在，只要模型的 name 属性发生更改，就会调用 changeName 函数。您还可以使用添加和删除动词来轮询更改。

侦听集合中的更改就像将处理程序绑定到回调时将模型替换为集合一样简单。

---

控制器

Backbone 中的控制器本质上允许您使用 hashbang 创建可添加书签的有状态应用程序。

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

这对于传统服务器端 MVC 框架中的路由非常熟悉。例如，!/games 将映射到 games 函数，而浏览器本身中的 URL 将是 domain/#!/games。

通过智能使用 hashbang，您可以创建大量基于 JS 且可添加书签的应用程序。

如果您担心破坏后退按钮，Backbone 也能满足您的需求。

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();

通过上面的代码片段，Backbone 可以监控您的 hashbang，并结合您之前指定的路线，使您的应用程序可添加书签。

---

我从 Backbone 学到了什么

总的来说，以下是我从创建应用程序的 Backbone 方式中学到的一些经验教训：

• 前端确实需要 MVC。传统方法给我们留下的代码过于耦合、混乱且难以维护。
• 在 DOM 中存储数据和状态是一个坏主意。在创建需要使用相同数据更新应用的不同部分的应用后，这开始变得更有意义。
• 胖模型和瘦控制器是正确的选择。当业务逻辑由模型处理时，工作流程就会得到简化。
• 模板是绝对必要的。将 HTML 放入 JavaScript 中会给您带来不好的业力。

可以说 Backbone 引起了前端构建方式的范式转变，至少对我来说是这样。鉴于今天文章的范围非常广泛，我确信您有很多问题。点击下面的评论部分来插话。非常感谢您的阅读，并期待将来有更多的 Backbone 教程！

以上がBackbone.js の旅に乗り出しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。