CN107357817B - It is a kind of towards the Web page module design of JSON and its Asynchronous loading method - Google Patents

Abstract

The invention discloses a JSON-oriented webpage modular design and its asynchronous loading method. HTML webpage layouts and webpage elements are encapsulated into different JSON objects. Modular design and dynamic modification; using JSON objects to represent HTML webpage layout and webpage elements can further reduce data redundancy and improve network transmission and response speed of webpage codes. The method of the invention is suitable for Web software design and has important application value in the field of software development.

Description

A JSON-oriented webpage modular design and its asynchronous loading method

technical field

The invention relates to the technical field of computer networks, in particular to a JSON-oriented web page modular design and an asynchronous loading method thereof.

Background technique

JavaScript Object Notation (JSON) is a grammatical unit defined in the JavaScript programming language, and is currently often used as a lightweight data exchange format. JSON can be expressed as a set of name-value pairs in text format, which is independent of specific programming languages and can be parsed and automatically generated by most common programming languages; JSON syntax is concise and there is no data redundancy, which can greatly improve transmission and communication. responding speed. JSON is easy to use, especially in web front-end development, the data in JSON format can be converted into JavaScript internal objects for program calls through the eval method of JavaScript. The conversion method is defined and unified in browsers with different cores , does not need to be manually written, and does not need to consider the differences of different kernel browsers. The languages commonly used on the web server side also provide corresponding JSON parsers, which can easily parse the data in JSON format sent by the client without resorting to other API tools.

In a typical web application, according to the request message of the web client, the web server usually needs to dynamically generate HTML webpage code as a response message and return it to the web client through the network. However, the traditional way to generate HTML web page code is treated as a long string, and the parsing of the string is relatively cumbersome. When a web page element needs to be modified, it is very difficult to locate the corresponding HTML tags and tag attributes in the string. ; At the same time, it will be very difficult to modify the layout or structure of the web page in the HTML code expressed in string form; in addition, there is a lot of data redundancy in the HTML code expressed in string form, for example, each web page element needs to include the start Tags and termination tags transmit HTML codes in the form of strings directly on the network, which will reduce the transmission and response speed of network communications. Therefore, a more efficient way of representing and designing web pages is urgently needed in the field of web application development.

Contents of the invention

In view of the problems existing in the above-mentioned prior art, the object of the present invention is to provide a JSON-oriented web page modular design and an asynchronous loading method thereof, so as to overcome the difficulty in parsing and modifying the HTML code generated in the existing web page design method and Data redundancy and other defects, realize the modular design and asynchronous loading of web pages by using JSON objects.

In order to achieve the above tasks, the present invention adopts the following technical solutions:

A JSON-oriented web page modular design and its asynchronous loading method, comprising the following steps:

Step 1, determine the layout structure of the webpage, and the webpage elements that need to be included in each part of the layout structure;

Step 2, according to the webpage layout structure and webpage elements determined in step 1, define a webpage layout template and corresponding webpage elements in the form of JSON objects; the webpage layout template includes two types of components: webpage layout container and webpage layout entry;

Step 3, assembling the defined webpage layout container, webpage layout items and webpage elements into a webpage JSON object;

Step 4, create a global waiting queue of HTML DOM object type;

Step 5: traverse all objects in the template.childs property of the JSON object, judge whether the current object is a webpage layout template or a webpage element during the traversal process, and then perform step 6 or 7 according to the judgment result; when the traversal is completed, turn to step 10 ;

Step 6, if it is a web page layout template, continue to traverse all objects in its childrens property, and save the HTML DOM objects generated when traversing each object, until the traversal is complete, according to all returned HTML DOM objects, and the current web page The component attribute of the layout template generates the HTML DOM object corresponding to the layout template of the web page, and then returns to step 5;

Step 7, if it is a web page element, check whether the script code corresponding to the scriptAddr attribute of the web page element is loaded, and if it is loaded, execute the script code, create the HTML DOM object corresponding to the web page element and return it to its upper level Web page layout template, and return to step six; otherwise, go to step eight;

Step 8, determine whether the script object corresponding to the current web page element has been created, if so, return an empty HTML DOM object to its upper-level web page layout template, and return to step 6; otherwise, execute step 9;

Step 9: Create a script object corresponding to the current web page element, assign the value of the scriptAddr attribute of the current web page element to the src attribute of the script object, add the script object to the global waiting queue created in step 4, and return an empty HTML DOM object to its parent page layout template, and return to step six;

