Method and device for binding HTML (Hypertext Markup Language) element rendering

Abstract

The invention relates to the field of JavaScript, and particularly provides a method and a device for binding HTML (Hypertext Markup Language) element rendering, comprising the following steps: S1, creating a js file named render; s2, declaring a class in the js file, and naming the class as Render; s3, a construction function constructor is written in the Render, the function constructor needs a parameter data, and the data is a Json object; the key of the data is the id attribute value of the HTML element, and the value of the data corresponds to data to be rendered; s4, in the construction function, declaring that pointing to render, and assigning this; the parameter data of the construction function is put into the attribute data of the render; an empty Json object is prepared in the render attribute, the attribute is named as htmls, and the Json object is used for storing rendering elements; and S5, processing the data in the construction function. Compared with the prior art, the method is high in usability, easy to operate and simple in binding configuration, and the complexity of the data rendering process is reduced.

Description

Technical Field

[0001] The present invention relates to the field of JavaScript, and in particular provides a method and a device for rendering a bound HTML element. Background Art

[0002] In the process of H5 web front-end development, when we obtain data to render page elements, the existing technology uses the DOM layer method to obtain or create HTML elements to place the corresponding data in a reasonable rendering position. The code of the whole process will be somewhat complicated and cumbersome. When there are multiple data to be rendered, the same code processing may appear.

[0003] Although there is an existing Vue framework to handle the problem of data and page binding, it increases the learning cost and may increase the development time cost if you are not proficient in it. Summary of the invention

[0004] The present invention aims at the above-mentioned deficiencies of the prior art and provides a method for binding HTML elements for rendering with strong practicability.

[0005] A further technical task of the present invention is to provide a device for rendering bound HTML elements that is reasonably designed and safe and applicable.

[0006] The technical solution adopted by the present invention to solve its technical problem is:

[0007] A method for binding HTML element rendering, comprising the following steps:

[0008] S1. First, create a js file, and name the js file render;

[0009] S2. Declare a class in the js file and name it Render;

[0010] In S3 and Render, write the constructor function. The constructor function requires a parameter data, which is a Json object. The key of data is the id attribute value of the HTML element, and the value of data corresponds to the data to be rendered.

[0011] S4. In the constructor, declare that pointing to render and assign this value; put the parameter data of the constructor into the attribute data of render; prepare an empty Json object in the render attribute, and name the attribute htmls to store the rendered elements;

[0012] S5. Process data in the constructor.

[0013] Furthermore, in step S5, it further includes:

[0014] S5.1. Traverse the key values ​​of data. Each key is the id of the HTML element. The key is named id. Each value is the data rendered by the corresponding element. The value is named value. The method for monitoring when data changes is called. The method is named dataWatch. The method for processing HTML element rendering according to the data type after data changes is called. The method is named typeDistribution.

[0015] S5.2. Define the dataWatch method for monitoring data transformation. The id of data traversal needs to be passed into this method.

[0016] S5.3, define the typeDistribution method for processing HTML element rendering according to the data type after data changes, and pass in the id and value of the data traversal;

[0017] S5.4. Define the HTML element rendering method stringValueHandle for string type data;

[0018] S5.5. Define the HTML element rendering method objValueHandle for object type data;

[0019] S5.6. Define the HTML element rendering method arrayValueHandle for array type data;

[0020] S5.7, define the method appendValue to put the real data in data into the corresponding slot of html;

[0021] S5.8, define the method appendIfValue for processing the conditional judgment slot;

[0022] S5.9, define the method appendForValue for processing the loop slot, pass in the id, the html to be processed, and the parent settings;

[0023] S5.10, define the method appendNormalValue for processing normal value slots, pass in id, html to be processed, and parent settings;

[0024] S5.11, define the findValue method to find specific data through the attribute path, pass in the id, the path in the attribute data, and the parent setting;

[0025] S5.12. Define the method initHtml to process the HTML of the page element corresponding to the id and pass in the id.

[0026] Furthermore, in step S5.2, the following processing is performed:

[0027] S5.2.1. Prepare the variable oldValue in advance and assign that.data[id] to oldValue;

[0028] S5.2.2. Use the Object.defineProperty method to monitor the corresponding data changes. Pass the data in the render attribute and the id in the middle of the data to be monitored to the first two parameters of Object.defineProperty in turn, and configure the get and set methods in the third parameter as follows:

[0029] (1) The get method returns the oldValue prepared in advance in this method;

[0030] (2) Use the set method to process the changes;

[0031] In step S5.3, the following processing is performed:

[0032] Use typeof and Array.isArray to determine the type of value. If it is an array type, call the HTML element rendering method of the array type data, named arrayValueHandle;

