Mode 2: Framework Mode

Abstract:

After talking about the Javascript design model, This article focuses on the front-end development framework model. before talking about the model, we will first introduce the differences between the next Library and the framework, both of which are the product of product development, therefore, many people do not have a very detailed distinction.

Libraries encapsulate code in files, allow inheritance and modification of these files. A library formed by Object-Oriented code organization is also called a class library. A library formed by process-oriented code organization is also called a function library. The functions that can be directly used in the function library are called library functions. When using a library, developers only need to use some classes or functions of the library, and then continue to implement their own functions. For example, a car, a wheel, or an engine is a database, and we need to inherit it to assemble a car.

A framework is a product developed to solve a (Class A) problem. Framework users generally only need to use classes or functions provided by the framework to implement all functions. It can be said that the framework is an upgraded version of the database. When using the framework, developers must use all the code of the framework. A framework is a reusable component that defines the application architecture and clarifies the dependency, responsibility allocation, and control processes between the entire design and collaboration components, it is represented as a group of abstract classes and methods for collaboration between their instances. For example, if we transform the car we bought, the car we bought is a frame, and we change the engine with a large displacement.

Many JavaScript frameworks are used in front-end development, such as canjs, zepto, and angularjs. JS development libraries, such as jquery, extjs, and dojo. The framework modes include MVC, MTV, MVP, CBD, Orm, mvvm, etc. Let's take a look at the front-end framework models:

I. MVC mode:

MVC is a pattern used to design and create a web application using MVC (Model View Controller Model-View-Controller:

• Model indicates the application CORE (such as the database record list)
• View (view) display data (database records)
• Controller processes input (written to database records)

The purpose of using MVC is to separate the implementation code of M and V, so that the same program can use different expressions. MVC layering helps you manage complex applications, because you can focus on one aspect within a period of time. For example, you can focus on view design without relying on business logic. It also makes application testing easier. The typical front-end MVC framework is angular. js.

Templates)

A template is a file written in HTML and CSS to display the view of an application. You can add new elements and attribute tags to HTML as instructions of angularjs compiler. Angularjs compiler is fully scalable, which means that you can build your own HTML Tag in HTML through angularjs!

Application logic and Behavior)

Angularjs is different from standard Ajax applications. You do not need to write listeners or DOM controllers because they are already built into angularjs. These features make your application logic easy to write, test, maintain, and understand.

Model Data)

The model is extended from the attributes of angularjs scope objects. The data in the model may be JavaScript objects, arrays, or basic types. This is not important. Importantly, they all belong to angularjs scope objects.

Angularjs maintains bidirectional synchronization between the data model and the UI of the View Interface through the scope. Once the model status changes, angularjs will immediately refresh and reflect it in the view interface, and vice versa.

 

Ii. mvvm mode:

Mvvm is short for Model-View-viewmodel. The origin of the mvvm (Model-View-viewmodel) Framework is a new architecture framework that evolved from the combination of the Model-View-presenter model and WPF. The mvvm mode uses the data binding infrastructure, which can easily build the necessary elements of the UI. The view is bound to the viewmodel, and some commands are executed to request an action from it. In turn, viewmodel communicates with the model and tells it to update to respond to the UI. This makes it easy to build the UI for the application. The easier it is to paste an interface to an application, the easier it is for the designer to use blend to create a beautiful interface. At the same time, when the UI and functions become increasingly loosely coupled, the functional testability is getting stronger and stronger.

The mvvm mode is the same as the MVC mode. It mainly aims to separate views and models. It has the following advantages:

• Low CouplingViews can be changed and modified independently of models. A viewmodel can be bound to different "views". When a view changes, the model can remain unchanged, when the model changes, the view can also remain unchanged.
• ReusabilityYou can put some view logic in a viewmodel so that many views can reuse this view logic.
• Independent DevelopmentDevelopers can focus on business logic and data development (viewmodel), and designers can focus on page design.
• TestableThe interface has always been difficult to test, but now the test can be written for viewmodel.

In the front-end framework, the typical mvvm mode is Kendo-UI. In development, you only need to define a controller: kendo. observable () to bind data to the view model.

Summary:

This article only briefly introduces two framework modes. Learning the framework mode can improve our problem-solving ideas and write better code.

 

Mode 2: Framework Mode