Step ten, call the web page rendering engine interface provided by the web browser, and render the web page layout template created in step six and the HTML DOM objects contained therein;

Step 11, detecting whether the global waiting queue is empty, if yes, all the content of the web page is loaded, then exit the method; otherwise, execute step 12;

Step 12, detect whether there is a script object that has been loaded in the global waiting queue, if so, delete the script object from the queue, and return to step 11; otherwise, execute step 13;

Step 13, monitor the occurrence of the onload event of the script object at the head of the queue in the global waiting queue, and return to step 5 when the onload event of the script object occurs.

Further, in the second step, the layout templates of each section of the web page are defined by web page layout items, and the web page layout items must be defined in the web page layout container.

Further, in step 3, the assembly rule is: the web page layout item must be defined in the children attribute of the web page layout container, multiple web page layout items can be defined in a web page layout container; web page elements must be defined in the web page layout item In the childrens attribute of a webpage element corresponds to a webpage layout entry; in the childrens attribute of a webpage layout entry, a webpage layout container can be further nested.

Compared with the prior art, the present invention has the following technical characteristics:

1. The present invention uses JSON object to represent HTML webpage layout and webpage element, and webpage layout template and webpage element are encapsulated into different JSON objects, and these JSON objects are relatively independent and can be nested definition, thereby can realize the dynamic modification of webpage conveniently;

2. Using JSON objects to represent HTML web page layout and web page elements can further reduce data redundancy and improve the network transmission and response speed of web page codes. The method of the invention is suitable for web software design and has important application value in the field of software development.

Description of drawings

Fig. 1 is the flowchart of the inventive method;

Detailed ways

The present invention uses JSON objects to represent HTML web page layout and web page elements, and uses the parsing function of JavaScript programming language to directly convert web page JSON objects into internal objects of JavaScript language, thereby reducing the parsing difficulty of web page codes; When designing web pages, modular design ideas are adopted. Web page layout templates and web page elements are encapsulated into different JSON objects. These JSON objects are relatively independent and can be nested and defined, so that dynamic modification of web pages can be easily realized; HTML web pages use JSON object Formal representation can further reduce data redundancy and improve network transmission and response speed of web page code. Detailed steps of the present invention are as follows:

Step 1, the designer determines the layout structure of the webpage and the webpage elements contained in each part of the layout structure of the webpage. The layout structure of a web page refers to the divisions of HTML web pages, the size of each board, and the relative position between each board. The web page element refers to an HTML tag element used in a certain section of an HTML web page, and common HTML tags include div, span, and table.

Step 2, according to the web page layout structure and determined web page elements determined in step 1, define a web page layout template in the form of a JSON object, and define corresponding web page elements in the form of a JSON object;

The web page layout template includes two types of components, template-container and template-item, where template-container is the web page layout container, and template-item is the web page layout item; the layout templates of each section of the web page are defined by template-item, and template-item It must be defined in the template-container; according to the layout structure of the web page, multiple template-items can be defined in one template-container.

The web page layout template is expressed in the form of a JSON object, as shown in the following formula:

{"name":"","version":"","template":Object{...}} (1)

Among them, name is a String type, indicating the layout template name; version is a String type, indicating the version number of the web page layout template; template is a JSON object type, indicating the object in the web page layout template, and template-container is defined in this attribute.

The web page layout container template-container is expressed in the form of a JSON object, as shown in the following formula:

Among them, component is of String type, indicating the HTML tag name used by the layout container, such as div, span, etc.; props is of JSON object type, which defines the className attribute, className is of String type, indicating the type of the layout template component, defined here is "template-container"; children is an array type, the template attribute in the array element is a JSON object type, and the template-item of the webpage layout item is defined in this attribute.

The web page layout entry template-item is expressed in the form of a JSON object, as shown in the following formula:

Among them, component is of String type, indicating the HTML tag name used by layout items, such as div, span, etc.; props is of JSON object type, which defines the className and style attributes, and className is of String type, indicating the type of the layout template component. is defined as "template-item", and style is a String type, which indicates the rendering attribute of the layout item displayed on the web page, which can be defined in the form of CSS style rules; children is an array type, and the web pages stored in the layout item Element JSON object.

The web page elements are expressed in the form of JSON objects, as shown in the following formula:

