CN105404514B - JavaScript rendering method and device - Google Patents

JavaScript rendering method and device Download PDF

Info

Publication number
CN105404514B
CN105404514B CN201510874942.7A CN201510874942A CN105404514B CN 105404514 B CN105404514 B CN 105404514B CN 201510874942 A CN201510874942 A CN 201510874942A CN 105404514 B CN105404514 B CN 105404514B
Authority
CN
China
Prior art keywords
data
html template
json
acquisition
json data
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.)
Active
Application number
CN201510874942.7A
Other languages
Chinese (zh)
Other versions
CN105404514A (en
Inventor
匡凌轩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Huaduo Network Technology Co Ltd
Original Assignee
Guangzhou Huaduo Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou Huaduo Network Technology Co Ltd filed Critical Guangzhou Huaduo Network Technology Co Ltd
Priority to CN201510874942.7A priority Critical patent/CN105404514B/en
Publication of CN105404514A publication Critical patent/CN105404514A/en
Application granted granted Critical
Publication of CN105404514B publication Critical patent/CN105404514B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The present invention relates to a kind of JavaScript rendering method and devices.The method includes the steps: incoming configuration parameter is obtained, JSON data are obtained according to the configuration parameter, the title of the JSON data includes data type and mark;The corresponding html template of data type of the JSON data is obtained from preset each html template, each html template includes the position where each label of data type and data type;Title JSON data identical with each label of the html template of acquisition respectively are obtained from the JSON data, and data render is carried out according to the value of the JSON data of acquisition.The present invention improves front end development efficiency, avoids the code for needing to adjust data render logical operation in different kinds of business exploitation, reduces the cost of exploitation.

Description

JavaScript rendering method and device
Technical field
The present invention relates to field of computer technology, more particularly to a kind of JavaScript rendering method, JavaScript Rendering device.
Background technique
JavaScript belongs to the scripting language of network, is a kind of regime type, weak type, the language based on prototype, interior Set support type.JavaScript has been widely used for Web (webpage) application and development, is commonly used to add for webpage all kinds of Dynamic function, provide the result of browse of more smooth beauty for user.Usual JavaScript script is by being embedded in HTML The function of itself is realized in (Hyper Text Markup Language, hypertext markup language).
All the time, the load, rendering of data are all a problem for trouble for front end, it cumbersome, again Multiplicity is high, wastes very much the quality time of programmer.Although also occurring various frames (such as AngularJS) or template at present Engine (HandlerBars), but if be intended merely to solve the problems, such as front end data load and rendering and introduce so big File, and programmer is needed to learn these frame grammars, using various new labels, then no matter machine operating cost, also It is relatively high from human cost.
Summary of the invention
Based on this, it is necessary in view of the above-mentioned problems, a kind of JavaScript rendering method and device are provided, before can be improved It holds development efficiency and reduces the cost of exploitation.
In order to achieve the above object, the invention adopts the following technical scheme:
A kind of JavaScript rendering method, comprising steps of
Incoming configuration parameter is obtained, JSON data, the title packet of the JSON data are obtained according to the configuration parameter Include data type and mark;
The corresponding html template of data type of the JSON data, each HTML mould are obtained from preset each html template Plate includes the position where each label of data type and data type;
Title JSON data identical with each label of the html template of acquisition respectively are obtained from the JSON data, Data render is carried out according to the value of the JSON data of acquisition.
A kind of JavaScript rendering device, comprising:
JSON data acquisition module obtains JSON data according to the configuration parameter for obtaining incoming configuration parameter, The title of the JSON data includes data type and mark;
Html template obtains module, for obtaining the data type pair of the JSON data from preset each html template The html template answered, each html template include the position where each label of data type and data type;
Data render module, for from the JSON data obtain title respectively with each mark of the html template of acquisition Identical JSON data are signed, data render is carried out according to the value of the JSON data of acquisition.
JavaScript rendering method of the present invention and device, each html template according to the requirement definition of each business itself, The attribute of data type is added in each html template to state template for batch dynamic rendering data.According to incoming configuration Parameter obtains JSON data, obtains corresponding html template according to the data type of JSON data, then according to JSON data into Row data render.The present invention relates to the data render of front end, front end developer only needs the logic sum of focused data acquisition HTML structure pattern, without the realization that focused data renders, interface and data separating are handled, and modify styles, structure also not It will affect the rendering of data, such HTML code, JavaScript code all unusual simple and clears are easily modified, safeguard;It can be with Realized by JavaScript plug-in unit, incoming configuration parameter can be called, do not need to learn, can with batch rendering dynamic data, Front end development efficiency is improved, the code for needing to adjust data render logical operation in different kinds of business exploitation is avoided, Reduce the cost of exploitation.
Detailed description of the invention
Fig. 1 is the flow diagram of JavaScript rendering method embodiment of the present invention;
Fig. 2 is the schematic diagram of html template specific embodiment of the present invention;
Fig. 3 is the flow diagram of step S130 embodiment of the present invention;
Fig. 4 is the schematic diagram of the html interface specific embodiment of the template generation of the invention by Fig. 2;
Fig. 5 is the structural schematic diagram of JavaScript rendering device embodiment one of the present invention;
Fig. 6 is the structural schematic diagram of JavaScript rendering device embodiment two of the present invention;
Fig. 7 is the structural schematic diagram of data render module embodiments of the present invention.
Specific embodiment
It is with reference to the accompanying drawing and preferably real for the effect for further illustrating technological means adopted by the present invention and acquirement Example is applied, to technical solution of the present invention, carries out clear and complete description.
As shown in Figure 1, a kind of JavaScript rendering method, comprising steps of
S110, incoming configuration parameter is obtained, JSON (JavaScript Object is obtained according to the configuration parameter Notation, JavaScript object representation) data, the title of the JSON data includes data type and mark;
S120, the corresponding html template of data type that the JSON data are obtained from preset each html template, respectively Html template includes the position where each label of data type and data type;
S130, title JSON identical with each label of the html template of acquisition respectively is obtained from the JSON data Data carry out data render according to the value of the JSON data of acquisition.
For different types of service, the html template needed is different.For different types of service, in HTML mould The attribute of different data types is added in plate, such as the attribute etc. of datatype=" item " is added in html template, just The energy automatic identification tag block replicates the JSON data that the template carrys out batch rendering corresponding data type as template.
Html template further includes the position where each label of data type, such as needs to load data in html template Position addition datafield=" data type _ ×××× " be used as label.For example, as shown in Fig. 2, specifically real for HTML Apply the schematic diagram of example." being set as item " in Fig. 2 indicates that the data type of template addition is item, text label 1, picture Label and text label 2 are the position where the label of the data type.For example, being defined as datafield at text label 1 =" item_mask " is defined as datafield=" item_img " at picture tag, is defined as at text label 2 Datafield=" item_caption ".It should be noted that the form of above-mentioned label is only used for specific example, not to this The specific expression form of invention label makes restriction, and user can also define label using other modes according to actual needs.
JSON data are the grammer of storage and exchange of texts information, including title and value.Due to needing according to JSON data It finds template and carries out data render, so the title of JSON data includes data type and mark, such as a JSON data For object { item_img: " ../imges/1.jpg ", item_mask: " Amy jasmine Clarke ", item_ Caption: " Dan Nilisitangelian ", item_link: " baidu.com " }, item is data type, and img etc. is Mark, " ../imges/1.jpg " etc. are value.
AJAX (Asynchronous Javascript And XML, Ajax) is a kind of whole without reloading In the case where a webpage, it is capable of the technology of update section subnetting page.In one embodiment, incoming configuration parameter is obtained, according to The configuration parameter obtains the step of JSON data and may include:
AJAX request is sent according to the configuration parameter, obtains the JSON data returned according to the AJAX request;
And/or
The JSON data of input are obtained according to the configuration parameter.
After receiving incoming configuration parameter, AJAX can be called to request JSON data, JSON number can also be directly inputted According to AJAX can also be called to request JSON data and directly input JSON data while carrying out.
After getting JSON data, html template is found according to the data type of JSON data.For following for html template Ring uses, and in one embodiment, the data type that the JSON data are obtained from preset each html template is corresponding After html template, title JSON identical with each label of the html template of acquisition respectively is obtained from the JSON data , can be with comprising steps of the html template to acquisition replicate before data, the html template replicated.It is so subsequent It is that title JSON data identical with each label of the html template of duplication respectively are obtained from the JSON data, according to The value of the JSON data of acquisition carries out data render, is also the corresponding label of html template that value is assigned to duplication in rendering.
JSON data can be a data (such as: 122 or " hello "), is also possible to one and is used to handle data Functional based method etc..So in one embodiment, as shown in figure 3, step S130 may include:
Whether S1301, the value for detecting title JSON data identical with the label of the html template of acquisition are functional based methods;
If S1302, functional based method, by the corresponding data of functional based method described in the functional based method operation, obtain new Value, and by new value be assigned to obtain the corresponding label of html template;
S1303, if not whether functional based method, detected value are valid datas;It whether is that valid data refers to that value is not It is special character;
If S1304, valid data, value is assigned to the corresponding label of html template obtained;
S1305, if not valid data, changes into escape character for value, escape character is assigned to the html template pair obtained The label answered.
As shown in figure 4, for the html interface structure generated according to html template automatic batch shown in Fig. 2.It can by such as Fig. 4 To find out, the structure of each pictorial information be it is identical, only data content is different, then only utilize a pictorial information Template, so that it may according to the template batch rendering data, generate this html interface, substantially increase front end development efficiency and Reduce the cost of exploitation.
Based on the same inventive concept, the present invention also provides a kind of JavaScript rendering devices, with reference to the accompanying drawing to this The specific embodiment of invention device is described in detail.
As shown in figure 5, a kind of JavaScript rendering device, comprising:
JSON data acquisition module 110 obtains JSON number according to the configuration parameter for obtaining incoming configuration parameter According to the title of the JSON data includes data type and mark;
Html template obtains module 120, for obtaining the data class of the JSON data from preset each html template The corresponding html template of type, each html template include the position where each label of data type and data type;
Data render module 130, it is each with the html template of acquisition respectively for obtaining title from the JSON data The identical JSON data of a label carry out data render according to the value of the JSON data of acquisition.
For different types of service, the html template needed is different.For different types of service, in HTML mould The attribute of different data types is added in plate, such as the attribute etc. of datatype=" item " is added in html template, just The energy automatic identification tag block replicates the JSON data that the template carrys out batch rendering corresponding data type as template.HTML mould Plate further includes the position where each label of data type, such as is added in the position that html template needs to load data Datafield=" data type _ ×××× " is used as label.
In one embodiment, the JSON data acquisition module 110 may include:
First data capture unit, for sending AJAX request according to the configuration parameter, acquisition is asked according to the AJAX Seek the JSON data of return;
And/or
Second data capture unit, for obtaining the JSON data of input according to the configuration parameter.
After the JSON data acquisition module 110 receives incoming configuration parameter, AJAX can be called to request JSON number According to can also directly input JSON data, AJAX can also be called to request JSON data and to directly input JSON data simultaneously It carries out.
After getting JSON data, html template obtains module 120 and finds HTML mould according to the data type of JSON data Plate.For the recycling of html template, in one embodiment, as shown in fig. 6, apparatus of the present invention can also include being connected to The html template obtains the template duplicating module 140 between module 120 and the data render module 130, and the template is multiple Molding block 140 is for replicating the html template of acquisition, the html template replicated.The so described data render module 130 obtain title JSON data identical with each label of the html template of duplication respectively from the JSON data, according to The value of the JSON data of acquisition carries out data render.
JSON data can be a data, is also possible to one and is used to handle functional based method of data etc..So In one embodiment, as shown in fig. 7, the data render module 130 may include:
Functional based method detection unit 1301, for detecting title JSON data identical with the label of the html template of acquisition Value whether be functional based method;
First data render unit 1302, for passing through letter described in the functional based method operation when value is functional based method The corresponding data of counting method obtain new value, and new value is assigned to the corresponding label of html template of acquisition;
Valid data detection unit 1303, for when value is not functional based method, whether detected value to be valid data;
Second data render unit 1304, for it is corresponding that value to be assigned to the html template obtained when value is valid data Label;
Third data render unit 1305, for when value is not valid data, value to be changed into escape character, by escape word Symbol is assigned to the corresponding label of html template obtained.
JavaScript rendering method of the present invention and device, when being compared to each other with the prior art, have following advantages:
1, the present invention relates to the data render of front end, logic and HTML that front end developer only needs focused data to obtain Structural style, without the realization that focused data renders, interface and data separating are handled, and modification styles, structure will not shadows The rendering of data is rung, such HTML code, JavaScript code all unusual simple and clears are easily modified, safeguard;
2, the present invention can realize that incoming configuration parameter can be called by JavaScript plug-in unit, not need to learn, can With batch rendering dynamic data, front end development efficiency is improved, avoids and needs to adjust data in different kinds of business exploitation The code of Rendering logic operation, reduces the cost of exploitation.
Each technical characteristic of embodiment described above can be combined arbitrarily, for simplicity of description, not to above-mentioned reality It applies all possible combination of each technical characteristic in example to be all described, as long as however, the combination of these technical characteristics is not deposited In contradiction, all should be considered as described in this specification.
The embodiments described above only express several embodiments of the present invention, and the description thereof is more specific and detailed, but simultaneously It cannot therefore be construed as limiting the scope of the patent.It should be pointed out that coming for those of ordinary skill in the art It says, without departing from the inventive concept of the premise, various modifications and improvements can be made, these belong to protection of the invention Range.Therefore, the scope of protection of the patent of the invention shall be subject to the appended claims.

Claims (8)

1. a kind of JavaScript rendering method, which is characterized in that comprising steps of
Incoming configuration parameter is obtained, JSON data are obtained according to the configuration parameter, the title of the JSON data includes number According to type and mark;
The corresponding html template of data type of the JSON data, each html template packet are obtained from preset each html template Include the position where each label of data type and data type;
Title JSON data identical with each label of the html template of acquisition respectively are obtained from the JSON data, according to The value of the JSON data of acquisition carries out data render.
2. JavaScript rendering method according to claim 1, which is characterized in that obtain name from the JSON data Claim JSON data identical with each label of the html template of acquisition respectively, data are carried out according to the value of the JSON data of acquisition The step of rendering includes:
Whether the value for detecting title JSON data identical with the label of the html template of acquisition is functional based method;
If functional based method, by the corresponding data of functional based method described in the functional based method operation, new value is obtained, and will be new Value be assigned to obtain the corresponding label of html template;
If not functional based method, whether detected value is valid data;
If valid data, value is assigned to the corresponding label of html template obtained;
If not valid data, changes into escape character for value, escape character is assigned to the corresponding label of html template obtained.
3. JavaScript rendering method according to claim 1, which is characterized in that obtain incoming configuration parameter, root Include: according to the step of configuration parameter acquisition JSON data
AJAX request is sent according to the configuration parameter, obtains the JSON data returned according to the AJAX request;
And/or
The JSON data of input are obtained according to the configuration parameter.
4. according to claim 1 to JavaScript rendering method described in 3 any one, it is characterised in that:
After the corresponding html template of data type for obtaining the JSON data in preset each html template, from described Title is obtained in JSON data respectively before JSON data identical with each label of the html template of acquisition, further includes step It is rapid: the html template of acquisition to be replicated, the html template replicated;
After acquisition title in the JSON data respectively JSON data identical with each label of the html template of acquisition, It further comprises the steps of: and obtains title JSON number identical with each label of the html template of duplication respectively from the JSON data According to according to the value of the JSON data of acquisition progress data render.
5. a kind of JavaScript rendering device characterized by comprising
JSON data acquisition module obtains JSON data according to the configuration parameter for obtaining incoming configuration parameter, described The title of JSON data includes data type and mark;
Html template obtains module, and the data type for obtaining the JSON data from preset each html template is corresponding Html template, each html template include the position where each label of data type and data type;
Data render module, for from the JSON data obtain title respectively with each label phase of the html template of acquisition Same JSON data carry out data render according to the value of the JSON data of acquisition.
6. JavaScript rendering device according to claim 5, which is characterized in that the data render module includes:
Functional based method detection unit, for detect title JSON data identical with the label of the html template of acquisition value whether It is functional based method;
First data render unit, for passing through functional based method pair described in the functional based method operation when value is functional based method The data answered obtain new value, and new value is assigned to the corresponding label of html template of acquisition;
Valid data detection unit, for when value is not functional based method, whether detected value to be valid data;
Second data render unit, for when value is valid data, value to be assigned to the corresponding label of html template obtained;
Escape character is assigned to obtain by third data render unit for when value is not valid data, value to be changed into escape character The corresponding label of the html template taken.
7. JavaScript rendering device according to claim 5, which is characterized in that the JSON data acquisition module packet It includes:
First data capture unit, for sending AJAX request according to the configuration parameter, acquisition is returned according to the AJAX request The JSON data returned;
And/or
Second data capture unit, for obtaining the JSON data of input according to the configuration parameter.
8. according to JavaScript rendering device described in claim 5 to 7 any one, it is characterised in that:
It further include the template duplicating module being connected between the html template acquisition module and the data render module, it is described Template duplicating module is for replicating the html template of acquisition, the html template replicated;
The data render module obtained from the JSON data title respectively with each label phase of the html template of duplication Same JSON data carry out data render according to the value of the JSON data of acquisition.
CN201510874942.7A 2015-12-01 2015-12-01 JavaScript rendering method and device Active CN105404514B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510874942.7A CN105404514B (en) 2015-12-01 2015-12-01 JavaScript rendering method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510874942.7A CN105404514B (en) 2015-12-01 2015-12-01 JavaScript rendering method and device

Publications (2)

Publication Number Publication Date
CN105404514A CN105404514A (en) 2016-03-16
CN105404514B true CN105404514B (en) 2019-02-15

Family

ID=55470017

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510874942.7A Active CN105404514B (en) 2015-12-01 2015-12-01 JavaScript rendering method and device

Country Status (1)

Country Link
CN (1) CN105404514B (en)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105827733B (en) * 2016-05-12 2019-06-07 珠海豹趣科技有限公司 A kind of method, apparatus and electronic equipment of propelling data
CN106407339A (en) * 2016-09-05 2017-02-15 用友优普信息技术有限公司 Hyper text markup language (HTML) file distributed releasing method and HTML file distributed releasing apparatus
CN107608734A (en) * 2017-09-22 2018-01-19 深圳易嘉恩科技有限公司 JavaScript rendering intents
CN108664245B (en) * 2018-04-27 2022-08-05 厦门南讯股份有限公司 Method and device for generating web page interface based on JSON self-description structure
CN110895463B (en) * 2018-09-13 2023-06-20 百度在线网络技术(北京)有限公司 Label processing method, device, equipment and computer readable storage medium
CN111258675A (en) * 2020-01-15 2020-06-09 平安银行股份有限公司 Rendering method, device and equipment of shared front-end component and storage medium
CN115981750B (en) * 2023-02-09 2023-10-20 中远海运科技股份有限公司 Component configuration method based on recursion algorithm

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103379127A (en) * 2012-04-12 2013-10-30 阿里巴巴集团控股有限公司 Data interaction method and apparatus between server and client
CN103823872A (en) * 2014-02-27 2014-05-28 北京金山网络科技有限公司 Information pushing method and device
CN104158836A (en) * 2014-06-23 2014-11-19 浙江大学城市学院 Method for rendering mobile application interface through data
CN104598616A (en) * 2015-01-30 2015-05-06 百度在线网络技术(北京)有限公司 Page loading method, page loading device, server and page loading system

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140310590A1 (en) * 2013-03-13 2014-10-16 Bby Solutions, Inc. Presentation layer software development kit for creation of dynamic webpages

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103379127A (en) * 2012-04-12 2013-10-30 阿里巴巴集团控股有限公司 Data interaction method and apparatus between server and client
CN103823872A (en) * 2014-02-27 2014-05-28 北京金山网络科技有限公司 Information pushing method and device
CN104158836A (en) * 2014-06-23 2014-11-19 浙江大学城市学院 Method for rendering mobile application interface through data
CN104598616A (en) * 2015-01-30 2015-05-06 百度在线网络技术(北京)有限公司 Page loading method, page loading device, server and page loading system

Also Published As

Publication number Publication date
CN105404514A (en) 2016-03-16

Similar Documents

Publication Publication Date Title
CN105404514B (en) JavaScript rendering method and device
US10824691B2 (en) Page rendering method, device, and data storage medium
CN106569824B (en) Method and apparatus, the method and apparatus of page rendering of page data compiling
CN107608889B (en) Method and system for automatically generating test script
CN104158836B (en) A kind of method by data render mobile application interface
CN104267947B (en) A kind of editor's method of pop-up picture and pop-up picture editor's device
CN101488151B (en) System and method for gathering website contents
US8281284B2 (en) Method and software for editing web documents
CN105138752B (en) Intelligent substation SCD file land parcel change trace differentiation compares and methods of exhibiting
CN102880708B (en) Be used for the system and method for the visual design that realizes html page
CN107273122A (en) Based on decoupling mechanism can iteration set up operation system method and its terminal
CN104731815B (en) A kind of method for drafting and device of web page element
CN102831190B (en) A kind of method that CML files are browsed in low side devices
CN106354492A (en) Automatic code generation method and system capable of rapidly adjusting transaction process connection
CN109145231A (en) A kind of generation method, device and the electronic equipment of interface element identifier
CN103440151A (en) Method and apparatus for dynamically loading Web page
CN104572072A (en) MVC (model view controller) mode-based language transformation method and equipment for program
CN108132879A (en) Automated software testing method, platform, terminal and medium
CN107728999A (en) A kind of App, the method and system of small routine interface simulation
CN112417338B (en) Page adaptation method, system and equipment
CN109710301A (en) A kind of method and terminal of automatic relatively interface document difference
CN105574092A (en) Information mining method and device
CN104268163B (en) A kind of realization method and system of webmaster network element configuration interface
CN109445771A (en) A kind of off line network layers block code Auto-Generation Tool of CS framework and method
CN108984632A (en) A kind of webpage setting method and device

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 511449 Guangzhou City, Guangdong Province, Panyu District, South Village, Huambo Business District Wanda Plaza, block B1, floor 28

Applicant after: Guangzhou Huaduo Network Technology Co., Ltd.

Address before: 510655, Guangzhou, Whampoa Avenue, No. 2, creative industrial park, building 3-08,

Applicant before: Guangzhou Huaduo Network Technology Co., Ltd.

GR01 Patent grant
GR01 Patent grant