Shulou(Shulou.com)06/02 Report--

How to understand the MCRV pattern in front-end development? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

In view of the problems faced by the complex page development based on ajax in front-end development, such as large code scale, difficult to organize and maintain, poor code reusability, expansibility and adaptability, this paper attempts to take the idea of MVC as the basis, combined with the development standard of "content-structure-performance-behavior" separation in Web front-end development, this paper proposes a method to divide the Web page code into views (View, page static parts). Including content, structure, performance), model (Model, responsible for data caching, data verification and local logic processing, initiating ajax requests), controller (Controller, responsible for user and system event response, model and renderer scheduling), renderer (Renderer, rendering of views, controller and event binding, data collection) new page development mode, and based on this pattern, a development framework prototype is proposed.

Keyword

MCRV design pattern, Javascript,MVC,Web development standard

1. Problems faced by Web front-end development

In the early Web page development (Web front-end development), Web pages were relatively simple, and the functions of most Web pages were limited to displaying static information with HTML and simple styles, or sending data to the server, and Web pages had less interaction with users. With the development of Web and the emergence of DHTML, CSS, javascript and other technologies, Web pages are no longer limited to displaying static information, dynamic and interactive have become one of the mainstream functions of Web pages. At the same time, the code scale of the Web page becomes larger, and the HTML, CSS, Javascript and other codes in the page are often mixed together. How to organize these codes well so that the Web client program has a good structure and is easy to read and maintain has become a difficult problem for Web front-end developers. In practice, the industry has put forward a Web page development standard with the separation of "content (Content)-structure (Structure)-expression (Presentation)-behavior (Behavior)". In this standard, a Web page code can be divided into the following four parts:

Content: the real information that the page actually wants to convey, including data, documents, pictures, etc. Structure: the division of content to make it more logical and easy to use; similar to page titles, authors, chapters, sections, paragraphs and lists. Presentation: used to describe the appearance of the content, called "presentation", mainly refers to the CSS style. Behavior: behavior is the interaction and operation effect of content; behavior control is mainly realized through javascript.

The content-structure-performance-behavior (CSPB) development standard classifies the code contained in the Web page, so that each part of the code is well separated, so that the Web page has a good structure.

Subsequently, Web entered a new Web2.0 era, and a large number of Web2.0 applications represented by Gmail appeared, and achieved great success. The typical feature of this kind of Web page is to use a non-refresh page based on ajax technology to complete a large number of complex functions. Such pages include Web IM, Web Map, Gmail and other applications, collectively referred to as one-page Web applications. At the same time, in enterprise Web development, it is more and more common for a Web page to perform multiple complex functions at the same time. In these complex Web page applications, Javascript code is the core of such rich client applications, responsible for complex interaction with users and page rendering. One-page Web page Javascript code is often very large, complex logic, moving more than a thousand lines, and sometimes even requires a team to complete the development of a page. How to organize a large amount of Javascript code reasonably, make it have good expansibility, adapt to the change of requirements, and make the code easy to maintain is a major challenge that the majority of Web front-end developers face.

Throughout the history of Web application development, there are some similarities between Web back-end development (PHP, J2EE, ASP.NET) and Web client development, and they have faced similar problems. At first, the function of the Web program is simple, and when the code is less, all the control, logic, and UI display codes are mixed together; with the development of Web, the program scale becomes larger, and the program developed in the original way obviously does not have a good structure, which is not conducive to large-scale development and later maintenance, and is not conducive to the further subdivision of the work and roles of Web developers, code reusability is poor, bottlenecks begin to appear. The solution of Web back-end programmers is to classify the code and separate the control code from the presentation code, so the Web back-end development develops from the so-called Model1 to Model2;. At the same time, the MVC (Model-View-Controller) design pattern in traditional desktop programming is introduced, and the part responsible for program data and logical calculation is further separated, forming the MVC development pattern in Web back-end development. MVC design pattern runs through the idea of divide and conquer in software engineering, and effectively solves the problem of code organization and reuse in Web back-end programming. Adopting the same design pattern (MVC) also makes the code easier to be understood by others and ensures the reliability of the code; it enables Web development work to be subdivided into business logic development and UI presentation development. Therefore, MVC is also good for team development. So, can MVC design ideas also be applied to front-end development to solve related problems? Since the problem has many similarities, the author tries to solve the problem of code organization in front-end development along the same way of thinking.

2. MVC design pattern

Before putting forward the MCRV design pattern proposed in this paper, it is necessary to explain the MVC design pattern on which it is based.