Among them, name is of String type, indicating the name of the webpage element; version is of String type, indicating the version number of the webpage element; scriptAddr is of String type, indicating the URL address of the JavaScript script code that parses the webpage element, and the code is based on the props attribute data of the webpage element Dynamically generate HTML DOM objects; props is a JSON object type, indicating the properties of web page elements, including internal members such as src and text, where src is of String type, indicating the URL address of the resource referenced by the web page element, and text is of String type, indicating the URL address of the web page element Text description; hashName is of String type, indicating the Hash value of the web page element.

Step 3, assemble the defined webpage layout container, webpage layout items and webpage elements into a webpage JSON object; the assembly rules are: webpage layout entries must be defined in the children attribute of the webpage layout container, and multiple webpage layout containers can be defined A webpage layout entry; webpage elements must be defined in the children attribute of a webpage layout entry, and a webpage element corresponds to a webpage layout entry; the webpage layout container can be further nested in the children attribute of a webpage layout entry. The assembly process is further illustrated with the example below.

For example, for a web page with a top-down structure, its upper part and lower part respectively contain a web page element. The JSON object corresponding to the above web page is as follows:

In the web page, the relative positions of the upper and lower web page layout items are respectively controlled by the CSS style rules defined in the style attribute in the props attribute of the web page layout item. The JavaScript script code defined in the scriptAddr attribute of the webpage element mainly uses the interface provided by the web browser to generate the HTML DOM object corresponding to the webpage element.

Step 4, starting from this step, the asynchronous loading process of the above-mentioned web page JSON object will be realized. First, create a global waiting queue of HTML DOM object type. The global waiting queue is an Array type of JavaScript, and the elements in the Array are all HTML DOM objects. Using the characteristics of the JavaScript language, the index of the element in the global waiting queue can be represented by String.

Step 5: traverse all objects in the template.childs property of the JSON object, judge whether the current object is a webpage layout template or a webpage element during the traversal process, and then perform step 6 or 7 according to the judgment result; when the traversal is completed, turn to step 10 ;

Step 6, if it is a web page layout template, continue to traverse all objects in its childrens property, and save the HTML DOM objects generated when traversing each object, until the traversal is complete, according to all returned HTML DOM objects, and the current web page The component attribute of the layout template generates the HTML DOM object corresponding to the layout template of the web page, and then returns to step 5;

The HTML DOM object corresponding to the generated web page layout template is created by the DOM interface function document.createDocumentFragment() of the web browser, and the web page layout template includes all HTML DOM objects returned when traversing all objects in its childrens attribute , and the HTML DOM object specified by the component attribute of the page layout template.

The HTML DOM object generated by traversing all objects in the childrens attribute of the web page layout template is added to the HTML DOM object corresponding to the web page layout template through the DOM interface function document.createDocumentFragment().appendChild() of the web browser.

Step 7, if it is a web page element, check whether the script code corresponding to the scriptAddr attribute of the web page element is loaded, and if it is loaded, execute the script code, create the HTML DOM object corresponding to the web page element and return it to its upper level Web page layout template, and return to step six; otherwise, perform step eight; the described creation of the corresponding HTML DOM object of the web page element is realized by calling the DOM interface function document.createElement () of the web browser, wherein the created web page The HTML DOM object corresponding to the element is named after the hashName attribute value of the web page element.

Detecting whether the script code corresponding to the scriptAddr attribute of the web page element is loaded is completed in the following way: Detect whether the DOM object collection contained in the window object of the web browser already contains a DOM object whose name is the value of the hashName attribute of the web page element; DOM object, the corresponding script code has been loaded; otherwise, it has not been loaded.

Step 8, judge whether the script object corresponding to the current web page element has been created, if so, return an empty HTML DOM object to its upper-level web page layout template, and return to step 6; otherwise, execute step 9; The script object corresponding to the webpage element refers to a standard HTML DOM object, which contains the JavaScript code for creating the webpage element, and the script object can be created by the DOM interface function document.createElement() provided by the web browser.

Step 9: Create a script object corresponding to the current web page element, assign the value of the scriptAddr attribute of the current web page element to the src attribute of the script object, add the script object to the global waiting queue created in step 4, and return an empty HTML DOM object to its upper-level webpage layout template, and return to step six; when the script object is added to the global waiting queue created in step five, the hashName attribute value of the webpage element corresponding to the script object is used as the global waiting queue The element index of the queue, the script object is used as the element of the global waiting queue. An empty HTML DOM object is an empty text node created by the DOM interface function document.createTextNode() of the web browser.

