[Thoughts on JavaScript surge 04] MVC and backbone. js (Beta)

Preface

I recently sorted out a lot of front-end questions and went to an interview today. I don't know if you are bored. I am a little tired, so today we continue to go back to our research questions some time ago, let's take a look at MVC.

What is MVC?

Back to this question, what is MVC?

MVC is a design pattern that divides applications:

① Data (model, Model)

② Display layer (view, view)

③ User interaction (controller, control)

The process of an event is as follows:

 
① Interaction between the user and the application ② the event processor of the controller is triggered ③ the controller requests data from the model and submits the data to view ④ the data is presented to the user as an example: ① The user submits a new chat information ② the Controller's event processor is triggered ③ the Controller creates a new chat model record ④ the Controller updates view ⑤ the user sees the new information in the chat window
 

The above process is very simple, but there are complicated cases, so we will clearly split each part, so that each part can be developed independently to facilitate testing and maintenance, which is good for decoupling.

Model

A model is used to store all data objects of an application. For example, a user model is used to store user lists, their attributes, and all model-related logic.

The model does not need to know the details of the view and controller. The model only needs to contain data and the logic directly related to the data.

Any event processingCode, View templates, and those logics irrelevant to the model should be isolated from the knife model.

Mixing Model and view code is against MVC rules..

When the Controller acquires data from the server, it packs the data into a model instance for a simple example. Otherwise, we will all be dizzy:

 
1 VaRUser = user. Find ('Ye xiaochai');2User. Destroy ();
 

It's easy enough. Don't worry about it first. We'll talk about it later.

View

The view layer is presented to users and users interact with them.

In JS, most of the views are composed of HTML + CSS + JavaScript templates. The templates do not have any other logic except simple conditional statements.

The view does not have to know what the model and controller are doing. The view should have less code to process logic.

Controller

A controller is the bond between a view and a model. A controller acquires events and inputs from a view (Event Source view), And update the view.

When the page is loaded, the Controller adds event listening to the view. When the user interacts with the application, the event trigger in the controller starts to work.

VaRController ={}; (Controller. Users=Function($ ){VaRNameclick =Function(){};//Add event listening on the page$ (Function() {$ ('# View'). Click (nameclick) ;})} (jquery );
 

This inexplicable code is our controller.

PS:Now, you may think it is normal to look dizzy. I have studied it for a few times and it is still a little dizzy. If you are infertile, I will cry.

Since we don't want to introduce MVC in detail here, we will not talk about it much. Next, we will discuss MVC in a series separately. Let's go to the backbone learning page.

What is backbone?

Backbone is used to build JavaScript applications.ProgramA class library is simple and lightweight, but it has complete functions, covers all basic functions, and has high flexibility.

This class library provides model, Controller, and view, which constitute the skeleton for building applications.

The backbone is only 4 K and only provides core concepts such as model, event, set, view, Controller, and persistence.

PS: backbone depends on underscore. js

Model

The model is the place where the application data is stored. we can think of the model as an abstraction of the original data of the application, and add some tool functions and events.

 
1 VaRUser =Backbone. model. Extend ({2Initialize:Function(){}3});
 

The first parameter of extend is an object, which becomes an attribute of the model instance. The second parameter is the hash of optional class attributes. You can call extend multiple times to generate a subclass of the model, they will inherit the attributes of all the classes and instances of the father.

1 VaRUser =Backbone. model. Extend ({2//Instance attributes3Instanceproperty: 'foo'4 },{5//Class attributes6Classproperty: 'bar'7});
 

When the model is instantiated, its initialize function can accept any instance parameter. The working principle behind this function is that the backbone model itself is a constructor, so you can use new to generate a new instance:

1 VaRUser =Backbone. model. Extend ({2Initialize:Function(Name ){3This. Set ({Name, name });4 }5 });6 VaRUser =NewUser ('Ye xiaohaid ');
 

PS: You don't understand it. I don't understand it anyway, so keep learning .....

Model and attribute

Use the Set () and get () functions to set and obtain attributes in the instance:

 
User. Set ({Name: 'Ye xiaohaid '});
 

You can use the validate function to verify an attribute:

1   VaR User = Backbone. model. Extend ({  2 Validate: Function  (ATTS ){  3           If (! ATTS. Email | ATTS. Email. Length <3 ){  4               Return 'Email error' ;  5   }  6  }  7   });  8   VaR User = New  User ();  9 User. BIND ('error ', Function  (Model, error ){  10   //  Error Handling  11   });  12   // In this way, an error is reported.  13 User. Set ({Email: 'ss '});

Conclusion

This is a bit obscure. We are here for the time being. I have studied it privately and wrote it again...