[0033] If it is an object type, the HTML element rendering method of the object type data is called, named objValueHandle; if it is another data type, the HTML element rendering method of the string type data is called, named stringValueHandle.

[0034] Furthermore, in step S5.4, the following processing is performed:

[0035] S5.4.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0036] S5.4.2, determine whether elem is null, if not, continue;

[0037] S5.4.3. Use document.getElementById(id).innerHTML and pass the value in to achieve page rendering.

[0038] Furthermore, in step S5.5, the id and value need to be passed in and processed as follows:

[0039] S5.5.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0040] S5.5.2, determine whether elem is null, if not, continue;

[0041] S5.5.3, declare the json object parent, and store the value of id and value as a key-value pair;

[0042] S5.5.4, declare a variable html, receive the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and name it initHtml;

[0043] S5.5.5. Call the method that puts the real data in data into the corresponding slot of html, name it appendValue, and pass in id, htm and parent;

[0044] The slot here is the place contained by {{ and}} in the element of the corresponding id in HTML. The content and rules in {{}} are as follows:

[0045] (1) {{for(data item name of a single loop, data to be looped)………………for}} The data enclosed by this symbol is the loop rendering data, and the data item name of the single loop in brackets can be customized;

[0046] (2) {{if (a conditional statement that complies with JavaScript syntax)………………if}} The content wrapped by this symbol is processed based on whether the conditional statement is correct or not, and whether to render the wrapped content;

[0047] (3){{………………}}This symbol is a value symbol. If the bound data is data, and you want to get the name attribute, you can get it through {{name}}. If it is in a loop symbol, if the name of the looped item is item, you can get it through {{item.name}};

[0048] (4) The “………………” in the above description refers to the content enclosed by the symbol;

[0049] S5.5.6. Assign the result of calling appendValue to elem.innerHTML to complete page rendering.

[0050] Furthermore, in step S5.6, the id and value need to be passed in and processed as follows:

[0051] S5.6.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0052] S5.6.2, determine whether elem is null, if not, continue;

[0053] S5.6.2. Declare a variable html, which receives the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and names it initHtml;

[0054] S5.6.2, traverse the array value, declare the json object parent, store the value of id and each traversed value as a key-value pair, call appendValue, and pass id, html, and value to the processed HTML, and complete the page rendering by accumulating elem.innerHTML;

[0055] In step S5.7, you need to pass in the id, the html to be processed, and the parent settings, which are named: id, str, parent in sequence. The specific processing is as follows:

[0056] S5.7.1. Use the match function to capture the strings "{{for" and "{{if" in str

[0057] S5.7.2. Determine whether "{{if" exists. If so, call the method for processing the conditional judgment slot, give priority to the conditional judgment processing, name it appendIfValue, and pass in id, str and parent;

[0058] S5.7.3, call the method for processing the loop slot, named appendForValue, and pass in id, str and parent;

[0059] S5.7.4. Call the method for processing normal value slots, appendNormalValue, and enter id, str and parent.

[0060] Furthermore, in step S5.8, for the convenience of explanation, they are named as id, str, and parent, and the specific processing is as follows:

[0061] S5.8.1. Declare a variable isFindEnd to determine whether the sign symbol of the judgment slot is found;

[0062] S5.8.2. Declare a variable ifIndex to store the position of the start marker of the slot;

[0063] S5.8.3. Declare a variable endIndex to store the position of the slot end marker.

[0064] S5.8.4, declare the variable entities to store the converted data of HTML escape characters;

[0065] S5.8.5, determine whether there are start and end marks in the str to be processed, if not, directly return the original str;

