CN109445791A - A kind of page front-end access method and realize system - Google Patents
A kind of page front-end access method and realize system Download PDFInfo
- Publication number
- CN109445791A CN109445791A CN201811292117.6A CN201811292117A CN109445791A CN 109445791 A CN109445791 A CN 109445791A CN 201811292117 A CN201811292117 A CN 201811292117A CN 109445791 A CN109445791 A CN 109445791A
- Authority
- CN
- China
- Prior art keywords
- data
- data element
- page
- attribute
- page view
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
It the invention discloses a kind of page front-end access method and realizes system, is related to front end development mode technology.A kind of page front-end access method disclosed by the invention, comprising: after being handled according to Client-initiated page operation, judge whether the associated data element of page view changes；When the associated data element of the page view changes, judge whether the value of the data attribute of the data element changes；When the value of the data attribute of the data element changes, the page view is rendered again.Technical scheme is based on data-driven and realizes that front-end access avoids system defect rate by service logic with the decoupling of DOM element, greatly improves the maintenance cost of subsequent code.
Description
Technical field
The present invention relates to front end development mode technology, in particular to a kind of front-end access scheme based on data-driven.
Background technique
Current front end development mode is generally all based on greatly event-driven and is developed.Under this mode, point of front and back end
Work is very clear, and the crucial cooperation point of front and back end is Ajax interface, it is specified that after good interactive interface, so that it may be opened separately according to agreement
Work is developed in environment and is tested by modes such as false data Mock, while carrying out the integrated survey in front and back end in specific time node
Examination.But with the even more complex of business function, this mode substantially has no essential distinction with the Web in JSP epoch exploitation,
Only complicated service logic has been transferred in JavaScript file from jsp file.For a front end function
The complicated engineering of energy, interaction, JavaScript code are easy to expand.At the same time, service logic and DOM in the code of front end
The displaying of (Document Object Model, DOM Document Object Model) layer has close-coupled.Such exploitation code bug rate
It is very high, and subsequent maintenance cost is very high.
Summary of the invention
The invention discloses a kind of page front-end access method and realize that system, the business in the code of front end that can solve are patrolled
Volume and DOM layers displaying close-coupled and caused by the high problem of subsequent code maintenance cost.
The invention discloses a kind of page front-end access methods, comprising:
After being handled according to Client-initiated page operation, judge whether the associated data element of page view occurs
Change；
When the associated data element of the page view changes, the value of the data attribute of the data element is judged
Whether change；
When the value of the data attribute of the data element changes, the page view is rendered again.
Optionally, the above method further include:
In advance to the data element definition data attribute of the corresponding component of each page operation；
Data element for the component is arranged and binds dynamic event, and the corresponding business of the dynamic event is arranged and patrols
Volume, generate the dynamic model based on data-driven.
Optionally, in the above method, the dynamic event includes at least the triggering item of DOM Document Object Model (DOM) operation
Part.
Optionally, in the above method, the trigger condition of the DOM operation includes at least following any one or two kinds of:
The click event of user, drop-down select the switching at runtime event of data in frame.
Optionally, the above method further include: pre-establish the incidence relation of page view and data element, the foundation page
The process of the incidence relation of face view and data element includes:
During component instance, the data element of the component is initialized, traverses the data category of the data element
Property, and data attribute is converted into reception/setting (getter/ using object definition attribute (Object.defineProperty)
Setter) function, wherein the data attribute of the data element has uniqueness in the data element；
The observation watcher instance objects of the component object of instantiation, use the number of getter function access data element
According to attribute, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view.
There is disclosed herein a kind of realization systems of page front-end access, including memory and processor, in which:
The memory, for saving the program of page front-end access；
The processor is performed the following operations for reading the program for executing the page front-end access:
After being handled according to Client-initiated page operation, judge whether the associated data element of page view occurs
Change；
When the associated data element of the page view changes, the value of the data attribute of the data element is judged
Whether change；
When the value of the data attribute of the data element changes, page view is rendered again.
Optionally, in above system, the processor is also performed the following operations:
In advance to the data element definition data attribute of the corresponding component of each page operation；
Data element for the component is arranged and binds dynamic event, and the corresponding business of the dynamic event is arranged and patrols
Volume, generate the dynamic model based on data-driven.
Optionally, in above system, the dynamic event includes at least the trigger condition of DOM Document Object Model DOM operation.
Optionally, in above system, the trigger condition of the DOM operation includes at least following any one or two kinds of:
The click event of user, drop-down select the switching at runtime event of data in frame.
Optionally, in above system, the incidence relation for pre-establishing page view and data element, the foundation page
The process of the incidence relation of face view and data element includes:
During component instance, the data element of the component is initialized, traverses the data category of the data element
Property, and the data attribute is converted into reception/setting using object definition attribute Object.defineProperty
Getter/setter function, wherein the data attribute of the data element has uniqueness in the data element；
The observation watcher instance objects of the component object of instantiation remove access data element using getter function
Data attribute, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view
Element.
Technical scheme is based on data-driven and realizes front-end access, system defect rate is avoided, after greatly improving
The maintenance cost of continuous code.
Detailed description of the invention
Fig. 1 is the front-end access schematic illustration based on data-driven in the embodiment of the present invention.
Specific embodiment
To make the objectives, technical solutions, and advantages of the present invention clearer, below in conjunction with specific embodiment pair
Technical solution of the present invention is described in further detail.It should be noted that in the absence of conflict, embodiments herein and
Feature in embodiment can be arbitrarily combined with each other.
Embodiment 1
For the defects in the prior art, present inventor proposes, can realize front-end access based on data-driven.
That is: relevant data data attribute is defined respectively to the corresponding data element of each component of the page, the data attribute is current
Exist in data element and uniquely；Dynamic event is added to the data element of webpage representation layer (View is also believed to dom tree)
And business logic processing.In this way, being presented to the dynamic implement page View (i.e. WEB front-end) according to the variation of bottom data
User, so that the efficiency of exploitation be substantially improved.
Based on above-mentioned thought, the front-end access method based on data-driven that the present embodiment provides a kind of mainly includes as follows
Operation:
After being handled according to Client-initiated page operation, judge whether the associated data element of page view occurs
Change；
When the associated data element of the page view changes, the value of the data attribute of the data element is judged
Whether change；
When the value of the data attribute of the data element changes, current page is rendered again.
Wherein, the processing to page view is regarded as according to the processing that Client-initiated page operation carries out.
Based on the above method, data element definition data category that can in advance to the corresponding component of each page operation
Property (wherein comprising define data attribute associated initial value)；
It is arranged and binds dynamic event again for the data element of each component, and the corresponding business of the dynamic event is set and is patrolled
Volume, form a dynamic model method based on data-driven.That is, i.e. only need component data element (such as
Button element) on indicate event (indicating dynamic event), while stating corresponding data attribute of an element, click event when
The value for changing the attribute of an element is waited, the text of corresponding element can be automatic in page View (i.e. WEB front-end) in this way
The i.e. page is switched over to render again.
Wherein, dynamic event includes at least the trigger condition of DOM operation.Such as the click event and/or drop-down choosing of user
The switching at runtime event etc. of data in frame.
Therefore data element definition data attribute to each component in the page that is: by foreground and user
There is interactive DOM element to carry out uniqueness statement in the form that data data is defined；
And above-mentioned, this method further include: pre-establish the incidence relation of page view and data element, which can be by
It is carried out according to following operating procedure:
During component instance, the data element of initialization component, all data attributes of ergodic data element, and
All data attributes are converted into getter/setter function using Object.defineProperty；
The observation watcher instance objects of the component object of instantiation remove access data element using getter function
Data attribute, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view
Element.
Wherein, the data attribute of data element has uniqueness in the data element.
Below for shown in attached drawing 1, illustrate a kind of illustrative implementation process of above-mentioned front-end access method, the process
Including operating as follows:
Firstly, data data item (i.e. the corresponding data element of component) is initialized in the instantiation process of component, traversal
All data attribute of data data item (for example, data:{ " cpu ": 1, " memory ": 1024 }) and uses
These data attributes are all converted to getter/setter function by Object.defineProperty.Each example simultaneously
Object has a watcher instance objects, it can remove the category of access data with getter function during template compiles
Property, watcher instance objects will be denoted as the data attribute used dependence at this time, thus establish view (i.e. before WEB
End) and data between contact.Later, when the data dependence of render view (the namely value of the data attribute of data element) is sent out
When raw change (i.e. the setter of data is called), whether the numerical value that watcher instance objects can compare former and later two is sent out
Then changing determines whether to notify that view (i.e. WEB front-end) is rendered again.Thereby realize so-called data for
The driving of view.
For example illustrate, for example click a button button (i.e. Client-initiated page operation) and need webpage representation
The text of the corresponding data element of layer (View) carries out big and small switching.Operation in traditional jquery, for the page
Modification is usually: event bound to button first, then obtains corresponding element DOM object, it finally should according to switching modification
The value of DOM object.And the technical solution of the embodiment of the present invention is used, the process of this function is realized based on data-driven, is only needed
Event (indicating dynamic event) is indicated on button element, while stating the data attribute of corresponding element, click event
When change the element data attribute value, the text energy of corresponding element in this way in page View (i.e. WEB front-end)
It is enough automatically to switch over.
Embodiment 2
The present embodiment provides a kind of realization systems of page front-end access, can be in the method for above-described embodiment 1, and the system is extremely
It less include memory and processor.
Memory, for saving the program of page front-end access；
Processor is performed the following operations for reading the program for executing the page front-end access:
After being handled according to Client-initiated page operation, judge whether the associated data element of page view occurs
Change；
When the associated data element of the page view changes, the value of the data attribute of the data element is judged
Whether change；
When the value of the data attribute of the data element changes, page view is rendered again.
Wherein, the place to page view is regarded as according to the processing that Client-initiated page operation carries out in the present embodiment
Reason.
Above-mentioned processor is other than carrying out aforesaid operations, it is also possible to perform the following operations:
In advance to the data element definition data attribute of the corresponding component of each page operation (wherein comprising defining data attribute
Associated initial value)；
Data element for the component is arranged and binds dynamic event, and the corresponding business of the dynamic event is arranged and patrols
Volume, generate the dynamic model based on data-driven.
In the present embodiment, dynamic event includes at least the trigger condition of DOM operation.
The trigger condition of DOM operation herein includes at least following any one or two kinds of:
The click event of user, drop-down select the switching at runtime event of data in frame.
In a kind of illustrative example, above system also needs to pre-establish being associated with for page view and data element
System, the process for establishing the incidence relation of page view and data element may include operating as follows: during component instance,
The data element for initializing the component, traverses the data attribute of the data element, and uses
The data attribute is converted to getter/setter function by Object.defineProperty, wherein the data element
Data attribute in the data element have uniqueness；
The observation watcher instance objects of the component object of instantiation remove access data element using getter function
Data attribute, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view
Element.
In the present embodiment, data element definition data attribute to each component in the page that is: by foreground and use
Family has interactive DOM element to carry out uniqueness statement in the form that data data is defined.
From above-described embodiment as can be seen that technical scheme uses the development scheme of data-driven, will effectively count
It is separated according to being shown with DOM.So as to so that exploitation code focuses more on processing business logic rather than goes to be concerned about DOM operation, most
The efficiency of exploitation can be greatly improved eventually, while improving the quality of code.
Those of ordinary skill in the art will appreciate that all or part of the steps in the above method can be instructed by program
Related hardware is completed, and described program can store in computer readable storage medium, such as read-only memory, disk or CD
Deng.Optionally, one or more integrated circuits can be used also to realize in all or part of the steps of above-described embodiment.Accordingly
Ground, each module/unit in above-described embodiment can take the form of hardware realization, can also use the shape of software function module
Formula is realized.The application is not limited to the combination of the hardware and software of any particular form.
The above, preferred embodiments only of the invention, is not intended to limit the scope of the present invention.It is all this
Within the spirit and principle of invention, any modification, equivalent substitution, improvement and etc. done should be included in protection model of the invention
Within enclosing.
Claims (10)
1. a kind of page front-end access method characterized by comprising
After being handled according to Client-initiated page operation, judge whether the associated data element of page view changes
Become；
When the associated data element of the page view changes, judge the data attribute of the data element value whether
It changes；
When the value of the data attribute of the data element changes, the page view is rendered again.
2. the method as described in claim 1, which is characterized in that this method further include:
In advance to the data element definition data attribute of the corresponding component of each page operation；
Data element for the component is arranged and binds dynamic event, and the corresponding service logic of the dynamic event is arranged, raw
At the dynamic model based on data-driven.
3. method according to claim 2, which is characterized in that
The dynamic event includes at least the trigger condition of DOM Document Object Model DOM operation.
4. method as claimed in claim 3, which is characterized in that the trigger condition of the DOM operation includes at least following any
Kind or two kinds:
The click event of user, drop-down select the switching at runtime event of data in frame.
5. such as the described in any item methods of claim 2 to 4, which is characterized in that this method further include: pre-establish page view
Process with the incidence relation of data element, the incidence relation for establishing page view and data element includes:
During component instance, the data element of the component is initialized, traverses the data attribute of the data element, and
Data attribute is converted into reception/setting getter/setter letter using object definition attribute Object.defineProperty
Number, wherein the data attribute of the data element has uniqueness in the data element；
The observation watcher instance objects of the component object of instantiation, use the data category of getter function access data element
Property, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view.
6. a kind of realization system of page front-end access, which is characterized in that including memory and processor, in which:
The memory, for saving the program of page front-end access；
The processor is performed the following operations for reading the program for executing the page front-end access:
After being handled according to Client-initiated page operation, judge whether the associated data element of page view changes
Become；
When the associated data element of the page view changes, judge the data attribute of the data element value whether
It changes；
When the value of the data attribute of the data element changes, page view is rendered again.
7. system as claimed in claim 6, which is characterized in that the processor also performs the following operations:
In advance to the data element definition data attribute of the corresponding component of each page operation；
Data element for the component is arranged and binds dynamic event, and the corresponding service logic of the dynamic event is arranged, raw
At the dynamic model based on data-driven.
8. system as claimed in claim 7, which is characterized in that
The dynamic event includes at least the trigger condition of DOM Document Object Model DOM operation.
9. system as claimed in claim 8, which is characterized in that the trigger condition of the DOM operation includes at least following any
Kind or two kinds:
The click event of user, drop-down select the switching at runtime event of data in frame.
10. such as the described in any item systems of claim 7 to 9, which is characterized in that described to pre-establish page view and data element
The incidence relation of element, the process of the incidence relation for establishing page view and data element include:
During component instance, the data element of the component is initialized, traverses the data attribute of the data element, and
The data attribute is converted into reception/setting getter/ using object definition attribute Object.defineProperty
Setter function, wherein the data attribute of the data element has uniqueness in the data element；
The observation watcher instance objects of the component object of instantiation go the data of access data element using getter function
Attribute, and the data attribute for being involved in page view rendering is denoted as dependence, to establish the associated data element of page view.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811292117.6A CN109445791A (en) | 2018-11-01 | 2018-11-01 | A kind of page front-end access method and realize system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811292117.6A CN109445791A (en) | 2018-11-01 | 2018-11-01 | A kind of page front-end access method and realize system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109445791A true CN109445791A (en) | 2019-03-08 |
Family
ID=65550358
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811292117.6A Pending CN109445791A (en) | 2018-11-01 | 2018-11-01 | A kind of page front-end access method and realize system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109445791A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111949250A (en) * | 2020-07-15 | 2020-11-17 | 苏州浪潮智能科技有限公司 | Multi-event driving method and system based on data driving framework |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016037002A1 (en) * | 2014-09-04 | 2016-03-10 | Home Box Office, Inc. | Data-driven navigation and navigation routing |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN107633013A (en) * | 2017-08-17 | 2018-01-26 | 广州酷狗计算机科技有限公司 | Page picture generation method, device and computer-readable recording medium |
| US20180089154A1 (en) * | 2016-09-26 | 2018-03-29 | North America Photon Infotech Limited | Computer implemented system and method for transforming web content for display on multiple form factors |
| CN108153886A (en) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | User-defined visual methods of exhibiting of the real time data in web applications |
-
2018
- 2018-11-01 CN CN201811292117.6A patent/CN109445791A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016037002A1 (en) * | 2014-09-04 | 2016-03-10 | Home Box Office, Inc. | Data-driven navigation and navigation routing |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| US20180089154A1 (en) * | 2016-09-26 | 2018-03-29 | North America Photon Infotech Limited | Computer implemented system and method for transforming web content for display on multiple form factors |
| CN107633013A (en) * | 2017-08-17 | 2018-01-26 | 广州酷狗计算机科技有限公司 | Page picture generation method, device and computer-readable recording medium |
| CN108153886A (en) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | User-defined visual methods of exhibiting of the real time data in web applications |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111949250A (en) * | 2020-07-15 | 2020-11-17 | 苏州浪潮智能科技有限公司 | Multi-event driving method and system based on data driving framework |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN112035197B (en) * | 2020-08-11 | 2021-07-13 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
| CN113051507B (en) * | 2021-03-29 | 2023-11-21 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front-end display based on json data |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107562556B (en) | Failure recovery method, recovery device and storage medium | |
| CN109445791A (en) | A kind of page front-end access method and realize system | |
| CN107133174A (en) | Test case code automatically generating device and method | |
| CN106611032A (en) | Webpage pre-loading method and device | |
| CN104268229B (en) | Resource obtaining method and device based on multi-process browser | |
| CN111831542B (en) | API application debugging method and device and storage medium | |
| US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
| CN109635260B (en) | Method, device, equipment and storage medium for generating article template | |
| CN107665170B (en) | Flow testing method and device | |
| US20150213077A1 (en) | Method and system for causing a web application to obtain a database change | |
| CN109710301A (en) | A kind of method and terminal of automatic relatively interface document difference | |
| CN105404514A (en) | JavaScript rendering method and apparatus | |
| CN112835579A (en) | Method and device for determining interface code, electronic equipment and storage medium | |
| CN109189692A (en) | A kind of webservice interface test method and device | |
| CN111367934B (en) | Data consistency checking method, device, server and medium | |
| CN103902727A (en) | Network search method and device | |
| US20130318425A1 (en) | Method for copying multiple content between applications | |
| CN111078530A (en) | Application program debugging method and system, electronic equipment and computer readable storage medium | |
| CN112988407B (en) | Data processing method and device, electronic equipment and computer readable storage medium | |
| US20180011822A1 (en) | Apparatus and method for outputting web content | |
| CN108108369B (en) | Method and device for processing calling error of common interface library | |
| US12045584B2 (en) | Undeployed topology visualization for improving software application development | |
| CN113836291B (en) | Data processing method, device, equipment and storage medium | |
| CN113111713B (en) | Image detection method and device, electronic equipment and storage medium | |
| US20240143347A1 (en) | Systems and methods for encoding and rendering generic visualizations of a gui of a client application |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190308 |
|
| RJ01 | Rejection of invention patent application after publication |