Step ten, call the webpage rendering engine interface provided by the web browser, and render the webpage layout template created in step six and the HTML DOM objects contained therein; the webpage rendering engine interface provided by the web browser refers to the webpage rendering engine interface of the web browser The DOM interface function document.body.appendChild() needs to use the web page layout template created in step 7 as a parameter when this function is called.

By calling document.body.appendChild(), the created web page layout template and the HTML DOM objects contained therein are rendered.

Step 11, detecting whether the global waiting queue is empty, if yes, all the content of the web page is loaded, then exit the method; otherwise, execute step 12;

Step 12, detect whether there is a script object that has been loaded in the global waiting queue, if so, delete the script object from the queue, and return to step 11; otherwise, execute step 13;

The detection of whether the loading of the script object is completed is realized by detecting whether the DOM object corresponding to the index value of the script object in the global waiting queue appears in the DOM object collection contained in the window object of the Web browser.

Step 13, monitor the occurrence of the onload event of the script object at the head of the queue in the global waiting queue, and return to step 5 when the onload event of the script object occurs. The monitoring of the occurrence of the onload event of the script object at the head of the queue in the global waiting queue refers to the monitoring of the onload event of the script object by using the HTML event monitoring mechanism of the JavaScript language.

Claims (3)

1. It is 1. a kind of towards the Web page module design of JSON and its Asynchronous loading method, which is characterized in that include the following steps：

   Step 1 determines the web page element included required for various pieces in page layout format structure and layout structure；

   Step 2, the page layout structure determined according to step 1 and web page element, use the formal definition webpage of JSON objects Layout templates and corresponding web page element；The page layout template includes page layout container and page layout item This two class component of mesh；

   The page layout container of definition, page layout entry and web page element are assembled into webpage JSON objects by step 3；

   Step 4 creates the global waiting list of a HTML DOM object type；

   Step 5 traverses all objects in the template.childs attributes of JSON objects, judges in ergodic process current Object is page layout template or web page element, then performs step 6 or step 7 according to judging result；When traversal is completed When, turn to step 10；

   Step 6 if page layout template, then continues to traverse all objects in its childs attribute, and it is every to preserve traversal The HTML DOM objects generated during a object when being completed until traversing, according to all HTML DOM objects of return and are worked as The component attributes of preceding page layout template, the corresponding HTML DOM objects of generation page layout template, are then back to step Five；

   Step 7 if web page element, then detects whether the corresponding scripted code of web page element scriptAddr attributes adds It carries and completes, if loading is completed, perform the scripted code, create the corresponding HTML DOM objects of the web page element and return to Its upper level page layout template, and return to step six；Otherwise, step 8 is performed；

   Step 8 judges whether to have created script objects corresponding with current web page element, if it is returns to a sky HTML DOM objects to its upper level page layout template, and return to step six；Otherwise, step 9 is performed；

   Step 9, creates corresponding with current web page element script objects, and by current web page element scriptAddr attributes Value be assigned to the src attributes of the script objects, which is added in into the global waiting list created in step 4 In, an empty HTML DOM object is then back to its upper level page layout template, and return to step six；

   Step 10 calls the webpage rendering engine interface of Web browser offer, the page layout mould created in rendering step six Plate and HTML DOM objects wherein included；

   Step 11 detects whether the global waiting list is empty, and if it is webpage all the elements loading is completed, then is moved back Go out this method；Otherwise step 12 is performed；

   Step 12 is detected in global waiting list with the presence or absence of the script objects for having completed loading, if so, then from queue Middle deletion script objects, and return to step 11；Otherwise, step 13 is performed；

   Step 13, the onload events for monitoring the script objects for being located at queue head in global waiting list occur, when this After the onload events of script objects occur, then return to step five.
2. 2. as described in claim 1 towards the Web page module design of JSON and its Asynchronous loading method, which is characterized in that institute In the step of stating two, the layout templates of each plate of webpage are defined with page layout entry, and page layout entry must define In page layout container.
3. 3. as described in claim 1 towards the Web page module design of JSON and its Asynchronous loading method, which is characterized in that institute In the step of stating three, the rule of assembling is：Page layout entry must be defined in the childs attributes of page layout container, and one It can define multiple page layout entries in a page layout container；Web page element must be defined on the childs of page layout entry In attribute, a web page element corresponds to a page layout entry；It can also be into the childs attributes of page layout entry One step nesting defines page layout container.