[0066] S5.8.6. Use the replace method combined with the isFindEnd control to match the position and number of "{{if" and "if}}" and find the position of the "if}} corresponding to the first "{{if";

[0067] S5.8.7, use the substring function to obtain the found ifIndex and endIndex to intercept the internal content of the slot and store it in the content variable;

[0068] S5.8.8, use the substring function to obtain the content in the first “()” as the judgment condition and store it in the condition variable;

[0069] S5.8.9, traverse the attributes of parent, and then traverse the attributes of each attribute, and combine the two attributes. Except for the data with the same id as the parent attribute, the rest are combined into the attributes of parent, ".", the attribute form of the attribute of parent. If the id is the same as the data of the parent attribute, directly obtain the attribute of parent;

[0070] S5.8.10, use the combined result as the replacement character and replace it with the value in the specific data through the replace function;

[0071] S5.8.11, replace the HTML and entities in the processed condition with actual characters and store them in condition;

[0072] S5.8.12. Use the substring function to obtain the content from str to ifIndex and store it in the befStr variable;

[0073] S5.8.13. Use the substring function to obtain the content between the end and endIndex in str and store it in r in the atrSt variable;

[0074] S5.8.14. Use the substring function to obtain the content from ")" to the end of content and store it in r of the betStr variable;

[0075] S5.8.15. Execute eval(condition), and return the result by combining the results. If correct, return befStr+betStr+aterStr; if incorrect, return befStr+aterStr.

[0076] Furthermore, in step S5.9, for the convenience of explanation, they are named as: id, str, parent, and are specifically processed as follows:

[0077] S5.9.1. Declare a variable isFindEnd to determine whether the sign symbol of the loop slot is found;

[0078] S5.9.2. Declare a variable forIndex to store the position of the loop slot start marker;

[0079] S5.9.3, declare a variable endIndex, which is used to store the position of the loop slot end marker;

[0080] S5.9.4. Use the replace method combined with the isFindEnd control to match the position and number of "{{for" and "for}}" and find the position of "for}}" corresponding to the first "{{for";

[0081] S5.9.5, use the substring function to obtain the found forIndex and endIndex to intercept the internal content of the slot and store it in the content variable;

[0082] S5.9.6. Use the substring function to obtain the content from str to forIndex and store it in the befStr variable;

[0083] S5.9.7. Use the substring function to obtain the content from the end to endIndex in str and store it in the atrStr variable r;

[0084] S5.9.8. Use the substring function to obtain the content from ")" to the end of content and store it in the betStr variable r;

[0085] S5.9.9, use the substring function to obtain the content in "()" in content, and obtain the data item name of a single loop and the data name that needs to be looped by splitting and removing spaces;

[0086] S5.9.10, call the findValue method to find the specific data to be looped through id, the name of the data to be looped, and the parent parent, and store it in the variable forValue;

[0087] S5.9.11, loop forValue, first store the data item name of a single loop and the corresponding forValue in the parent configuration, then use the replace function to replace the data in {{}} with the actual data in the corresponding forValue, and render it in the replacement process by combining the findValue function with the judgment;

[0088] S5.9.12, call the appendValue function on each result of the forValue loop and process the slot content again;

[0089] S5.9.13, loop forValue to get each result concatenation;

[0090] S5.9.14. Call the appendValue function with the final result to process the slot content again;

[0091] S5.9.15. Return the processing result.

[0092] Furthermore, in step S5.10, for the convenience of explanation, they are named as: id, str, parent, and are specifically processed as follows:

[0093] Use the replace function to replace the data in {{}} with the actual data, and use forValue to find the data and replace it;

[0094] In step S5.11, for the convenience of explanation, they are named as: id, path, parent, and the specific processing is as follows:

[0095] S5.11.1. Declare variable obj to store specific data, split path by “.”, and if the length of the array after splitting is greater than 1, obtain the first array data after splitting and use it as the attribute of parent to obtain the value. If the length of the array after splitting is less than 1, use id as the attribute of parent to obtain the value, and assign the obtained value to obj;

[0096] S5.11.2, declare the variable value and assign it an empty string;

[0097] S5.11.3, declare the loop flag index and assign it 0;

[0098] S5.11.4, declare codes, store the path and replace "{{" and "}}" with the array separated by ".", if the data after the path is separated by "." is greater than 1, exclude the first data;

[0099] S5.11.5, loop through obj, and when index is less than the length of codes, enter the loop body;

[0100] S5.11.6, in the loop body, obtain obj[codes[index]] through value, then store obj[codes[index]] through obj, and finally read the data of path in obj, and increase index by 1 each time through the loop;

[0101] S5.11.7. Determine whether obj is undefined. If so, return an empty string. If not, return obj.;

[0102] In step S5.12,

[0103] S5.12.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0104] S5.12.2, determine whether that.htmls[id] is empty;

[0105] S5.12.3, if it is empty, assign elem.innerHTML to that.htmls[id] for storage;

[0106] S5.12.4, change elem.innerHTML to an empty string;

[0107] S5.12.5. Return that.htmls[id].

[0108] A device for binding HTML element rendering, comprising: at least one memory and at least one processor;

[0109] The at least one memory is used to store a machine-readable program;

[0110] The at least one processor is used to call the machine-readable program to execute a method for binding HTML element rendering.

[0111] Compared with the prior art, the method and device for binding HTML element rendering of the present invention have the following outstanding beneficial effects:

[0112] The present invention requires the introduction of render.js to simplify the page rendering process. Object render is declared through new Render(), and the object {"test-obj":{name:"name"}} is passed in during the declaration. At this time, {{name}} inside the element with id test-obj on the page will be replaced with "name". If render.data["test-obj"]=:{name:"name2"} is used later, there is no need to manually render the HTML element, and the "name" on the page will become "name2". It is easy to use, simple to operate, and simple to configure the binding, reducing the complexity of the data rendering process. BRIEF DESCRIPTION OF THE DRAWINGS

[0113] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0114] Attached Figure 1 It is a flowchart of a method for binding HTML element rendering. DETAILED DESCRIPTION

