LoginSignup
0
0

More than 5 years have passed since last update.

Backbone.jsソースコードリーディング

Last updated at Posted at 2017-12-13

Backbone.Events

構成

  • Public API
    • クライアントとのI/F
  • _events
    • コールバック、イベント、コンテキストを管理するプライベートなプロパティ
    • Backboneのイベント系メソッドは、ようするに本プロパティへの操作を抽象化したもの
  • eventsApi()
    • 'event1 event2'のようにイベント名が複数指定されることを考慮したイベント名パーサー兼イテレーター
    • 本メソッドにより、イベントの実処理からパーサーやイテレータを分離でき、実処理が簡潔になる
  • onApi() offApi() triggerApi()
    • _eventsを使用して、イベントの登録・解除・発火の実処理を担う
    • 引数として_eventsを受け取って、加工後のオブジェクトを返すのでテストが容易そう
// @onApi()
// `_events`が`events`に引数として渡ってくる
var handlers = events[name] || (events[name] = []);
...
// イベント名をキーとしてコールバック等を保持する
handlers.push({callback: callback, context: context, ctx: context || ctx, listening: listening});



// @eventsApi()
// 複数指定されたイベント名を分割して個別に`iteratee`(イベントの実処理)を実行する
for (names = name.split(eventSplitter); i < names.length; i++) {
  events = iteratee(events, names[i], callback, opts);
}

Backbone.Model

Backbone.Collection

Backbone.Router

URLとハンドラを関連づける。

  • Backbone.Historyのラッパー
    • イベントの検出やコールバック関数の実行はBackbone.Historyが担う
  • URL更新はブラウザのhashchangeイベントを検出する

Backbone.History

Backbone.Sync

Backbone.View

Backbone.noConflict()

// Backbone.js読み込み前に定義されている`Backbone`を保持する
var previousBackbone = root.Backbone;

Backbone.noConflict = function() {
  root.Backbone = previousBackbone;
  // `this === Backbone`であるので、呼び出し元では戻り値をBackboneオブジェクトとしてリヨ用可能となる。
  return this;
};
  • 事前定義しているBackbonepreviousBackboneに保持する
  • Backbone.noConflict()にて、事前定義のBackboneを差し戻し、戻り値にBackbone.jsが定義するBackboneを返す
    • 事前定義のBackboneはそのまま参照でき、Backbone.jsが定義するBackboneBackbone.noConflict()の戻り値から参照可能となる

Backbone.$

Backbone.$ = $;
  • Backboneのプロパティとして$を保持する
  • プロパティを公開扱いとして、Backboneが利用するjQueryオブジェクトを外部から変更可能とする
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0