Mixed developing front end MVC framework implementation method and system
Technical field
The present invention relates to computer realm, particularly relate to a kind of mixed developing front end MVC framework implementation method and system.
Background technology
Along with the development of intelligent terminal's (mobile phone, panel computer etc.) and universal, much handle official business, entertain and operate software and be transformed into terminal APP (application program from large-scale hardware computer software, the abbreviation of Application), and the exploitation of terminal APP is the most progressively changed to mixed developing pattern (iOS+HTML5+Javascript or Android+HTML5+Javascript) by single iOS or Android development mode, the front end exploitation that HTML5+Javascript exploitation is referred to as in mixed developing pattern.
At present, owing to front end exploitation is shorter for rise time, the understanding that front end is developed is rested in more outmoded pattern by major part developer, make front end exploitation code management logical miss, not easy care and reconstruct, adding development cost, thus the application program causing exploitation refreshes efficiency and data storage performance is relatively low, the Consumer's Experience causing application program is the best.
Summary of the invention
In view of the defect of prior art, present invention aim at providing a kind of mixed developing front end MVC framework implementation method and system, in order to solve existing mixed developing front end pattern Program code administration logical miss, not easy care and the problem of reconstruct.
The object of the invention is mainly achieved through the following technical solutions:
According to an aspect of the present invention, the present invention provides the front end MVC framework implementation method of a kind of mixed developing, including:
The action event of a page module in presentation layer capture user interface, and described action event is notified key-course;
According to described action event, described key-course, after receiving notice, judges that described page module obtains data the need of from service layer;When being judged to be, determine the data model that described action event is corresponding, and described data model is notified data model layer;
Described data model layer calls described data model, to ask described data to service layer;And receive the described data that described service layer returns, and send the data to described key-course;
Described data are filled into described presentation layer by described key-course, and refresh described page module.
Further, described presentation layer uses single-page application model.
Further, described method also includes:
The program code of described presentation layer, the program code of described key-course are separated with the program code of described data model layer.
Further, described data model layer uses Asynchronous Request mode when described service layer asks described data.
Further, described data model layer, after receiving the described data that described service layer returns, sends the data to the step of described key-course, also includes:
Encapsulate described data according to predetermined data form, and the described data after encapsulation are sent to described key-course.
According to another aspect of the present invention, the present invention also provides for the front end MVC framework of a kind of mixed developing and realizes system, including:
Presentation layer, for capturing the action event of a page module in user interface, notifies key-course by described action event;And for receiving the data that described key-course is filled, and in described user interface, show the page module after refreshing;
According to described action event, key-course, for after receiving notice, judges that described page module obtains data the need of from service layer;When being judged to be, determine the data model that described action event is corresponding, and described data model is notified data model layer;And for receiving the described data that data model layer sends, described data are filled into described presentation layer, and refresh described page module;
Data model layer, is used for calling described data model, to ask described data to service layer;And receive the described data that described service layer returns, and send the data to described key-course.
Further, described presentation layer uses single-page application model.
Further, the program code of described presentation layer, the program code of described key-course separate with the program code of described data model layer.
Further, described data model layer uses Asynchronous Request mode when described service layer asks described data.
Further, described data model layer, after receiving the described data that described service layer returns, is additionally operable to encapsulate described data according to predetermined data form, and the described data after encapsulation is sent to described key-course.
The present invention has the beneficial effect that:
Data are passed to presentation layer by the way of making key-course use data injection by the method and system of the present invention, thus realize the program code of presentation layer and the separation of the program code of key-course;Called the corresponding data model of data model layer simultaneously by key-course, and make this data model to service layer's request data, thus realize the program code of data model layer and the separation of the program code of key-course;So that the presentation layer of mixed developing, key-course and data Layer are separate, module is safeguarded and is independently independent of each other, and makes program code manage clear logic, easy care and reconstruct;And by page Local hydrodynamic unit, reduce internal memory shared by application request of data, improve runnability, develop for software and APP and bring more preferable Consumer's Experience.
Accompanying drawing explanation
Fig. 1 is the main flow chart of mixed developing front end MVC framework implementation method in the embodiment of the present invention;
Fig. 2 is the block schematic illustration that in the embodiment of the present invention, mixed developing front end MVC framework realizes system.
Detailed description of the invention
In order to solve existing mixed developing front end pattern Program code administration logical miss, not easy care and the problem of reconstruct, the invention provides a kind of mixed developing front end MVC (Model (object instance) View (view) Controller (controller)) framework implementation method and system, below in conjunction with accompanying drawing and embodiment, the present invention is further elaborated.Should be appreciated that specific embodiment described herein, only in order to explain the present invention, does not limit the present invention.
Embodiment one
As it is shown in figure 1, the embodiment of the present invention provides the front end MVC framework implementation method of a kind of mixed developing, including:
Step A, seizure user operation, say, that the action event of a page module in presentation layer capture user interface, and described action event is notified key-course;
Step B, call data process, say, that described key-course after receiving notice, according to described action event judge described page module the need of from service layer acquisition data;When being judged to be, determine the data model that described action event is corresponding, and described data model is notified data model layer;
Step C, request data, say, that described data model layer calls described data model, to ask described data to service layer;And after receiving the described data that described service layer returns, send the data to described key-course;
Step D, service layer return data;
Step E, return data to controller, say, that described data model layer receives the described data that described service layer returns, and sends the data to described key-course;
Step F, the Local hydrodynamic unit page fill data, say, that described data are filled into described presentation layer by described key-course, and refresh described page module.
Specifically, presentation layer is used for providing user interface, user interface to include some page module;That is presentation layer provides a user with displayed page;The content of page presentation includes all the elements that in browser or APP, user can see, points out including word, picture, animation and loading, and the word of user oneself input and expression etc..
Data refer to the content of all dynamic change taken from server, including dynamically updating the news of display, advertisement, user profile, sequence information, user habit and equipment current state etc..
Key-course is used for judging the user operation of presentation layer, and calls data model layer request data;User operation refers to the everything event that user makes in the page, including: input action, click action and sliding action etc., such as input information during registration, user name password is inputted when logging in, click browses lower one page, in APP, the slip page loads more contents, clicks on certain commodity entrance commodity and the page etc. is discussed in detail.
Data model layer is used for preserving multiple functional module (i.e. data model), each functional module correspondence and an action in presentation layer, for realizing the function that corresponding actions in presentation layer is to be realized.
In the development mode of existing front end, being to introduce or embed relevant Javascript code in HTML, this development mode makes code logic clear not, and code maintenance is loaded down with trivial details;And this development mode needs data to be to need to refresh full page, thus cause service end process and need to process full page data, thus the page load time is longer at presentation layer;And between the page, logic coupling is higher, is not readily separated.
The embodiment of the present invention is by when the user interface of presentation layer needs to be loaded into data, key-course sends request of data to data model layer, so that described data model layer returns described data, after described key-course receives described data, refresh the page module belonging to described data in described user interface, and described data are filled into described presentation layer, so that data are passed to presentation layer by the mode that key-course uses data to inject, thus realize the program code of presentation layer and the separation of the program code of key-course, program code is made to manage clear logic, easy care and reconstruct;And by page Local hydrodynamic unit, reduce internal memory shared by application request of data, improve runnability, develop for software and APP and bring more preferable Consumer's Experience.
One of the present invention preferred embodiment in, also said method is optimized, specifically, described method also includes:
Described presentation layer uses single-page application model, provides only a page as user interface.
Single-page application model specifically includes: application (including a portal website and APP) only one of which page entry (user interface);All of request and the page change by key-course control realization, it is not necessary to send url and change request, save flow and improve loading velocity.
One of the present invention preferred embodiment in, also said method is optimized, specifically, in described presentation layer capture user interface before the step of the action event of a page module, also includes:
The program code of described presentation layer, the program code of described key-course are separated with the program code of described data model layer.
It is to say, use Development of Modular mode, can inherit between module.Development of Modular mode makes developer add new development function as adding module, and all functions are independent of each other, and manage independently.Specifically, when needing what's new, only need to increase a module newly and develop, this module can not interfere with other functional modules from each other as single standalone module, and optional other functions of modules of succession.Such as, html page and Javascript code all can make to be finished rear example auto-destruct, reasonable management memory headroom as single fragment, on-demand loading.
One of the present invention preferred embodiment in, also said method is optimized, specifically,
The mode that data model sends request of data to described service layer is Asynchronous Request.
One of the present invention preferred embodiment in, also said method is optimized, specifically, after described data model layer receives described data, encapsulates described data according to predetermined data form, and the described data after encapsulation are sent to described key-course.
That is, in the most preferred embodiment, key-course is mainly used to analyze and process the data that user interface needs to be loaded into, the data being loaded into as required, call the corresponding data model (model) in data model layer, make data model obtain these data from server.Such as: user clicks on registration, key-course need to call the model of registration and send user profile and register to server;And for example: user clicks on lower one page, key-course is responsible for the animation (in such as mobile phone A PP, new page is appearance of sliding from right to left) that the page correctly redirects and displayed page redirects.
All of action or request in the page, have key-course to be first analyzed, then process.
Data model layer is mainly responsible for sending request, and the data that package request is returned.Key-course is responsible for processing all of action of the page and logic, and decides whether to call data model layer to send request, and calls which data model to send request.And after receiving the data that service layer returns, in S102, the most only need to redraw user needs to see the part of change, thus alleviates the processing load of service end, improves webpage response speed, and data interaction is transferred to browser end from service end, accomplish that data are by the purpose loaded needed for user.
As it is shown in figure 1, as a example by HTML5+Javascript, describe embodiment of the present invention method in detail, the method comprise the steps that
A:HTML presentation layer is used for displayed page and data, capturing events notify key-course after user triggers certain event;Such as: user sees all of items list in Haier's store homepage, clicks on some commodity, can trigger one " click " event, key-course can monitor.
B:Javascript key-course is used for analyzing the event type of presentation layer capture and corresponding treatment mechanism, calls the data model request data that this event is corresponding;Such as: key-course is analyzed current " clicks " event is any type, such as this event is not registration, is not logged on, is not page jump, and is click on commodity and needs entrance item detail page.
Key-course controls page jump to commodity details page, and calls and take data model of commodity details and send the request of this commodity data.
C: after data model layer receives request of data, sends Ajax and asks background server;
D: server returns data;
E: data model layer encapsulates the data fetched according to the data form of regulation and passes key-course back;
F: key-course receives data, and the page module that Local hydrodynamic unit is corresponding, data is filled in the existing layer of HTML table.
It is to say, according to this flow process, the presentation layer of mixed developing, key-course and data Layer are separate, module is safeguarded and is independently independent of each other, and no matter investigates in terms of coding or maintenance, the easiest, and more meets object-oriented logic.
Embodiment two
As in figure 2 it is shown, the front end MVC framework that the embodiment of the present invention provides a kind of mixed developing realizes system, including:
Presentation layer, for capturing the action event of a page module in user interface, notifies key-course by described action event;And for receiving the data that described key-course is filled, and in described user interface, show the page module after refreshing;
According to described action event, key-course, for after receiving notice, judges that described page module obtains data the need of from service layer;When being judged to be, determine the data model that described action event is corresponding, and described data model is notified data model layer;And for receiving the described data that data model layer sends, described data are filled into described presentation layer, and refresh described page module;
Data model layer, is used for calling described data model, to ask described data to service layer;And after receiving the described data that described service layer returns, send the data to described key-course.
Wherein, described presentation layer uses single-page application model, provides only a portal page as user interface.
The program code of described presentation layer, the program code of described key-course separate with the program code of described data model layer.
The mode that described data model sends request of data to described service layer is Asynchronous Request.
Described data model layer, after receiving the described data that described service layer returns, is additionally operable to encapsulate described data according to predetermined data form, and the described data after encapsulation is sent to described key-course.
The system of the embodiment of the present invention can make developer be easier to management displayed page and logic control code, and pattern is transferred to object-oriented development by towards script exploitation.When needing what's new, only need to increase a module newly and develop, this module can not interfere with other functional modules from each other as single standalone module, and optional other functions of modules of succession.Html page and Javascript code all can make to be finished rear example auto-destruct, reasonable management memory headroom as single fragment, on-demand loading.
Although being example purpose, more than having been disclosed for the preferred embodiments of the present invention, but those skilled in the art will be recognized by various improvement, increase and replace also being possible, therefore, the scope of the present invention should be not limited to above-described embodiment.