[0115] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0116] A best embodiment is given below:

[0117] like Figure 1 As shown, a method for binding HTML element rendering in this embodiment has the following steps:

[0118] The steps are as follows:

[0119] S1. First, create a js file, and name the js file render;

[0120] S2. Declare a class in the js file and name it Render;

[0121] In S3 and Render, write the constructor function. The constructor function requires a parameter data, which is a Json object. The key of data is the id attribute value of the HTML element, and the value of data corresponds to the data to be rendered.

[0122] S4. In the constructor, declare that pointing to render and assign this value; put the parameter data of the constructor into the attribute data of render; prepare an empty Json object in the render attribute, and name the attribute htmls to store the rendered elements;

[0123] S5. Process data in the constructor;

[0124] Further including:

[0125] S5.1. Traverse the key values ​​of data. Each key is the id of the HTML element. For the convenience of explanation, this key is named id. Each value is the data rendered by the corresponding element. For the convenience of explanation, this value is named value. Call the method for monitoring when data changes. For the convenience of explanation, this method is named dataWatch.

[0126] Call the method that handles HTML element rendering according to the data type after the data changes. For the convenience of explanation, this method is named typeDistribution.

[0127] S5.2. Define the dataWatch method for monitoring data transformation. The id of the data traversal needs to be passed into this method and the following processing is performed:

[0128] S5.2.1. Prepare the variable oldValue in advance and assign that.data[id] to oldValue;

[0129] S5.2.2. Use the Object.defineProperty method to monitor the corresponding data changes. Pass the data in the render attribute and the id in the middle of the data to be monitored to the first two parameters of Object.defineProperty in turn, and configure the get and set methods in the third parameter as follows:

[0130] (1) The get method returns the oldValue prepared in advance in this method;

[0131] (2) Use the set method to process the changes.

[0132] S5.3. Define the typeDistribution method for processing HTML element rendering based on data type after data changes. You need to pass in the id and value of the data traversal and do the following processing:

[0133] The type of value is determined by typeof and Array.isArray. If it is an array type, the HTML element rendering method of array type data is called. For the convenience of explanation, this method is named arrayValueHandle. If it is an object type, the HTML element rendering method of object type data is called. For the convenience of explanation, this method is named objValueHandle.

[0134] If it is any other data type, the HTML element rendering method of the string type data is called. For the convenience of explanation, this method is named stringValueHandle.

[0135] Note: Among the commonly used data types, except for arrays and objects, most of the other types can be processed as strings. Therefore, data of other data types are regarded as string type data. Therefore, when passing parameters, the corresponding data value is converted into a string type through value+"" for transmission.

[0136] S5.4. Define the HTML element rendering method stringValueHandle for string type data; the id and value need to be passed in and processed as follows:

[0137] S5.4.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0138] S5.4.2, determine whether elem is null, if not, continue;

[0139] S5.4.3. Use document.getElementById(id).innerHTML and pass the value in to achieve page rendering.

[0140] S5.5. Define the HTML element rendering method objValueHandle for object type data. You need to pass in the id and value and do the following processing:

[0141] S5.5.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0142] S5.5.2, determine whether elem is null, if not, continue;

[0143] S5.5.3, declare the json object parent, and store the value of id and value as a key-value pair;

[0144] S5.5.4, declare a variable html, receive the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and name it initHtml;

[0145] S5.5.5. Call the method that puts the real data in data into the corresponding slot of html, name it appendValue, and pass in id, htm and parent;

[0146] The slot here is the place contained by {{ and}} in the element of the corresponding id in HTML. The content and rules in {{}} are as follows:

[0147] (1) {{for(data item name of a single loop, data to be looped)………………for}} The data enclosed by this symbol is the loop rendering data, and the data item name of the single loop in brackets can be customized;

[0148] (2) {{if (a conditional statement that complies with JavaScript syntax)………………if}} The content wrapped by this symbol is processed based on whether the conditional statement is correct or not, and whether to render the wrapped content;

[0149] (3){{………………}}This symbol is a value symbol. If the bound data is data, and you want to get the name attribute, you can get it through {{name}}. If it is in a loop symbol, if the name of the looped item is item, you can get it through {{item.name}};

[0150] (4) The “………………” in the above description refers to the content enclosed by the symbol;

[0151] S5.5.6. Assign the result of calling appendValue to elem.innerHTML to complete page rendering.

