看源码学Backbone

看源码学Backbone

Backbone是一个javascript库,主要用于WEB应用开发,其代码本身有很好的结构化,容易理解,容易维护。
当前稳定版是Backbone1.4,源代码在github,主库网址:https://github.com/jashkenas/backbone/blob/master/backbone.js.

Backbone唯一依存件是underscore(一个十分强大的javascript工具库)。
源码结构如下:
Backbone.Events

  // A module that can be mixed in to *any object* in order to provide it with
  // a custom event channel. You may bind a callback to an event with `on` or
  // remove with `off`; `trigger`-ing an event fires all callbacks in
  // succession.
  //
  //     var object = {};
  //     _.extend(object, Backbone.Events);
  //     object.on('expand', function(){ alert('expanded'); });
  //     object.trigger('expand');
  //

Backbone.Events是一个可以混合到*任何对象*的模块,以便为其提供自定义事件通道。 您可以使用`on`将回调绑定到事件,或使用`off`将其删除; `触发'事件会连续触发所有回调。

Backbone.Model

 // Backbone **Models** are the basic data object in the framework --
  // frequently representing a row in a table in a database on your server.
  // A discrete chunk of data and a bunch of useful, related methods for
  // performing computations and transformations on that data.

  // Create a new model with the specified attributes. A client id (`cid`)
  // is automatically generated and assigned for you.

Backbone.Model是框架中的基本数据对象 - 通常用来描述数据对象的属性,模拟服务器上数据库中数据表的一行数据。包含 离散的数据块和一堆有用的相关方法,用于对该数据执行计算和转换。

Backbone.Collection

  // If models tend to represent a single row of data, a Backbone Collection is
  // more analogous to a table full of data ... or a small slice or page of that
  // table, or a collection of rows that belong together for a particular reason
  // -- all of the messages in this particular folder, all of the documents
  // belonging to this particular author, and so on. Collections maintain
  // indexes of their models, both in order, and for lookup by `id`.

  // Create a new **Collection**, perhaps to contain a specific type of `model`.
  // If a `comparator` is specified, the Collection will maintain
  // its models in sort order, as they're added and removed.



Backbone.View

 // Backbone Views are almost more convention than they are actual code. A View
  // is simply a JavaScript object that represents a logical chunk of UI in the
  // DOM. This might be a single item, an entire list, a sidebar or panel, or
  // even the surrounding frame which wraps your whole app. Defining a chunk of
  // UI as a **View** allows you to define your DOM events declaratively, without
  // having to worry about render order ... and makes it easy for the view to
  // react to specific changes in the state of your models.

  // Creating a Backbone.View creates its initial element outside of the DOM,
  // if an existing element is not provided...


Backbone.sync

 // Override this function to change the manner in which Backbone persists
  // models to the server. You will be passed the type of request, and the
  // model in question. By default, makes a RESTful Ajax request
  // to the model's `url()`. Some possible customizations could be:
  //
  // * Use `setTimeout` to batch rapid-fire updates into a single request.
  // * Send up the models as XML instead of JSON.
  // * Persist models via WebSockets instead of Ajax.
  //
  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
  // as `POST`, with a `_method` parameter containing the true HTTP method,
  // as well as all requests with the body as `application/x-www-form-urlencoded`
  // instead of `application/json` with the model in a param named `model`.
  // Useful when interfacing with server-side languages like **PHP** that make
  // it difficult to read the body of `PUT` requests.



Backbone.Router

// Routers map faux-URLs to actions, and fire events when routes are
  // matched. Creating a new one sets its `routes` hash, if not set statically.

路由器将虚拟URL映射到操作,并在匹配路由时触发事件。 如果没有静态设置,创建一个新的`routes`哈希。


Backbone.History

// Handles cross-browser history management, based on either
  // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
  // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
  // and URL fragments. If the browser supports neither (old IE, natch),
  // falls back to polling.

处理跨浏览器历史记录管理,基于[pushState](http://diveintohtml5.info/history.html)和真实URL,或[onhashchange](https://developer.mozilla.org/en-/docs/ DOM / window.onhashchange)和URL片段。 如果浏览器既不支持(旧的IE,natch),则回退到轮询。


设置