[Original] backbone source code analysis-backbone architecture + Flowchart

Author: nuysoft/cloud/nuysoft@gmail.com

Disclaimer: This article is an original article. If you need to reprint it, please indicate the source and retain the original article link.

Backbone0.9.1 Source Code Analysis Series

Jquery1.6.1 Source Code Analysis Series

 

 

 

References

Http://documentcloud.github.com/backbone/
Http://www.csser.com/tools/backbone/backbone.js.html

 

Official Website Introduction

Backbone provides a layered structure for Web applications by providing model models, collection, and view veiew. Use the following method to implement a layered structure:
Model model binding key value data and custom events;
A set of colection is an ordered or unordered set of models with a wide array of enumerative APIs;
View declares the event listening function;
Connect models, sets, and views to the restful JSON interface of the server.

 

Self-called anonymous Functions

The source code of the entire backbone is wrapped with a self-called anonymous function. variables (such as previousbackbone, slice, and splice) can be referenced through the closure feature, and global namespaces can be avoided.
The overall structure is as follows, which is clear:

   1:  (function() {

2: backbone. Events // custom event

3: backbone. Model // model constructor and prototype Extension

4: backbone. Collection // set constructor and prototype Extension

5: backbone. Router // router configurator constructor and prototype Extension

6: backbone. History // router constructor and prototype Extension

7: backbone. View // view constructor and prototype Extension

8: backbone. Sync // asynchronous request tool Method

9: var extend = function (protoprops, classprops) {...} // self-Extended Function

10: backbone. model. Extend = backbone. collection. Extend = backbone. Router. Extend = backbone. View. Extend = extend; // self-Scaling Method

  11:  }).call(this);

 

Dependent Library

Backbone must depend on underscore. js. Dom operations and Ajax requests depend on one of the third-party jquery/zepto/ender. You can also set other third-party libraries through backbone. setdomlibrary (LIB.

 

Custom Event module backbone. Events

It can be combined with any object (the method can be assigned to another object or prototype), the object after the combination can customize events, and three methods are provided to bind, remove, and trigger custom events.

 

 

Model backbone. Model

It is the core of JavaScript applications, including business data and read/write and persistence of business data. The main methods of the model include read/write and persistence.

 

 

Collection backbone. Collection

A set is an ordered set of models. You can bind a "change" event to the set to receive notifications when any model in the Set changes, the collection can also listen to "add" and "Remove" events, get data from the server, and use underscore. A full set of methods provided by Js.
For convenience, any event triggered on the model in the set will be directly triggered on the set. In this way, you can monitor the changes to the specified attributes of the model in the set. Example: documents. On ("Change: Selected ",...)
The main methods of the set include read/write, maintenance, and persistence.

 

 

Route configurator backbone. Router

Web applications usually need URLs that can be linked, added to favorites, and shared for important pages. Until recently, the anchor segment (hash # page) can be used to provide such a fixed link. With the arrival of the History API, anchor can now be used to process standard URLs (/page ).

Backbone. Router provides many methods for client page routing and connects to specified actions and events ). For old browsers that do not support the history API, the router provides an elegant callback function and can transparently convert URL fragments.

During page loading, when the application has created all route tables, you need to call backbone. history. start (), or backbone. history. start ({pushstate: true}) ensures the initial URL of the route.

 

Vrobackbackbone. History

As a global router, it is used to process hashchange or pushstate events, match the appropriate route table, and trigger the callback function.
If you use a vrohistwith a route table, a history object is automatically created. Instead of creating another history object, backbone. History is used.
Backbone automatically determines the support of the browser for pushstate for internal selection. Browsers that do not support pushstate will continue to use spot-based URL fragments.

 

Questions about the official website:
If the pushstate-compatible browser accesses a URL anchor, it is transparently converted to a real URL. Note that the use of real URLs requires the Web server to support direct rendering of those pages, so the backend program also needs to be modified.
When the browser initiates an HTTP request, it does not place the anchor part in the request header. No instructions are found for viewing HTTP rfc2612.
Http://www.w3.org/Protocols/rfc2616/rfc2616.html

 

 

View backbone. View

 

The use of views is quite convenient. You do not need to judge any HTML or CSS. You can integrate any JavaScript template engine.

A common practice is to organize the interface into a model-based verse. When the model changes, the view chart is updated immediately without the need to redraw the entire page.

You no longer need to worry about JSON objects, search for DOM elements, and manually update html. You only need to bind the view render method to the change event of the model, and the model data is immediately displayed on the UI.

 

 

Extended method extend

Models, sets, views, and routers all use an extend method to expand prototype attributes and static attributes and create custom views, sets, views, and vro classes.