[0152] S5.6. Define the arrayValueHandle method for rendering HTML elements with array type data. You need to pass in the id and value and do the following processing:

[0153] S5.6.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0154] S5.6.2, determine whether elem is null, if not, continue;

[0155] S5.6.2. Declare a variable html, which receives the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and names it initHtml;

[0156] S5.6.2, traverse the array value, declare the json object parent, store the value of id and each traversed value as a key-value pair, call appendValue, and pass id, html, and value to the processed HTML, and complete the page rendering by accumulating elem.innerHTML;

[0157] S5.7, define the method appendValue to put the real data in data into the corresponding slot of html; this method needs to pass in id, html to be processed, and parent settings. For the convenience of explanation, they are named: id, str, parent. Do the following processing:

[0158] S5.7.1. Use the match function to capture the strings "{{for" and "{{if" in str

[0159] S5.7.2. Determine whether "{{if" exists. If so, call the method for processing the conditional judgment slot, give priority to the conditional judgment processing, name it appendIfValue, and pass in id, str and parent;

[0160] S5.7.3, call the method for processing the loop slot, named appendForValue, and pass in id, str and parent;

[0161] S5.7.4. Call the method for processing normal value slots, appendNormalValue, and enter id, str and parent.

[0162] S5.8, define the method appendIfValue for processing the conditional judgment slot, which needs to pass in the id, the html to be processed, and the parent setting. For the convenience of explanation, they are named: id, str, parent. Do the following processing:

[0163] S5.8.1. Declare a variable isFindEnd to determine whether the sign symbol of the judgment slot is found;

[0164] S5.8.2. Declare a variable ifIndex to store the position of the start marker of the slot;

[0165] S5.8.3. Declare a variable endIndex to store the position of the slot end marker.

[0166] S5.8.4, declare the variable entities to store the converted data of HTML escape characters;

[0167] S5.8.5, determine whether there are start and end marks in the str to be processed, if not, directly return the original str;

