Backbone.js Series II: Backbone.js Basic requirements for in-depth analysis

There are very few descriptions of backbone on the web, the existing content about backbone is very different, and basically all of them mentioned how to use backbone to realize the creation of the application, of course, there are a lot of discussions about whether it matches model/view/ Whatever. There are a lot of flashy video tutorials that talk about programming, but there's really not much value in it. I think the key is the lack of a detailed description of the backbone itself, and the details of the true intent of each line of code. There is a document devoted to the functions of each part of the backbone, to some extent to answer the above questions, and provide the source code with comments, there are more relevant Backbone.js content introduction. Although these are far from enough, but at the very least, can change the angle to bring you understand the components and functions of backbone.

In this series of backbone.js deconstruction tutorials, we will verify the functionality of the backbone library from the code level.

Specifically, in the first part of this tutorial we will explore the basics of learning backbone, and introduce some of the key details required for a single page application (SPAs) to better master the composition and use of backbone. After having a certain foundation for spas, we delve the system into the details of the backbone Code section, including backbone.events, creating backbone objects, Backbone.router (), Backbone.history () and backbone utilities. In the second half of the Backbone.js deconstruction series, we will explore Backbone.model, Backbone.view, and Backbone.collection respectively.

Without mentioning the in-depth knowledge of MVC, MVVM, MVP, and Mv-whatever patterns in this series of tutorials, I deliberately avoided any in-depth discussion of these patterns, because I think backbone is a simple library, and if you have the code capabilities, Then the implementation part of the more natural, to establish a match your own domain name backbone should not be difficult.

This series does not teach you how to create an application, but rather the most common way to explain backbone knowledge to novices and to tell the basics of backbone.js. In addition, the purpose of this article is not simply to outline the model (Models) and views.

In this article, we will analyze the main components of backbone, the use of code to test the specific functions of each component, the following start it!

Backbone Basic Requirements

Need to have JavaScript and Dom intermediate knowledge

Backbone abstracts a large number of repetitive tasks that can be accomplished by native Dom and HTML5 JavaScript APIs. Because of this, if you have not used DOM and JavaScript, then learning backbone will be difficult, the process is long and frustrating. Considering that the backbone itself needs to seek third-party solutions (i.e., jquery, Ender, Zepto) When implementing DOM processing, if you are not sure of native dom scripts and modern JavaScript APIs (such as XHR), you are likely to have errors in the process. If you are not at least an intermediate JavaScript developer, it can be very difficult to learn backbone knowledge and understand this article easily.

Mastering HTTP, XHR, and restful JSON APIs

Backbone needs to work with some tools to complete the Save/synchronize data to the back end. Assuming a JSON API, if you're unfamiliar with HTTP, XHR, and you don't know how to read and write data from the server using the rest-based JSON API, you can't understand what backbone can do and how backbone can help you save steps.

Familiarity with functional programming libraries

Once backbone is created, there is an accompanying utility library called Underscore.js, which is useful for providing backbone functional programming utilities. The Underscore.js Library is a stand-alone tool that can be used outside of backbone, but backbone relies heavily on it. Using a utility library such as Underscore.js or lo-dash.js helps you learn backbone code better, and it also helps you understand the functional approach of backbone inheritance and available model and collection objects. If you're not taking the time to figure out how to program based on Underscore.js or lo-dash.js, then I suggest you take a little effort to learn this kind of library.

Tip :

• Functional Programming Utility Library Lo-dash.js is an alternative to underscore.js.
• At the very least, before you start learning backbone, you should have some understanding of what utility method extend () is, the most useful tool in backbone source code. If you prefer lo-dash.js, then please be aware of it. The extend () in the Lo-dash.js library is called assign () andextend ( ) is a nickname for assign () .

Learn about models and views

Backbone is committed to easing the " complex stack of jquery selectors and callback functions, frantically trying to keep data synchronized between HTML UIs " and really doing that. Of course, creating a lot of events, models, collections, and views is just as easy. In backbone, you can try it until you find the right way. However, overall understanding of model and view is helpful for developers to learn and use backbone. Unfortunately, even a loose concept is not easy to apply to architectural patterns or joint design patterns. I suggest that it is best to rough understand model and view, at least not in a particular architectural pattern, limiting the understanding of model and view. If you do not have any basic knowledge, the definitions of these two terms in backbone are briefly described below. If you already know something, skip this part and I won't repeat it.

Model: A model usually contains the state of the application (like the data or backbone attribute in JSON), which plays a series of basic functions of managing and receiving state/data occurrences changes (like . Set () /. Get () such as methods or change events). In addition, model in the browser can coordinate these state/data to compose the memory, and continue to send them to the server (this function is synchronous). The models of a set of ordered combinations is called the set collection. In backbone, collections contains multiple models with specific functionality. A typical example of a model is the data for a to-do event (that is, the to-do and its completion state). A series of to-do lists can be viewed as a set of to-do models. If the collection (that is, the to-do set) is likened to a form, the header file of the form is model (title, status), and the contents of the form line are the data (that is, get a dog,done).

View: A views typically render a logical relationship between the model and the State\data interactive UI in the collection. Views allow State/data to be detached from the DOM, so that multiple views can use the same model and collection. Therefore, if you change a model or a model in a set, a variety of views can monitor the changes and automatically update them. So, "TheTruth", or State/data not bound to view, but out of view, specifically, is out of the dom/html