看源码学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),则回退到轮询。