The concept of MVC was mentioned a long time ago [1], it represents a kind of design idea. MVC is the abbreviation of Model-View-Conroller, that is, Model-View-Controller. This development model divides an application into three parts: the model (model) implements business logic and provides data; the view (view) is responsible for presenting the interface to the user and accepting user interaction; and the controller (controller) is responsible for responding to user interaction requests, translating user requests, invoking models according to different requests, and executing business logic. The controller is essentially a dispatcher that executes specific business logic through the various methods it contains (action). The components of MVC work together with minimum coupling, so that the program has good expansibility, maintainability and reusability.

The MVC design pattern was originally used for desktop programming, typically for design scenarios where the same data requires different user interfaces. In the classical MVC design idea, the controller is responsible for responding to user events, calling the model or changing the view according to the event type and parameters. Each model corresponds to one or more views. When the model is called by the controller and changes, the model sends a notification to all the views registered to it, and the view changes the appearance according to the information obtained from the model. This design pattern can be represented in figure 1. You can see that both Controller and Model can change the view in the classic MVC design pattern.

Figure 1 Classic MVC

Web development (back-end) based on the MVC pattern can generally be represented in figure 2. In this mode, controller is responsible for parsing the URL requested by the user's browser and automatically calling different Action in the controller to respond to the user's request according to the URL. Action calls model, then populates the data returned by model into view, and view is returned to the user's browser. The typical frameworks that adopt MVC pattern in Web server development are CakePHP, Structs, Spring and so on.

Figure 2 MVC in Web development on the Server side

Compared with the early classic MVC pattern, there are some changes in the MVC schema in Web development, because for a desktop application, it is convenient to register the view with the model and notify the view page to change immediately when the model data changes. For Web applications, even if multiple pages are registered with a model, when the model changes, the model cannot actively send messages to the Web page (because the Web application is based on the request / response pattern). Only when the user requests to browse the page, the controller is responsible for calling the model data to update the Web page. At the same time, MVC in Web development also has less coupling than classical MVC, because Model no longer interacts with View, so the structure of the program is better, which makes it easier to separate Web front-end development from business logic development.

MVC has been proved to be an effective design and development idea for programs with complex interactive logic and rich interface. The system using MVC design pattern has better structure, lower coupling, good maintainability of code, and can adapt to complex business logic and view presentation changes. It is also very suitable for team development, so that developers are divided into different roles and focus on their own responsible parts of the development.

3. MCRV design pattern

To sum up, MVC is an effective design pattern to solve the problems of code organization and reuse in applications with complex interactive interface and large code scale. Based on this, this paper attempts to solve similar problems in front-end development based on MVC design ideas.

However, the MVC design pattern cannot be directly applied in front-end page development. Because the Web page in the front-end development contains HTML, CSS, Javascript and other kinds of code, compared with the Web back-end, the Web page as a whole is a large View responsible for UI presentation, user local interaction and sending service requests, which is different from the View in the classic MVC and Web back-end development MVC mode. Therefore, it needs specific analysis of specific problems.

First of all, the HTML, CSS, Javascript and other codes in the Web page are further analyzed to make clear their specific functional classification. According to the Web development standard proposed by the industry, the Web page is first divided into "content-structure-performance-behavior" parts. Content, structure and performance are the static parts of the page, which are mainly responsible for the presentation of UI and the acceptance of user operation instructions (keyboard, mouse). Therefore, content, structure and performance belong to the category of View. The behavior is mainly the Javascript code, which is responsible for responding to the user's operation instructions. In complex ajax applications, the functions of Javascript code generally include: responding to user instructions, performing data verification / processing, executing client interaction logic, sending ajax requests to the server, receiving and processing the data returned by the server, and changing the UI according to the data (filling the page structure with content data, changing styles, etc.). Based on the idea of model-view-controller separation, the functions of data verification / processing in Javascript code, local business logic calculation, sending requests to the server to obtain data, corresponding to the functions of the model (Model), responding (translating) user operation instructions and executing business logic processing functions according to the instructions belong to the functions of the controller (Controller). The function of accepting the processed data and modifying the content / structure / style of the page according to the data does not belong to the function category of the controller nor the functional category of the model. This part of the code can be named Renderer (renderer or renderer) because the View is rendered (render) according to the data.

Based on the above analysis, this paper proposes the MCRV design pattern, as shown in figure 3. It is described as follows:

Figure 3: MCRV development pattern

