Ext: Backbone Source Analysis-backbone Architecture + flowchart

nuysoft/clouds/[email protected]

Original link: http://www.cnblogs.com/nuysoft/archive/2012/03/18/2404274.html

JSMVC Responsibility Division

M model

• Business models: business logic, processes, states, rules
• (CORE) data model: Business data, data validation, incremental deletion (AJAX)

V View

• (CORE) Views: defining, Managing, configuring
• Templates: Defining, configuring, managing
• Components: Defining, configuring, managing
• (core) User event configuration, management
• User input verification, configuration, management

C Controller/Distributor

• (core) event distribution, model distribution, view distribution
• Do not do data processing, business processing, that is, business-independent
• Extension: Permission control, exception handling, etc.
• C is the core of the JSMVC framework for centralized configuration and management, and can have multiple controllers

Tool Library

• Mainly asynchronous requests, Dom operations, can rely on jquery and other

Discussion on realization of JSMVC

The model of MVC, views view, controller control three are independent and interrelated, c as the bridge. MVC as a long-standing development model, has a classic implementation of controllable reference, in the browser and JS this particular application scenario, we do the following discussion:

The m model is self-contained , can be nested , does not actively refer to views and controllers, can be simple JSON objects/arrays, or can be nested with the combined pattern composite ;

The V view is nested and can be implemented with a combination of composite, a view that refers to a model (m-v), a view that references multiple views, a view that receives notification of the model and is automatically updated, and can be used The Observer pattern observer implementation; The view needs to respond to user interaction, using the browser event model ;

The C controller , as the core of the MVC framework, takes a centrally configured strategy (v-c), can have multiple controllers (C+c), and uses the policy mode strategy The browser event model is required for the hash event driver.

I can see that there is no association between the M model and the C controller, which I think is not necessary, but in some frameworks it implements the association of M-model and C-Controller events (such as the Magix used by the company), which is also a practice that can be consulted.

The above discussion analyzes MVC's positioning in JS, but the key to understanding how JSMVC works is to understand event-driven.

Event-driven

There are three types of event-driven Jsmvc in the browser:

1. Hash drive , through the Popstate/hashchange event-driven controller (in front of the introduction, followed by the backbone router and history of the detailed explanation of its principles, implementation, skills)

2. DOM event , which is used to drive the view (which we are already familiar with)

3. Model Events (business model events and data model events) to drive models and models to be combined (this follow-up model of backbone)

Write about it today, and the next section describes the architecture of backbone, what you can do, what you can't do, and what you can extend.

Resources

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

Website Introduction

Backbone gives the Web application hierarchy by providing model models, collection collection, and view Veiew. The hierarchy is implemented in the following ways:
? Model binding key value data and custom events;
? Set Colection is an ordered or unordered collection of models, with rich enumerable APIs;
? Views view declares event listener function;
? Connect the model, collection, view, and the restful JSON interface on the server side.

Self-invoking anonymous functions

The entire backbone source code is wrapped with a self-invoking anonymous function that can reference variables (such as Previousbackbone, slice, splice, and so on) through the closure feature, while avoiding contaminating the global namespace.
The overall structure is as follows, still very clear:

   1:  (function () {

   2:      backbone.events        //Custom event

   3:      Backbone.model        //model Constructors and prototype extensions

   4:      backbone.collection    //Set constructors and prototype extensions

   5:      backbone.router        //Routing Configurator Constructors and prototype extensions

   6:      backbone.history        //router constructors and prototype extensions

   7:      Backbone.view            //View constructors and prototype extensions

   8:      backbone.sync            //Asynchronous Request Tool method

   9:      //self-expanding function

  Ten:      //self-expanding method

  One:  }). Call (this);

Dependent libraries

Backbone must rely on UNDERSCORE.JS,DOM operations and AJAX requests to rely on one of the third-party jquery/zepto/ender, or other third-party libraries can be set through Backbone.setdomlibrary (Lib).

Custom Event Module Backbone.events

Can be fitted with any object (assigning a method to another object or prototype), the fitted object can customize events, and provides three ways to bind, remove, and trigger custom events.

Model Backbone.model

Is the core of a JavaScript application that includes business data and read-write and persistence of business data, and the main methods of the model include read-write and persistence.

Set Backbone.collection

A collection is an ordered collection of models that can bind a "change" event to a collection and receive notification when any model in the collection changes, and the collection can listen for "add" and "Remove" events, fetch data from the server, and use the full set of methods provided by Underscore.js.
For convenience, any events that are triggered on the model in the collection will be triggered directly on the collection. This allows you to listen for changes in the specified properties of the model in the collection. Example: Documents.on ("change:selected", ...)
The primary methods for collections include read-write, maintenance, and persistence.

Routing Configurator Backbone.router

Web applications often need to provide links, favorites, and shareable URLs for important pages. Until recently, the anchor fragment (hash #page) could be used to provide such a fixed link, and with the advent of the history API, the anchor text could now be used to process standard URLs (/page).

Backbone.router provides a number of methods for client page routing and can connect to the specified actions (actions) and events. For older browsers that do not support the history API, routers provide graceful callback functions and can transparently convert URL fragments.

During page load, when an application has created all the routing tables, it needs to call Backbone.history.start (), or Backbone.history.start ({pushstate:true}) to ensure that the initial URL is routed.

Router Backbone.history

As a global router, it handles Hashchange or pushstate events, matches the appropriate routing table, and triggers a callback function.
If you use a router with a routing table, you automatically create a History object, and instead of creating a History object, you use Backbone.history.
Backbone will automatically determine the browser's support for Pushstate to make an internal choice. Browsers that do not support pushstate will continue to use anchor-based URL fragments.

About the official website doubts:
If a browser that is compatible with pushstate accesses a URL anchor, it will be transparently converted to a real URL. Note that using a real-world URLs requires the Web server to support rendering those pages directly, so the backend program needs to be modified as well.
When the browser initiates an HTTP request, it does not place the anchor part in the request header, and the HTTP rfc2612 does not find any relevant instructions to keep the query.
Http://www.w3.org/Protocols/rfc2616/rfc2616.html

View Backbone.view

The use of views is quite convenient, no need to judge any HTML, CSS, can be any JavaScript template engine integration.

As a general practice, the interface is organized into model-based verses, and the view is updated immediately when the model changes, without redrawing the entire page.

No longer need to tangle with JSON objects, find DOM elements, manually update HTML, simply bind the view render method to the model's change event, and the model data will immediately appear on the UI.

Extension method Extend

Models, collections, views, and routers all have a extend method for extending prototype properties and static properties, creating custom Views, collections, views, router classes.

Ext: Backbone Source Analysis-backbone Architecture + flowchart