Using the Vue refactoring Project (i) about MVC MVP MVVM related introduction

First of all, why did we refactor this project?

1: Our existing technology is not separated from the front and back, the page uses ESAYUI+JQ composition of a single page, each so-called single page is from the background of the unique ID and the front end bound, even if you find the page element, you can not find the file, because this ID is randomly generated, The ID binding of the page is obtained by the ID passed back from the background.

2: The front-end project is fused together, the UI framework and JQ are used, and for front-end developers, starting and debugging the simplest project is a tedious task.

3:jsp and the background of the structure of mixed, file separation is too complex, the coupling is very high, for a displayed page, we are difficult to locate its location, even if a path, need to get from the background.

4: Inefficient development, the old technology, although testing the basic skills of the programmer, but the code is cumbersome but verbose, you can see that in the development of the rapid development of all the code is pasted copy. For the current development left a lot of technical debt.

How to reconstruct this new project?

From the above introduction can be understood that the emergence of the framework is inevitable, can provide developers with a rapid construction of accurate and elegant Web application technology is bound to be the pursuit of all, slowly the front-end formed now three framework angular vue react separation of the situation.

First of all we don't analyze these three frameworks, and we look at some of the basics of the front-end architecture.

Front-end MVC design pattern

First, the design pattern is the Java architecture from the backend, which is represented by a graph.

The advantage of this design is that each layer is focused on doing one thing, the layers are loosely coupled with each other, the test is convenient for each layer, and the maintainability of the code becomes very good, and the code modularity of the front-end is obvious.

1> MVC:

Let's take a look at the definition of MVC in the MVC-based JavaScript Web rich application development

MVC is a design pattern that divides the application into 3 parts: data (model AJAX), Presentation layer (view HTML), and user interaction (Controller js/event is called a trigger).

In other words, the occurrence of an event is such a process:

1. The user interacts with the app.

2. The Controller's event handler is triggered.

3. The controller requests the data from the model and gives it to the view.

4. The view renders the data to the user. We can implement this MVC schema pattern without a class library or framework. The key is to divide each part of MVC into responsibilities, dividing the code cleanly into parts, and maintaining good decoupling. This allows for independent development, testing, and maintenance of each part.

About the framework of MVC, such as Embejs Angularjs Backbonejs Knockoutjs and so on--

through, we can clearly understand the characteristics of JavaScript MVC framework, complexity and learning curve differences, from left to right we understand that each JavaScript MVC framework supports data binding, Features such as templates (templating) and persistence, from bottom to top, the complexity of the MVC framework increases. of course, "we can implement this MVC schema pattern without a class library or framework." "So we need to do a detailed anatomy of every part of MVC--1> Model--

The model is used to hold all data objects for the application. For example, there may be a user model that holds a list of users, their attributes, and all the logic associated with the model.
The model does not have to know the logic of the view and controller. Any event-handling code, view templates, and model-independent logic should be isolated from the model.
Mixing the code of the model with the code of the view is contrary to the MVC architecture principle. The model is the part that should be decoupled from your application.
When the controller fetches data from the server or creates a new record, it wraps the data into a model instance. In other words, our data is object-oriented, and any function or logic defined on that data model can be called directly.

2> View--

The view layer is presented to the user and the user interacts with it. In JavaScript applications, views are mostly made up of HTML, CSS, and JavaScript templates. In addition to the simple conditional statements in the template, the view should not contain any other logic. Mixing logic into a view is a taboo for programming, not that MVC does not allow visual rendering-related logic to be included as long as it is not defined within the view. We classify visual rendering logic as "View Helper" (helper): Separate gadget functions related to views.

Consider the following example, which contains logic in the view, which is an example that should not normally be done:

        <div>            <script>                function  formatdate (data) {                    /*... . */                 }            </script>            ${formatdate (new  Date ())}        </div>

But in our present system, it is common to confuse logic in the view, the entire page looks like a hodgepodge of labels, chaotic, difficult to find some logic code, which is a violation of the original idea of MVC.

Take a look at the following piece of code, split the visual presentation logic into the view helper, and let the application structure satisfy MVC.

        /**/                    var helper = {            }; function (date) {                /*  */            }        /** *        <div>            ${helper.formatedate (new  Date ())}        </div>

In addition, the notation implements a functional function object that includes all visual rendering logic in the helper variable, a namespace that prevents conflicts and keeps the code clear and extensible.

3> Controller--

A controller is a link between a model and a view. The controller obtains events and inputs from the view, processes them (which are likely to contain the model), and updates the view accordingly. When the page loads, the controller adds event listeners to the view, such as listening for form submissions or button clicks. Then, when the user interacts with your app, the event trigger in the controller begins to work.

We use the simple jquery code to implement the controller--

        var controll={};         function ($) {                        varfunction  () {                /*... */             }                                    $ (function() {                $ (' #view. Name '). Click (NameClick)            }) ;        }) (jQuery)

Now that we know the work of each part of M (Model), V (View), C (Controller), we can easily implement our own MVC application, and of course, we don't have to rely on the popular MVC framework at all.

Let's look at a picture below:

MVC's view works directly with the model, and the controller only acts as a "bridge", which is responsible for forwarding the view request to the model and then notifying the view of the end of the model processing message. A controller is a message dispatcher. Without passing data (business results), the controller is used to decouple the view and model, specifically to separate the UI from the logic (the interface is separated from the code).

A pair of c-v is tied up to represent a UI component, C directly accepts user input and converts the input to the corresponding command to invoke M's interface, modifies the state of M, and finally re-renders v through the observer pattern.

2> MVP

Let's take a look at a chart that shows the relationship of MVP.

1. mode--data-tier business logic and entity classes
2. view--View Layer page display
3. p--Presenter logic Layer includes data and view layer interaction

Presenter directly calls the model interface method, when the model data changes, notify presenter to make corresponding view changes. This allows the view to no longer interact with the model.

Comparison and analysis of three frames of angular1 vue react

First landlord I do not understand angular2+ so take three frames to carry out a number of analysis.

First of all to see react bar, a I am not familiar with the framework, but also belongs to the current study is sold.

1, react

Waiting for ing ...

Using the Vue refactoring Project (i) about MVC MVP MVVM related introduction