[0168] S5.8.6. Use the replace method combined with the isFindEnd control to match the position and number of "{{if" and "if}}" and find the position of the "if}} corresponding to the first "{{if";

[0169] S5.8.7, use the substring function to obtain the found ifIndex and endIndex to intercept the internal content of the slot and store it in the content variable;

[0170] S5.8.8, use the substring function to obtain the content in the first “()” as the judgment condition and store it in the condition variable;

[0171] S5.8.9, traverse the attributes of parent, and then traverse the attributes of each attribute, and combine the two attributes. Except for the data with the same id as the parent attribute, the rest are combined into the attributes of parent, ".", the attribute form of the attribute of parent. If the id is the same as the data of the parent attribute, directly obtain the attribute of parent;

[0172] S5.8.10, use the combined result as the replacement character and replace it with the value in the specific data through the replace function;

[0173] S5.8.11, replace the HTML and entities in the processed condition with actual characters and store them in condition;

[0174] S5.8.12. Use the substring function to obtain the content from str to ifIndex and store it in the befStr variable;

[0175] S5.8.13. Use the substring function to obtain the content between the end and endIndex in str and store it in r in the atrSt variable;

[0176] S5.8.14. Use the substring function to obtain the content from ")" to the end of content and store it in r of the betStr variable;

[0177] S5.8.15. Execute eval(condition), and return the result by combining the results. If correct, return befStr+betStr+aterStr; if incorrect, return befStr+aterStr.

[0178] S5.9. Define the appendForValue method for processing the loop slot, pass in the id, the html to be processed, and the parent settings; for the convenience of explanation, name them as follows: id, str, parent.

[0179] Do the following:

[0180] S5.9.1. Declare a variable isFindEnd to determine whether the sign symbol of the loop slot is found;

[0181] S5.9.2. Declare a variable forIndex to store the position of the loop slot start marker;

[0182] S5.9.3, declare a variable endIndex, which is used to store the position of the loop slot end marker;

[0183] S5.9.4. Use the replace method combined with the isFindEnd control to match the position and number of "{{for" and "for}}" and find the position of "for}}" corresponding to the first "{{for";

[0184] S5.9.5, use the substring function to obtain the found forIndex and endIndex to intercept the internal content of the slot and store it in the content variable;

[0185] S5.9.6. Use the substring function to obtain the content from str to forIndex and store it in the befStr variable;

[0186] S5.9.7. Use the substring function to obtain the content from the end to endIndex in str and store it in the atrStr variable r;

[0187] S5.9.8. Use the substring function to obtain the content from ")" to the end of content and store it in the betStr variable r;

[0188] S5.9.9, use the substring function to obtain the content in "()" in content, and obtain the data item name of a single loop and the data name that needs to be looped by splitting and removing spaces;

[0189] S5.9.10, call the findValue method to find the specific data to be looped through id, the name of the data to be looped, and the parent parent, and store it in the variable forValue;

[0190] S5.9.11, loop forValue, first store the data item name of a single loop and the corresponding forValue in the parent configuration, then use the replace function to replace the data in {{}} with the actual data in the corresponding forValue, and render it in the replacement process by combining the findValue function with the judgment;

[0191] S5.9.12, call the appendValue function on each result of the forValue loop and process the slot content again;

[0192] S5.9.13, loop forValue to get each result concatenation;

[0193] S5.9.14. Call the appendValue function with the final result to process the slot content again;

[0194] S5.9.15. Return the processing result.

[0195] S5.10, define the method appendNormalValue for processing normal value slots, pass in id, html to be processed, and parent settings; for the convenience of explanation, name them as: id, str, parent. Do the following processing:

[0196] Use the replace function to replace the data in {{}} with the actual data, and use forValue to find the data and replace it.

[0197] S5.11. Define the findValue method to find specific data through the attribute path, pass in the id, the path in the attribute data, and the parent setting; for the convenience of explanation, they are named: id, path, parent. Do the following:

[0198] S5.11.1. Declare variable obj to store specific data, split path by “.”, and if the length of the array after splitting is greater than 1, obtain the first array data after splitting and use it as the attribute of parent to obtain the value. If the length of the array after splitting is less than 1, use id as the attribute of parent to obtain the value, and assign the obtained value to obj;

[0199] S5.11.2, declare the variable value and assign it an empty string;

[0200] S5.11.3, declare the loop flag index and assign it 0;

[0201] S5.11.4, declare codes, store the path and replace "{{" and "}}" with the array separated by ".", if the data after the path is separated by "." is greater than 1, exclude the first data;

[0202] S5.11.5, loop through obj, and when index is less than the length of codes, enter the loop body;

[0203] S5.11.6, in the loop body, obtain obj[codes[index]] through value, then store obj[codes[index]] through obj, and finally read the data of path in obj, and increase index by 1 each time through the loop;

[0204] S5.11.7. Determine whether obj is undefined. If so, return an empty string. If not, return obj.;

[0205] S5.12. Define the method initHtml to process the HTML of the page element corresponding to the id. Pass in the id and do the following processing:

[0206] S5.12.1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById;

[0207] S5.12.2, determine whether that.htmls[id] is empty;

[0208] S5.12.3, if it is empty, assign elem.innerHTML to that.htmls[id] for storage;

[0209] S5.12.4, change elem.innerHTML to an empty string;

[0210] S5.12.5. Return that.htmls[id].

[0211] Based on the above method, a device for binding HTML element rendering in this embodiment includes: at least one memory and at least one processor;

[0212] The at least one memory is used to store a machine-readable program;

[0213] The at least one processor is used to call the machine-readable program to execute a method for binding HTML element rendering.

[0214] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that comply with the claims of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0215] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for binding HTML element rendering, characterized in that: The steps are as follows: S1. First, create a js file, and name the js file render; S2. Declare a class in the js file and name it Render; In S3 and Render, write the constructor function. The constructor function requires a parameter data, which is a Json object. The key of data is the id attribute value of the HTML element, and the value of data corresponds to the data to be rendered. S4. In the constructor, declare that pointing to render and assign this value; put the parameter data of the constructor into the attribute data of render; prepare an empty Json object in the render attribute, and name the attribute htmls to store the rendered elements; S5. Process data in the constructor.

2. A method for binding HTML element rendering according to claim 1, characterized in that: In step S5, further comprising: S5.

1. Traverse the key values ​​of data. Each key is the id of the HTML element. The key is named id. Each value is the data rendered by the corresponding element. The value is named value. The method for monitoring when data changes is called. The method is named dataWatch. The method for processing HTML element rendering according to the data type after data changes is called. The method is named typeDistribution. S5.

2. Define the dataWatch method for monitoring data transformation. The id of data traversal needs to be passed into this method. S5.3, define the typeDistribution method to process HTML element rendering according to the data type after data changes, and pass in the id and value of the data traversal; S5.

4. Define the HTML element rendering method stringValueHandle for string type data; S5.

5. Define the HTML element rendering method objValueHandle for object type data; S5.

6. Define the HTML element rendering method arrayValueHandle for array type data; S5.7, define the method appendValue to put the real data in data into the corresponding slot of html; S5.8, define the method appendIfValue for processing the conditional judgment slot; S5.9, define the method appendForValue for processing the loop slot, pass in the id, the html to be processed, and the parent settings; S5.10, define the method appendNormalValue for processing normal value slots, pass in id, html to be processed, and parent settings; S5.11, define the findValue method to find specific data through the attribute path, pass in the id, the path in the attribute data, and the parent setting; S5.

12. Define the method initHtml to process the HTML of the page element corresponding to the id and pass in the id.

3. A method for binding HTML element rendering according to claim 2, characterized in that: In step S5.2, the following processing is performed: S5.2.

1. Prepare the variable oldValue in advance and assign that.data[id] to oldValue; S5.2.

2. Use the Object.defineProperty method to monitor the corresponding data changes. Pass the data in the render attribute and the id in the middle of the data to be monitored to the first two parameters of Object.defineProperty in turn, and configure the get and set methods in the third parameter as follows: (1) The get method returns the oldValue prepared in advance in this method; (2) Use the set method to process the changes; In step S5.3, the following processing is performed: Use typeof and Array.isArray to determine the type of value. If it is an array type, call the HTML element rendering method of the array type data, named arrayValueHandle; If it is an object type, the HTML element rendering method of the object type data is called, named objValueHandle; if it is another data type, the HTML element rendering method of the string type data is called, named stringValueHandle.

4. A method for binding HTML element rendering according to claim 3, characterized in that: In step S5.4, the following processing is performed: S5.4.

1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById; S5.4.2, determine whether elem is null, if not, continue; S5.4.

3. Use document.getElementById(id).innerHTML and pass the value in to achieve page rendering.

5. A method for binding HTML element rendering according to claim 4, characterized in that: In step S5.5, the id and value need to be passed in and processed as follows: S5.5.

1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById; S5.5.2, determine whether elem is null, if not, continue; S5.5.3, declare the json object parent, and store the value of id and value as a key-value pair; S5.5.4, declare a variable html, receive the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and name it initHtml; S5.5.

5. Call the method that puts the real data in data into the corresponding slot of html, name it appendValue, and pass in id, htm and parent; The slot here is the place contained by {{ and}} in the element of the corresponding id in HTML. The content and rules in {{}} are as follows: (1) {{for(data item name of a single loop, data to be looped)………………for}} The data enclosed by this symbol is the loop rendering data, and the data item name of the single loop in brackets can be customized; (2) {{if (a conditional statement that complies with JavaScript syntax)………………if}} The content wrapped by this symbol is processed based on whether the conditional statement is correct or not, and whether to render the wrapped content; (3){{………………}}This symbol is a value symbol. If the bound data is data, and you want to get the name attribute, you can get it through {{name}}. If it is in a loop symbol, if the name of the looped item is item, you can get it through {{item.name}}; (4) The "………………" in the above description refers to the content enclosed by the symbol; S5.5.

6. Assign the result of calling appendValue to elem.innerHTML to complete page rendering.

6. A method for binding HTML element rendering according to claim 5, characterized in that: In step S5.6, the id and value need to be passed in and processed as follows: S5.6.

1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById; S5.6.2, determine whether elem is null, if not, continue; S5.6.

2. Declare a variable html, which receives the HTML string of the page element obtained by calling the method for processing the HTML of the page element corresponding to the id, and names it initHtml; S5.6.2, traverse the array value, declare the json object parent, store the value of id and each traversed value as a key-value pair, call appendValue, and pass id, html, and value to the processed HTML, and complete the page rendering by accumulating elem.innerHTML; In step S5.7, you need to pass in the id, the html to be processed, and the parent settings, which are named: id, str, parent in sequence. The specific processing is as follows: S5.7.

1. Use the match function to capture the strings "{{for" and "{{if" in str S5.7.

2. Determine whether "{{if" exists. If so, call the method for processing the conditional judgment slot, give priority to the conditional judgment processing, name it appendIfValue, and pass in id, str and parent; S5.7.3, call the method for processing the loop slot, named appendForValue, and pass in id, str and parent; S5.7.

4. Call the method for processing normal value slots, appendNormalValue, and enter id, str and parent.

7. A method for binding HTML element rendering according to claim 6, characterized in that: In step S5.8, for the convenience of explanation, they are named as: id, str, parent, and the specific processing is as follows: S5.8.

1. Declare a variable isFindEnd to determine whether the sign symbol of the judgment slot is found; S5.8.

2. Declare a variable ifIndex to store the position of the start marker of the slot; S5.8.

3. Declare a variable endIndex to store the position of the slot end marker. S5.8.4, declare the variable entities to store the converted data of HTML escape characters; S5.8.5, determine whether there are start and end marks in the str to be processed, if not, directly return the original str; S5.8.

6. Use the replace method combined with the isFindEnd control to match the position and number of "{{if" and "if}}" and find the position of the "if}} corresponding to the first "{{if"; S5.8.7, use the substring function to obtain the found ifIndex and endIndex to intercept the internal content of the slot and store it in the content variable; S5.8.8, use the substring function to obtain the content in the first "()" as the judgment condition and store it in the condition variable; S5.8.9, traverse the attributes of parent, and then traverse the attributes of each attribute, and combine the two attributes. Except for the data with the same id as the parent attribute, the rest are combined into the attributes of parent, ".", the attribute form of the attribute of parent. If the id is the same as the data of the parent attribute, directly obtain the attribute of parent; S5.8.10, use the combined result as the replacement character and replace it with the value in the specific data through the replace function; S5.8.11, replace the HTML and entities in the processed condition with actual characters and store them in condition; S5.8.

12. Use the substring function to obtain the content from str to ifIndex and store it in the befStr variable; S5.8.

13. Use the substring function to obtain the content between the end and endIndex in str and store it in r in the atrSt variable; S5.8.

14. Use the substring function to obtain the content from ")" to the end of content and store it in r of the betStr variable; S5.8.

15. Execute eval(condition), and return the result by combining the results. If correct, return befStr+betStr+aterStr; if incorrect, return befStr+aterStr.

8. A method for binding HTML element rendering according to claim 7, characterized in that: In step S5.9, for the convenience of explanation, they are named as: id, str, parent, and the specific processing is as follows: S5.9.

1. Declare a variable isFindEnd to determine whether the sign symbol of the loop slot is found; S5.9.

2. Declare a variable forIndex to store the position of the loop slot start marker; S5.9.3, declare a variable endIndex, which is used to store the position of the loop slot end marker; S5.9.

4. Use the replace method combined with the isFindEnd control to match the position and number of "{{for" and "for}}" and find the position of "for}}" corresponding to the first "{{for"; S5.9.5, use the substring function to obtain the found forIndex and endIndex to intercept the internal content of the slot and store it in the content variable; S5.9.

6. Use the substring function to obtain the content from str to forIndex and store it in the befStr variable; S5.9.

7. Use the substring function to obtain the content from the end to endIndex in str and store it in the atrStr variable r; S5.9.

8. Use the substring function to obtain the content from ")" to the end of content and store it in the betStr variable r; S5.9.9, use the substring function to obtain the content in "()" in content, and obtain the data item name of a single loop and the data name that needs to be looped by splitting and removing spaces; S5.9.10, call the findValue method to find the specific data to be looped through id, the name of the data to be looped, and the parent parent, and store it in the variable forValue; S5.9.11, loop forValue, first store the data item name of a single loop and the corresponding forValue in the parent configuration, then use the replace function to replace the data in {{}} with the actual data in the corresponding forValue, and render it in the replacement process by combining the findValue function with the judgment; S5.9.12, call the appendValue function on each result of the forValue loop and process the slot content again; S5.9.13, loop forValue to get each result concatenation; S5.9.

14. Call the appendValue function with the final result to process the slot content again; S5.9.

15. Return the processing result.

9. A method for binding HTML element rendering according to claim 8, characterized in that: In step S5.10, for the convenience of explanation, they are named as id, str, and parent, and the specific processing is as follows: Use the replace function to replace the data in {{}} with the actual data, and use forValue to find the data and replace it; In step S5.11, for the convenience of explanation, they are named as: id, path, parent, and the specific processing is as follows: S5.11.

1. Declare variable obj to store specific data, split path by ".", and if the length of the array after splitting is greater than 1, obtain the first array data after splitting and use it as the attribute of parent to obtain the value. If the length of the array after splitting is less than 1, use id as the attribute of parent to obtain the value and assign the obtained value to obj; S5.11.2, declare the variable value and assign it an empty string; S5.11.3, declare the loop flag index and assign it 0; S5.11.4, declare codes, store the path and replace "{{" and "}}" with the array after ".." segmentation, if the data after ".." segmentation of path is greater than 1, exclude the first data; S5.11.5, loop through obj, and when index is less than the length of codes, enter the loop body; S5.11.6, in the loop body, obtain obj[codes[index]] through value, then store obj[codes[index]] through obj, and finally read the data of path in obj, and increase index by 1 each time through the loop; S5.11.

7. Determine whether obj is undefined. If so, return an empty string. If not, return obj.; In step S5.12, S5.12.

1. Declare the variable elem and assign the value to the page element obtained by passing the id through document.getElementById; S5.12.2, determine whether that.htmls[id] is empty; S5.12.3, if it is empty, assign elem.innerHTML to that.htmls[id] for storage; S5.12.4, change elem.innerHTML to an empty string; S5.12.

5. Return that.htmls[id].

10. A device for binding HTML element rendering, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 9.

Images