M (Model): model, complete data verification, data processing, perform client-side business logic calculation, or initiate an ajax request to the server to call server-side logic, accept the returned data, and return the processed data to the controller. C (Controller): the controller responds to the events on the View, according to the business logic of the event scheduling execution model, obtains the return data from the business logic, and schedules the corresponding renderer (Render) to complete the interface presentation. In this process, the controller will transfer the data: when the controller calls the logic in the model, it will transfer the data collected by Renderer (name/value, other control parameters of each field of the form form). After the model executes the logic, the data as the result of execution is returned to the controller. The controller calls the renderer according to the data to complete the interface rendering (rendering), which is the process of modifying the page structure, content and style. The data transfer process can be shown in figure 4. R (Renderer): renderer (renderer), the renderer is called by the controller, accepts the data transferred from the controller, and completes the specific rendering of the interface. The renderer is also responsible for initializing the control (widget) and establishing the correspondence between the Controller and specific events, which is responsible for collecting data on the View and transferring it to the Controller when the event occurs. V (View): view, which is the entire Web interface that users finally see, which is composed of static content such as structure, content, style (presentation), etc. View is initialized and modified by Renderer.

Figure 4: data transfer process

You can see that in the MCRV development mode, Controller is in the position of the control center, and Model completes the specific business logic calculation and initiates the ajax request to the back end to return data. The interaction between Controller, Model and Renderer is essentially a process of data exchange, and there is a data flow between them, as shown in figure 4. Therefore, when formulating the interactive interface between Controller, Model, and Renderer, the definition of data format is very important.

4. Demo based on MCRV Design pattern

The following is a Demo page developed in MCRV mode, the function of which is to display and modify user information in a table. Javascript uses the jQuery library. The page interface is shown in figure 5. The page code is in listing 1

Figure 5: user management Demo based on MCRV design pattern

Program listing 1

The MCRV design pattern Demo / * represents * / table {width:100%;border-collapse: collapse;} td {border:1px solid black;padding: 2px;} # container {width:800px;margin:0px auto;} # tbUsers {margin:20px auto;} # tbUsers th {background-color: navy;color:white;text-align: center;vertical-align: middle;border:1px solid navy} # tbUsers td {text-align: center } .editCaption {width:100px;text-align: right;} .accounonMargin {margin:0px 20px;} .accounonContainer {text-align: center;vertical-align: middle Height:50px} id name age modification id: name: age: submit cancellation / * * behavior * * / var UserManagerMCR $(function () {UserManagerMCR=new MCR (UserController,UserModel,UserRenderer);}); / * * MCR triple * / function MCR (Controller,Model,Renderer) {this.controller=new Controller (); this.model=new Model (); this.renderer=new Renderer (); thisthis.controller.model=this.model; thisthis.controller.renderer=this.renderer; thisthis.model.controller=this.controller; thisthis.renderer.controller=this.controller; if (typeofthis.model.init== "function") {this.model.init () } if (typeofthis.renderer.init== "function") {this.renderer.init ();} if (typeofthis.controller.init== "function") {this.controller.init ();}} / * * Controller * / function UserController () {this.init=function () {this.initUserList ();} this.initUserList=function () {var list=this.model.getUserList (); this.renderer.renderUserList (list) } this.beginModify=function (data) {var user=this.model.getUserByID (data.id); this.renderer.showModifyUI (user);} / / submit modification this.submitModify=function (user) {var result=this.model.modifyUser (user); if (result.success) {var list=this.model.getUserList (); this.renderer.renderUIWhenSubmitModifySuccess (list);} else {alert (result.msg) }} / / cancel modifying this.cancelModify=function () {this.renderer.hideModifyUI () }} / * * Model * / function UserModel () {/ / simulated data. In practical applications, we often get this.init=function () {this.data = [{id:0,name: "John", age:22}, {id:1,name: "Tom", age:30}, {id:2,name: "Tony", age:25}] } / / get the user data list this.getUserList=function () {/ / todo. Maybe ajax returns returnthis.data;} / / from the backend to get the user data this.getUserByID=function (id) {var ix; $.each (this.data,function) {if (item ["id"] = = id) {iix=i; returnfalse;}); returnthis.data [ix] } / / modify user data this.modifyUser=function (user) {var result= {success:true,msg: "modified successfully"}; / / todo, verify parameter user / / todo, modify user data $.each (this.data,function (iJournal item) {if (item ["id"] = = user ["id"]) {item ["name"] = user ["name"]; item ["age"] = user ["age"] returnfalse;}}) Return result;}} / * * renderer * / function UserRenderer () {this.init=function () {var me=this; $("# btnSubmitModify") .click (function () {var user= {id:$ ("# spID"). Text (), name:$ ("# txtName"). Val (), age:$ ("# txtAge"). Val ()}; me.controller.submitModify (user);}) ("# btnCancelModify") .click (function () {me.controller.cancelModify ();}); $("# tbUsers .modify") .live ("click", function () {var id=$ (this) .attr ("uid"); me.controller.beginModify ({"id": id});} this.renderUserList=function (list) {var htm= []; for (var ix=0;ix)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.