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 に代わるものになるのでしょうか?

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

＃＃＃はいといいえ。

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

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

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

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

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

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

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

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

リーリー

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

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

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

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

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

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

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

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

game.at(0);

リーリー

url

fetch

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

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

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

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 サイトの他の関連記事を参照してください。