Syntax extension method, device, equipment and storage medium for front-end native components

Abstract

The present application provides a syntax extension method, device, equipment and storage medium for front-end native components. By using syntax extension tools, the syntax of native components has more powerful extensibility. When developers write front-end native components, they can use dynamic rendering to simplify the control coding of displaying and hiding page elements, just like using other frameworks; they can use interpolation expressions to control the display of dynamic content on the page by directly writing dynamic variables on the template; and they can use two-way binding of input boxes to achieve two-way real-time update of input box content and display content. Developers can enjoy the coding convenience brought by extended syntax, and they do not need to build the scaffolding of the framework themselves, nor do they need to increase the size of the overall project resource package due to the introduction of the framework, which effectively improves the project development efficiency and user experience.

Description

Technical Field

[0001] The present application relates to the technical field of grammar extension, and in particular to a grammar extension method, apparatus, device and storage medium for a front-end native component. Background Art

[0002] In current front-end development projects, for some medium and large projects, a framework-based scaffolding is usually built first. For some small projects (usually no more than 10 pages), if the best page loading speed is to be guaranteed and the time for building scaffolding is to be saved, native JavaScript language is generally used for development. Because the introduction of the framework will not only increase the library files of the framework itself, but also come with some related tools, such as routing, state management, etc., which will increase the size of the overall resource package of the entire project, thereby increasing the time it takes for users to load the page. The construction of the framework also requires developers to learn and build the project scaffolding according to the API established by the framework before they can develop the project, unlike the native language where functions can be written directly.

[0003] Although using native languages ​​directly for project development can avoid the above problems, it is undeniable that the improvement in development efficiency brought by the framework in terms of syntax is also something that native components cannot do. For example, dynamic rendering can simplify the display and hiding of page elements, interpolation expressions can directly write dynamic variables on the page template, and when dynamic variables change, they can be fed back in real time on the page, and the input box input data can be associated with the display in real time, etc. Summary of the invention

[0004] The main purpose of this application is to provide a syntax expansion method, device, equipment and storage medium for front-end native components, aiming to solve the disadvantage of low efficiency of existing project development directly using native components.

[0005] To achieve the above purpose, the present application provides a syntax extension method for a front-end native component, including:

[0006] Get the initial script file of the front-end project;

[0007] Executing a pre-built syntax extension tool, and using the syntax extension tool to sequentially perform syntax extensions of dynamic rendering, interpolation expressions, and two-way binding of forms on the initial script file;

[0008] After completing the syntax expansion, the final script file is obtained.

[0009] The present application also provides a syntax expansion device for a front-end native component, including:

[0010] Get module, used to get the initial script file of the front-end project;

[0011] An extension module, used to execute a pre-built syntax extension tool, and to perform syntax extensions of dynamic rendering, interpolation expressions, and two-way binding of forms on the initial script file in sequence through the syntax extension tool;

[0012] The presentation module is used to obtain the final script file after completing the grammar expansion.

[0013] The present application also provides a computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of any one of the above methods when executing the computer program.

[0014] The present application also provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the steps of any of the above-mentioned methods are implemented.

[0015] A syntax extension method, device, equipment and storage medium for a front-end native component provided in the present application first obtains the initial script file of the front-end project, then executes the pre-built syntax extension tool, and performs dynamic rendering, interpolation expression and two-way binding syntax extension of the form on the initial script file in sequence through the syntax extension tool. After the syntax extension of the initial script file is completed by the syntax extension tool, the final script file is obtained. By using the syntax extension tool, the syntax of the native component in the present application has more powerful extensibility. When developers write front-end native components, they can use dynamic rendering to simplify the control coding of page element display and hiding like other frameworks; interpolation expressions can be used to control the display of dynamic content of the page by directly writing dynamic variables on the template, without having to independently write the code to change the page elements; by using the two-way binding of the input box, the two-way real-time update of the input box content and the display content can be achieved, and there is no need to write cumbersome operation elements and listen to the input box event coding. Developers can enjoy the convenience of coding brought by the extended syntax, and they do not need to personally build the scaffolding of the framework foundation, and the increase in the size of the overall project resource package due to the introduction of the framework, which effectively improves the development efficiency of the project and the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 It is a schematic diagram of the steps of the syntax expansion method of the front-end native component in one embodiment of the present application;

[0017] Figure 2 It is an overall structural block diagram of a grammar expansion device of a front-end native component in one embodiment of the present application;

[0018] Figure 3It is a schematic block diagram of the structure of a computer device according to an embodiment of the present application.

[0019] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0021] Reference Figure 1 In one embodiment of the present application, a syntax expansion method for a front-end native component is provided, including the following steps S1-S3:

[0022] S1: Get the initial script file of the front-end project;

[0023] S2: executing a pre-built syntax extension tool, and performing syntax extension of dynamic rendering, interpolation expression and two-way binding of forms on the initial script file in sequence through the syntax extension tool;

[0024] S3: After completing the syntax expansion, the final script file is obtained.

[0025] In this embodiment, the syntax extension method of the front-end native component is applied to the stage where the project development is completed and the local build is completed. The project can be released online only after the local build is completed. Specifically, the syntax extension system first obtains all files ending with ".js" in the currently developed front-end project, that is, the initial script file; then executes the pre-built syntax extension tool, through which the syntax extension tool searches for files that meet the requirements from the initial script file in a preset order, and performs syntax extensions for dynamic rendering, interpolation expressions, and two-way binding of forms in turn. After completing the syntax extension of the above three grammars, the final script file that can be released online is obtained.

[0026] Specifically, the step of grammar expansion includes: when the front-end native component is initialized and executed, the page template written on the HTML page is first found from the initial script file according to the preset keywords. Then, it is identified whether there are predefined first attributes and second attributes on the page template; if the first attributes and second attributes exist on the page template, it is further determined whether the first element tag where the first attribute is located and the first element tag where the second attribute is located appear in pairs. If there are no predefined first attributes and second attributes on the page template, or the first element tag where the first attribute is located and the first element tag where the second attribute is located do not appear in pairs, the next grammar (i.e., interpolation expression) is expanded. If the first attribute and the second attribute appear in pairs on the page template, the class class is added in the first element tag corresponding to the first attribute and the first element tag corresponding to the second attribute, which is used to control the hiding and display of all elements in these two first element tags in the future. The syntax expansion tool defines a control function method at the same level according to the class name of the class and the constructor function of the native component definition class; the control function method contains two control input parameters, and the control function method is used to control the display or hiding of the first element tag that appears in pairs when called, and the control input parameter represents the variable value that controls the first attribute and the second attribute to display or hide the first element tag. The syntax expansion tool obtains the first attribute value variable of the first attribute and the second attribute value variable of the second attribute, and calls the control function method to assign the corresponding first control input parameter to the first attribute value variable, and assigns the second attribute value variable according to the second control input parameter, so as to realize that the changes of the connecting beam are reflected in the page display in real time, and complete the syntax expansion of dynamic rendering; wherein, the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to represent the display or hiding of the first attribute of the element of the first attribute, and the second attribute value variable is used to represent the display or hiding of the first attribute of the element of the second attribute.

[0027] After completing the syntax expansion of dynamic rendering, the syntax expansion system sequentially performs syntax expansion of interpolation expressions. Specifically, the syntax expansion system identifies whether interpolation expressions are used in the syntax of the page template. If interpolation expressions are not used in the page template, the next syntax (i.e., the two-way binding of the form) is syntax expanded. If interpolation expressions are used in the syntax of the page template, a first id attribute is added to the second element tag. The second element tag is an element tag in the page template that uses interpolation expressions, and the first id attribute is used to locate the second element tag. Then, the syntax expansion tool defines a replacement function method at the same level as the constructor function of the native component definition class. The replacement function method includes replacement input parameters, and the replacement input parameters represent the content to be displayed. The syntax expansion tool calls the replacement function method and obtains the replacement content based on the replacement input parameters and the static value of the second element tag. Then, all second element tags are found according to the first id attribute, and the variables contained in the second element tag are replaced with the replacement content to complete the syntax expansion of the interpolation expression.

[0028] After completing the syntax expansion of the interpolation expression, the syntax expansion system sequentially performs the syntax expansion of the two-way binding of the form. Specifically, the syntax expansion system identifies whether the page template uses the two-way binding of the form. If the page template uses the two-way binding of the form, a second id attribute is added to the third element tag, and a third id attribute is added to the fourth element tag; wherein the third element tag is an element tag in the page template that contains the component-binding attribute, and the fourth element tag is an element tag in the page template that contains the component-binding-text attribute, and the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag. The syntax expansion tool defines a display function method at the same level as the constructor function of the native component definition class, and the display function method includes display input parameters, which represent the content to be displayed. When the user is monitored typing text through the input box, the display function method is called, and the text in the input box is used as the display input parameter in the display function method. Then, the third element tag is found according to the second id attribute, and the fourth element tag is found according to the third id attribute, and the display input parameters are used to modify all variables contained in the third element tag and the fourth element tag, completing the syntax expansion of the two-way binding of the form.

[0029] In this embodiment, the syntax extension system makes the syntax of native components more extensible by using syntax extension tools. When developers write front-end native components, they can use dynamic rendering to simplify the control code of displaying and hiding page elements, just like using other frameworks; they can use interpolation expressions to control the display of dynamic content of the page by directly writing dynamic variables on the template, without having to independently write the code to change the page elements; they can use the two-way binding of the input box to achieve two-way real-time update of the input box content and the display content, without having to write cumbersome operation elements and listen to the input box event code. Developers can enjoy the coding convenience brought by the extended syntax, and do not need to personally build the scaffolding of the framework, and the increase in the size of the overall project resource package due to the introduction of the framework, which effectively improves the project development efficiency and user experience.

[0030] Furthermore, in the step of executing the pre-built syntax expansion tool and performing the syntax expansion of dynamic rendering, interpolation expression and two-way binding of the form on the initial script file in sequence through the syntax expansion tool, the step of implementing the dynamic rendering includes the following steps S201-S205:

[0031] S201: searching for a page template from the initial script file according to a preset keyword;

[0032] S202: Identify whether the page template has a first attribute and a second attribute that appear in pair;

[0033] S203: If the page template has the first attribute and the second attribute appearing in pairs, adding a class class in the first element tags of the first attribute and the second attribute;

[0034] S204: defining a control function method according to the same level of the class name of the class class and the constructor function of the native component definition class, wherein the control function method includes two control input parameters, and the control input parameters represent variable values ​​for controlling the first element label of the first attribute and the second attribute to be displayed or hidden;

[0035] S205: Obtain a first attribute value variable of the first attribute and a second attribute value variable of the second attribute, and call the control function method to assign the first attribute value variable with the corresponding first control input parameter, and assign the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to characterize whether the first attribute of the element of the first attribute is displayed or hidden, and the second attribute value variable is used to characterize whether the first attribute of the element of the second attribute is displayed or hidden.

[0036] In this embodiment, when the front-end native component is initialized and executed, the syntax expansion system calls the constructor function in the definition class of the front-end native component, and searches for the page template written on the html page from the initial script file by searching for the template keyword (i.e., the preset keyword) inside the constructor function. Then, it is searched whether there is a component-display attribute (i.e., the first attribute) and a component-none attribute (i.e., the second attribute) on the page template. If both the component-display attribute and the component-none attribute exist on the page template, the current tag level of the element tag A of the component-display attribute is calculated to the top-level html element tag, and the number of levels of the current tag level of the element tag A relative to the top-level element tag is obtained, which is recorded as level A. At the same time, the element tag B of the component-none attribute closest to the element tag A is obtained, and the current tag level of the element tag B is calculated to the top-level html element tag, and the number of levels of the current level of the element tag B relative to the top-level element tag is obtained, which is recorded as level B. The syntax expansion tool determines whether the values ​​of level A and level B are the same. If the values ​​of level A and level B are the same, it determines that the component-display attribute and the component-none attribute appear in pairs in the page template. If there are component-display attributes and component-none attributes that appear in pairs in the page template, it means that dynamic rendering is used in the page template and the next step can be processed. Specifically, the syntax expansion tool adds a class class to the element tags where the component-display attribute and the component-none attribute are located. The class class is used to control the hiding or display of the element tags of these two attributes in the future. Among them, the naming rule of the class class is: the current element tag name + underscore + the number of levels relative to the top-level tag. For example, if the current element tag is div and the number of levels relative to the top-level tag name is 10, the class class is named div_10. The syntax expansion tool defines a control function method at the same level as the constructor function of the front-end native component definition class. The control function method is used to control the display and hiding of the element tags corresponding to the component-display attribute and the component-none attribute. The function name of the control function method follows the above class name + underscore + diplayFn, such as div_10_displayFn in the above example. The control function method includes two control input parameters, which are the variable values ​​that control the display or hiding of the element tag.Preferably, in actual applications, the display or hiding of element tags is only for element tags with component-display attributes, because for element tags with component-none attributes that appear in pairs, they can be directly set in the opposite direction, that is, the reverse value of the control input parameter corresponding to the component-display attribute is set. The syntax expansion tool obtains the first attribute value variable of the first attribute and the second attribute value variable of the second attribute, and calls the control function method to assign the first attribute value variable to the corresponding first control input parameter, and assigns the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, and the first attribute value variable is used to represent the display or hiding of the first attribute of the element of the first attribute, and the second attribute value variable is used to represent the display or hiding of the first attribute of the element of the second attribute. Preferably, since the attribute value variable corresponding to the component-display attribute can also be modified in other function methods, and the display needs to be changed at the same time. Therefore, it is necessary to search for the attribute value variable in all methods at the same level of the constructor function, and in the coding of the modified value of the attribute value variable, by calling the control function method, the assignment of the modified attribute value variable is used as the control input parameter of the control function method, so that the change of the variable can be reflected in real time in the page display.

[0037] Furthermore, the step of searching for a page template from the initial script file according to a preset keyword includes the following steps S20101-S20103:

[0038] S20101: when the front-end native component is initialized, calling the constructor function in the definition class of the front-end native component;

[0039] S20102: obtaining a coding statement of a page element display template by searching for the template keyword inside the constructor function;

[0040] S20103: Obtain the page template written on the HTML page through the coding statement.

[0041] In this embodiment, when the front-end native component is initialized, the grammar expansion tool calls the constructor function in the definition class of the front-end native component. Then, by searching for the template keyword inside the constructor function, the coding statement for the current front-end native component to obtain the page element display template is identified. The grammar expansion tool can obtain the element selector corresponding to the page element display template in the coding statement, and then obtain the page template written on the HTML page.

[0042] Furthermore, in the step of executing the pre-built syntax expansion tool and performing the syntax expansion of dynamic rendering, interpolation expression and two-way binding of the form on the initial script file in sequence through the syntax expansion tool, the step of implementing the interpolation expression includes the following steps S206-S209:

[0043] S206: Identify whether the interpolation expression is used in the syntax of the page template;

[0044] S207: if the interpolation expression is used in the syntax of the page template, adding a first id attribute to a second element tag, the second element tag being the element tag in the page template that uses the interpolation expression, and the first id attribute being used to locate the second element tag;

[0045] S208: defining a replacement function method at the same level as the constructor function of the native component definition class, wherein the replacement function method includes a replacement input parameter, and the replacement input parameter represents the content to be displayed;

[0046] S209: Call the replacement function method, obtain the replacement content according to the replacement input parameter and the static value of the second element tag, and find the second element tag according to the first id attribute, and use the replacement content to replace the variables contained in the second element tag.

[0047] In this embodiment, the syntax expansion tool searches for the tag content wrapped by all closed tags on the page template to see if it contains opening and closing curly braces. If the tag content contains opening and closing curly braces, it means that interpolation expressions are used in the syntax of the page template. For example, a line of text written by a p tag: Sample text {dynamic copy display part}, the example text {dynamic text display part} in the example is the content wrapped by the closing tag. After recognizing that the interpolation expression is used in the syntax of the page template, the syntax expansion tool adds a first id attribute to the second element tag using the interpolation expression, and the first id attribute is used to locate the second element tag. The naming rule of the first id attribute is the current component name + underscore + the serial number of the interpolation expression; for example, if the current component name is component A, and the interpolation expression is the first to be found in the current page template, then the id is named component A_1. The syntax expansion tool defines a replacement function method at the same level as the constructor function of the native component definition class. The replacement function method is used to set the content of the dynamic replacement interpolation expression, that is, when the content of the interpolation expression changes, the page element display can be changed at any time by calling the replacement function method; the function name of the replacement function method is based on the id attribute + underscore + insertFn in the previous step, such as A_1_insertFn in the above example. The replacement function method includes a replacement input parameter, and the content of the replacement input parameter is the content of the dynamic part that the interpolation expression needs to display. When the display instruction input by the user is collected, the syntax expansion tool calls the replacement function method, and obtains the replacement content according to the replacement input parameter (the content of the replacement input parameter is used as a dynamic value) and the static value of the second element tag, and finds the second element tag according to the first id attribute. After replacing the variables contained in the second element tag with the replacement content, it is fed back in real time in the page display content. Preferably, since the corresponding variables in the interpolation expression can also be modified in other function methods, and at the same time, it is necessary to adjust the display of the page when the value of its variable changes. Therefore, it is necessary to search for the variable in all methods at the same level of the constructor function, and call the replacement function method in the coding of the variable modification value, and use the modified variable assignment as the replacement input parameter of the function to realize the dynamic modification of the dynamic content in the interpolation expression by the change of the variable, and feedback in real time in the page display content.

[0048] Further, the step of calling the replacement function method, obtaining replacement content according to the replacement input parameter and the static value of the second element tag, finding the second element tag according to the first id attribute, and replacing the variable contained in the second element tag with the replacement content includes the following steps S20901-S20904:

[0049] S20901: monitoring whether a display instruction is collected;

[0050] S20902: if the display instruction is collected, extract the static value from the second element tag, call the replacement function method, and use the variable assignment as the replacement input parameter;

[0051] S20903: Using the replacement input parameter as a dynamic value and concatenating it with the static value according to a preset format to obtain the replacement content;

[0052] S20904: At the same level of the constructor function, search for the second element tag according to the first id attribute, and use the replacement content to modify the variables included in the second element tag.

[0053] In this embodiment, the grammar expansion system monitors in real time whether the display instruction input by the user is collected (for example, whether the user clicks on the page to display the content of the second element tag, and the click action is the display instruction). If the display instruction input by the user is collected, the static value is extracted from the second element tag, and the replacement function method is called. The variable assignment is used as the replacement input parameter through the replacement function method (for example, the static value of the second element tag is the example text, and the dynamic value is the timestamp. Initially, the dynamic value in the second element tag has a timestamp of a default time; when it is necessary to display, the current time is used as the variable assignment, so that the current time is used as the dynamic value to replace the initial default time). The grammar expansion tool uses the replacement input parameter as the dynamic value and splices it with the static value of the second element tag in a preset format (such as static value + dynamic value) to obtain a new replacement content. At the same level of the constructor function, the grammar expansion tool searches for the second element tag according to the first id attribute, and uses the replacement content to modify and replace the variables originally contained in the second element tag, so as to update the content contained in the second element tag.

[0054] Furthermore, in the step of executing the pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and two-way binding syntax expansion on the initial script file through the syntax expansion tool, the step of implementing the two-way binding of the form includes the following steps S2010-S2014:

[0055] S2010: Identify whether the page template uses the two-way binding of the form;

[0056] S2011: If the page template uses the two-way binding of the form, then add a second id attribute to the third element tag, and add a third id attribute to the fourth element tag, the third element tag is an element tag containing the component-binding attribute in the page template, the fourth element tag is an element tag containing the component-binding-text attribute in the page template, the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag;

[0057] S2012: defining a display function method at the same level as the constructor function of the native component definition class, wherein the display function method includes display input parameters, and the display input parameters represent content to be displayed;

[0058] S2013: when monitoring the user typing text in the input box, calling the display function method, and taking the text in the input box as the display input parameter;

[0059] S2014: Find the third element tag according to the second id attribute, and find the fourth element tag according to the third id attribute, and use the display input parameters to modify the variables contained in the third element tag and the fourth element tag.

[0060] In this embodiment, the syntax expansion tool identifies whether the page template uses the two-way binding of the form. If the page template uses the two-way binding of the form, a second id attribute is added to the element tag in the page template that contains the component-binding attribute, that is, the third element tag; and a third id attribute is added to the element tag in the page template that contains the component-binding-text attribute, that is, the fourth element tag. The second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag. Both id attributes can replace the content in the input box. Specifically, the naming rules of the third id attribute and the fourth id attribute are the same, which is the current element tag name + underscore + binding + the serial number of the attribute. If the current element name is input, and the component-binding attribute is the first one found in the current template, then the id is named input_binding_1. The attribute value corresponding to the component-binding attribute is in the form of a variable, which changes with the input value of the input box. And it can be referenced by the component-binding-text attribute in other tags. When this attribute appears in a tag, the text display content in the tag will be modified accordingly as the component-binding-text attribute value changes, similar to the role of interpolation expressions, but this attribute can only be used for dynamic variables bound in the form, that is, the variable corresponding to the component-binding-text attribute value can only be the variable of the component-binding attribute in a form element. The syntax expansion tool defines a display function method at the same level as the constructor function of the native component definition class. When the content of the input box changes due to manual input, or when the display of the input box content is changed by other function methods, the display function method can be called to change the display of page elements at any time. The function name of the display function method is the id attribute + underscore + bindingFn defined above, such as input_binding1_bingFn in the above example. The display function method contains a display input parameter, and the content of the display input parameter is the content that needs to be set to the display state. The syntax extension system uses the method of adding events in the document object that comes with the browser to add an input event to the element tag where the component-binding attribute appears, which is used to monitor the corresponding callback function event triggered when typing text in the input box. The callback function will accept the content entered in the input box as an input parameter (called the input box input parameter). The content of the callback function is to call the above display function method, and use the input box input parameter as the display input parameter of calling the display function method to update the display content of the corresponding element tag.Specifically, when the grammar expansion system monitors the user typing text through the input box, it calls the display function method and uses the text in the input box as the display input parameter. Then, the third element tag is found according to the second id attribute, and the fourth element tag is found according to the third id attribute, and the display input parameter is used to modify (or directly replace) the variables contained in the third element tag and the fourth element tag to complete the update setting of the display content. Preferably, since the corresponding variables bound to the element tags where the form and component-binding attributes are located can also be modified in other function methods, and the display needs to be changed at the same time. Therefore, it is necessary to search for the variable in all methods at the same level of the constructor function, and call the display function method in the encoding of the variable modification value, and use the modified variable assignment as the function's display input parameter to achieve real-time feedback of variable changes in the page display content.

[0061] Furthermore, the step of identifying whether the page template uses the two-way binding of the form includes the following steps S201001-S201003:

[0062] S201001: Search and obtain an input tag and a textarea tag from the page template;

[0063] S201002: Determine whether the input tag and the textarea tag both contain the component-binding attribute;

[0064] S201003: If both the input tag and the textarea tag include the component-binding attribute, it is determined that the page template uses the two-way binding of the form.

[0065] In this embodiment, the syntax expansion tool searches for all input tags and textarea tags on the page template, and then determines whether the input tags and textarea tags contain the component-binding attribute. If both the input tags and the textarea tags contain the component-binding attribute, it is determined that the page template uses the two-way binding syntax of the form, and corresponding conversion is required.

[0066] Reference Figure 2 In one embodiment of the present application, a grammar expansion device for a front-end native component is also provided, and the device includes:

[0067] Acquisition module 1 is used to obtain the initial script file of the front-end project;

[0068] Extension module 2 is used to execute a pre-built syntax extension tool, and perform syntax extensions of dynamic rendering, interpolation expressions and two-way binding of forms on the initial script file in sequence through the syntax extension tool;

[0069] Presentation module 3 is used to obtain a final script file after completing the grammar expansion.

[0070] In this embodiment, the syntax extension method of the front-end native component is applied to the stage where the project development is completed and the local build is completed. The project can be released online only after the local build is completed. Specifically, the syntax extension system first obtains all files ending with ".js" in the currently developed front-end project, that is, the initial script file; then executes the pre-built syntax extension tool, through which the syntax extension tool searches for files that meet the requirements from the initial script file in a preset order, and performs syntax extensions for dynamic rendering, interpolation expressions, and two-way binding of forms in turn. After completing the syntax extension of the above three grammars, the final script file that can be released online is obtained.

[0071] Specifically, the step of grammar expansion includes: when the front-end native component is initialized and executed, the page template written on the HTML page is first found from the initial script file according to the preset keywords. Then, it is identified whether there are predefined first attributes and second attributes on the page template; if the first attributes and second attributes exist on the page template, it is further determined whether the first element tag where the first attribute is located and the first element tag where the second attribute is located appear in pairs. If there are no predefined first attributes and second attributes on the page template, or the first element tag where the first attribute is located and the first element tag where the second attribute is located do not appear in pairs, the next grammar (i.e., interpolation expression) is expanded. If the first attribute and the second attribute appear in pairs on the page template, the class class is added in the first element tag corresponding to the first attribute and the first element tag corresponding to the second attribute, which is used to control the hiding and display of all elements in these two first element tags in the future. The syntax expansion tool defines a control function method at the same level according to the class name of the class and the constructor function of the native component definition class; the control function method contains two control input parameters, and the control function method is used to control the display or hiding of the first element tag that appears in pairs when called, and the control input parameter represents the variable value that controls the first attribute and the second attribute to display or hide the first element tag. The syntax expansion tool obtains the first attribute value variable of the first attribute and the second attribute value variable of the second attribute, and calls the control function method to assign the corresponding first control input parameter to the first attribute value variable, and assigns the second attribute value variable according to the second control input parameter, so as to realize that the changes of the connecting beam are reflected in the page display in real time, and complete the syntax expansion of dynamic rendering; wherein, the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to represent the display or hiding of the first attribute of the element of the first attribute, and the second attribute value variable is used to represent the display or hiding of the first attribute of the element of the second attribute.

[0072] After completing the syntax expansion of dynamic rendering, the syntax expansion system sequentially performs syntax expansion of interpolation expressions. Specifically, the syntax expansion system identifies whether interpolation expressions are used in the syntax of the page template. If interpolation expressions are not used in the page template, the next syntax (i.e., the two-way binding of the form) is syntax expanded. If interpolation expressions are used in the syntax of the page template, a first id attribute is added to the second element tag. The second element tag is an element tag in the page template that uses interpolation expressions, and the first id attribute is used to locate the second element tag. Then, the syntax expansion tool defines a replacement function method at the same level as the constructor function of the native component definition class. The replacement function method includes replacement input parameters, and the replacement input parameters represent the content to be displayed. The syntax expansion tool calls the replacement function method and obtains the replacement content based on the replacement input parameters and the static value of the second element tag. Then, all second element tags are found according to the first id attribute, and the variables contained in the second element tag are replaced with the replacement content to complete the syntax expansion of the interpolation expression.

[0073] After completing the syntax expansion of the interpolation expression, the syntax expansion system sequentially performs the syntax expansion of the two-way binding of the form. Specifically, the syntax expansion system identifies whether the page template uses the two-way binding of the form. If the page template uses the two-way binding of the form, a second id attribute is added to the third element tag, and a third id attribute is added to the fourth element tag; wherein the third element tag is an element tag in the page template that contains the component-binding attribute, and the fourth element tag is an element tag in the page template that contains the component-binding-text attribute, and the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag. The syntax expansion tool defines a display function method at the same level as the constructor function of the native component definition class, and the display function method includes display input parameters, which represent the content to be displayed. When the user is monitored typing text through the input box, the display function method is called, and the text in the input box is used as the display input parameter in the display function method. Then, the third element tag is found according to the second id attribute, and the fourth element tag is found according to the third id attribute, and the display input parameters are used to modify all variables contained in the third element tag and the fourth element tag, completing the syntax expansion of the two-way binding of the form.

[0074] In this embodiment, the syntax extension system makes the syntax of native components more extensible by using syntax extension tools. When developers write front-end native components, they can use dynamic rendering to simplify the control code of displaying and hiding page elements, just like using other frameworks; they can use interpolation expressions to control the display of dynamic content of the page by directly writing dynamic variables on the template, without having to independently write the code to change the page elements; they can use the two-way binding of the input box to achieve two-way real-time update of the input box content and the display content, without having to write cumbersome operation elements and listen to the input box event code. Developers can enjoy the coding convenience brought by the extended syntax, and do not need to personally build the scaffolding of the framework, and the increase in the size of the overall project resource package due to the introduction of the framework, which effectively improves the project development efficiency and user experience.

[0075] Furthermore, the expansion module 2 includes:

[0076] A search unit, used to search for a page template from the initial script file according to a preset keyword;

[0077] A first identification unit, used for identifying whether the page template has a first attribute and a second attribute that appear in pairs;

[0078] A first adding unit is configured to add a class class in a first element tag of the first attribute and the second attribute if the first attribute and the second attribute appear in pairs in the page template;

[0079] A first definition unit is used to define a control function method according to the same level of the class name of the class class and the constructor function of the native component definition class, wherein the control function method includes two control input parameters, and the control input parameters represent variable values ​​for controlling the first element label of the first attribute and the second attribute to be displayed or hidden;

[0080] An assignment unit is used to obtain a first attribute value variable of the first attribute and a second attribute value variable of the second attribute, and call the control function method to assign the corresponding first control input parameter to the first attribute value variable, and assign the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to characterize whether the first attribute of the element of the first attribute is displayed or hidden, and the second attribute value variable is used to characterize whether the first attribute of the element of the second attribute is displayed or hidden.

[0081] In this embodiment, when the front-end native component is initialized and executed, the syntax expansion system calls the constructor function in the definition class of the front-end native component, and searches for the page template written on the html page from the initial script file by searching for the template keyword (i.e., the preset keyword) inside the constructor function. Then, it is searched whether there is a component-display attribute (i.e., the first attribute) and a component-none attribute (i.e., the second attribute) on the page template. If both the component-display attribute and the component-none attribute exist on the page template, the current tag level of the element tag A of the component-display attribute is calculated to the top-level html element tag, and the number of levels of the current tag level of the element tag A relative to the top-level element tag is obtained, which is recorded as level A. At the same time, the element tag B of the component-none attribute closest to the element tag A is obtained, and the current tag level of the element tag B is calculated to the top-level html element tag, and the number of levels of the current level of the element tag B relative to the top-level element tag is obtained, which is recorded as level B. The syntax expansion tool determines whether the values ​​of level A and level B are the same. If the values ​​of level A and level B are the same, it determines that the component-display attribute and the component-none attribute appear in pairs in the page template. If there are component-display attributes and component-none attributes that appear in pairs in the page template, it means that dynamic rendering is used in the page template and the next step can be processed. Specifically, the syntax expansion tool adds a class class to the element tags where the component-display attribute and the component-none attribute are located. The class class is used to control the hiding or display of the element tags of these two attributes in the future. Among them, the naming rule of the class class is: the current element tag name + underscore + the number of levels relative to the top-level tag. For example, if the current element tag is div and the number of levels relative to the top-level tag name is 10, the class class is named div_10. The syntax expansion tool defines a control function method at the same level as the constructor function of the front-end native component definition class. The control function method is used to control the display and hiding of the element tags corresponding to the component-display attribute and the component-none attribute. The function name of the control function method follows the above class name + underscore + diplayFn, such as div_10_displayFn in the above example. The control function method includes two control input parameters, which are the variable values ​​that control the display or hiding of the element tag.Preferably, in actual applications, the display or hiding of element tags is only for element tags with component-display attributes, because for element tags with component-none attributes that appear in pairs, they can be directly set in the opposite direction, that is, the reverse value of the control input parameter corresponding to the component-display attribute is set. The syntax expansion tool obtains the first attribute value variable of the first attribute and the second attribute value variable of the second attribute, and calls the control function method to assign the first attribute value variable to the corresponding first control input parameter, and assigns the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, and the first attribute value variable is used to represent the display or hiding of the first attribute of the element of the first attribute, and the second attribute value variable is used to represent the display or hiding of the first attribute of the element of the second attribute. Preferably, since the attribute value variable corresponding to the component-display attribute can also be modified in other function methods, and the display needs to be changed at the same time. Therefore, it is necessary to search for the attribute value variable in all methods at the same level of the constructor function, and in the coding of the modified value of the attribute value variable, by calling the control function method, the assignment of the modified attribute value variable is used as the control input parameter of the control function method, so that the change of the variable can be reflected in real time in the page display.

[0082] Furthermore, the search unit includes:

[0083] A calling subunit, used to call the constructor function in the definition class of the front-end native component when the front-end native component is initialized;

[0084] A search subunit, used to obtain a coding statement of a page element display template by searching for a template keyword inside the constructor function;

[0085] The acquisition subunit is used to acquire the page template written on the HTML page through the coding statement.

[0086] In this embodiment, when the front-end native component is initialized, the grammar expansion tool calls the constructor function in the definition class of the front-end native component. Then, by searching for the template keyword inside the constructor function, the coding statement for the current front-end native component to obtain the page element display template is identified. The grammar expansion tool can obtain the element selector corresponding to the page element display template in the coding statement, and then obtain the page template written on the HTML page.

[0087] Furthermore, the expansion module 2 further includes:

[0088] A second identification unit, used for identifying whether the interpolation expression is used in the syntax of the page template;

[0089] a second adding unit, configured to add a first id attribute to a second element tag if the interpolation expression is used in the syntax of the page template, the second element tag being an element tag in the page template that uses the interpolation expression, and the first id attribute being used to locate the second element tag;

[0090] A second definition unit is used to define a replacement function method at the same level as the constructor function of the native component definition class, wherein the replacement function method includes a replacement input parameter, and the replacement input parameter represents content to be displayed;

[0091] A replacement unit is used to call the replacement function method, obtain replacement content according to the replacement input parameter and the static value of the second element tag, and obtain the second element tag according to the first id attribute, and use the replacement content to replace the variables contained in the second element tag.

[0092] In this embodiment, the syntax expansion tool searches for the tag content wrapped by all closed tags on the page template to see if it contains opening and closing curly braces. If the tag content contains opening and closing curly braces, it means that interpolation expressions are used in the syntax of the page template. For example, a line of text written by a p tag: Sample text {dynamic copy display part}, the example text {dynamic text display part} in the example is the content wrapped by the closing tag. After recognizing that the interpolation expression is used in the syntax of the page template, the syntax expansion tool adds a first id attribute to the second element tag using the interpolation expression, and the first id attribute is used to locate the second element tag. The naming rule of the first id attribute is the current component name + underscore + the serial number of the interpolation expression; for example, if the current component name is component A, and the interpolation expression is the first to be found in the current page template, then the id is named component A_1. The syntax expansion tool defines a replacement function method at the same level as the constructor function of the native component definition class. The replacement function method is used to set the content of the dynamic replacement interpolation expression, that is, when the content of the interpolation expression changes, the page element display can be changed at any time by calling the replacement function method; the function name of the replacement function method is based on the id attribute + underscore + insertFn in the previous step, such as A_1_insertFn in the above example. The replacement function method includes a replacement input parameter, and the content of the replacement input parameter is the content of the dynamic part that the interpolation expression needs to display. When the display instruction input by the user is collected, the syntax expansion tool calls the replacement function method, and obtains the replacement content according to the replacement input parameter (the content of the replacement input parameter is used as a dynamic value) and the static value of the second element tag, and finds the second element tag according to the first id attribute. After replacing the variables contained in the second element tag with the replacement content, it is fed back in real time in the page display content. Preferably, since the corresponding variables in the interpolation expression can also be modified in other function methods, and at the same time, it is necessary to adjust the display of the page when the value of its variable changes. Therefore, it is necessary to search for the variable in all methods at the same level of the constructor function, and call the replacement function method in the coding of the variable modification value, and use the modified variable assignment as the replacement input parameter of the function to realize the dynamic modification of the dynamic content in the interpolation expression by the change of the variable, and feedback in real time in the page display content.

[0093] Furthermore, the replacement unit comprises:

[0094] A monitoring subunit, used to monitor whether a display instruction is collected;

[0095] an extraction subunit, configured to extract the static value from the second element tag if the display instruction is collected, and call the replacement function method, using the variable assignment as the replacement input parameter;

[0096] A splicing subunit, used to splice the replacement input parameter as a dynamic value with the static value according to a preset format to obtain the replacement content;

[0097] The modification subunit is used to find the second element tag according to the first id attribute at the same level of the constructor function, and use the replacement content to modify the variables included in the second element tag.

[0098] In this embodiment, the grammar expansion system monitors in real time whether the display instruction input by the user is collected (for example, whether the user clicks on the page to display the content of the second element tag, and the click action is the display instruction). If the display instruction input by the user is collected, the static value is extracted from the second element tag, and the replacement function method is called. The variable assignment is used as the replacement input parameter through the replacement function method (for example, the static value of the second element tag is the example text, and the dynamic value is the timestamp. Initially, the dynamic value in the second element tag has a timestamp of a default time; when it is necessary to display, the current time is used as the variable assignment, so that the current time is used as the dynamic value to replace the initial default time). The grammar expansion tool uses the replacement input parameter as the dynamic value and splices it with the static value of the second element tag in a preset format (such as static value + dynamic value) to obtain a new replacement content. At the same level of the constructor function, the grammar expansion tool searches for the second element tag according to the first id attribute, and uses the replacement content to modify and replace the variables originally contained in the second element tag, so as to update the content contained in the second element tag.

[0099] Furthermore, the expansion module 2 further includes:

[0100] A third identification unit, used to identify whether the page template uses the two-way binding of the form;

[0101] A third adding unit is used for adding a second id attribute to a third element tag and a third id attribute to a fourth element tag if the page template uses the two-way binding of the form, wherein the third element tag is an element tag containing a component-binding attribute in the page template, and the fourth element tag is an element tag containing a component-binding-text attribute in the page template, wherein the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag;

[0102] A third definition unit is used to define a display function method at the same level as the constructor function of the native component definition class, wherein the display function method includes a display input parameter, and the display input parameter represents content to be displayed;

[0103] A calling unit, configured to call the display function method when monitoring a user typing text into the input box, and use the text in the input box as the display input parameter;

[0104] A modification unit is used to find the third element tag according to the second id attribute, and to find the fourth element tag according to the third id attribute, and to use the display input parameter to modify the variables contained in the third element tag and the fourth element tag.

[0105] In this embodiment, the syntax expansion tool identifies whether the page template uses the two-way binding of the form. If the page template uses the two-way binding of the form, a second id attribute is added to the element tag in the page template that contains the component-binding attribute, that is, the third element tag; and a third id attribute is added to the element tag in the page template that contains the component-binding-text attribute, that is, the fourth element tag. The second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag. Both id attributes can replace the content in the input box. Specifically, the naming rules of the third id attribute and the fourth id attribute are the same, which is the current element tag name + underscore + binding + the serial number of the attribute. If the current element name is input, and the component-binding attribute is the first one found in the current template, then the id is named input_binding_1. The attribute value corresponding to the component-binding attribute is in the form of a variable, which changes with the input value of the input box. And it can be referenced by the component-binding-text attribute in other tags. When this attribute appears in a tag, the text display content in the tag will be modified accordingly as the component-binding-text attribute value changes, similar to the role of interpolation expressions, but this attribute can only be used for dynamic variables bound in the form, that is, the variable corresponding to the component-binding-text attribute value can only be the variable of the component-binding attribute in a form element. The syntax expansion tool defines a display function method at the same level as the constructor function of the native component definition class. When the content of the input box changes due to manual input, or when the display of the input box content is changed by other function methods, the display function method can be called to change the display of page elements at any time. The function name of the display function method is the id attribute + underscore + bindingFn defined above, such as input_binding1_bingFn in the above example. The display function method contains a display input parameter, and the content of the display input parameter is the content that needs to be set to the display state. The syntax extension system uses the method of adding events in the document object that comes with the browser to add an input event to the element tag where the component-binding attribute appears, which is used to monitor the corresponding callback function event triggered when typing text in the input box. The callback function will accept the content entered in the input box as an input parameter (called the input box input parameter). The content of the callback function is to call the above display function method, and use the input box input parameter as the display input parameter of calling the display function method to update the display content of the corresponding element tag.Specifically, when the grammar expansion system monitors the user typing text through the input box, it calls the display function method and uses the text in the input box as the display input parameter. Then, the third element tag is found according to the second id attribute, and the fourth element tag is found according to the third id attribute, and the display input parameter is used to modify (or directly replace) the variables contained in the third element tag and the fourth element tag to complete the update setting of the display content. Preferably, since the corresponding variables bound to the element tags where the form and component-binding attributes are located can also be modified in other function methods, and the display needs to be changed at the same time. Therefore, it is necessary to search for the variable in all methods at the same level of the constructor function, and call the display function method in the encoding of the variable modification value, and use the modified variable assignment as the function's display input parameter to achieve real-time feedback of variable changes in the page display content.

[0106] Furthermore, the third identification unit includes:

[0107] A search subunit, used for searching for an input tag and a textarea tag from the page template;

[0108] A judging subunit, used to judge whether both the input tag and the textarea tag contain the component-binding attribute;

[0109] The determination subunit is used to determine that the page template uses the two-way binding of the form if both the input tag and the textarea tag include the component-binding attribute.

[0110] In this embodiment, the syntax expansion tool searches for all input tags and textarea tags on the page template, and then determines whether the input tags and textarea tags contain the component-binding attribute. If both the input tags and the textarea tags contain the component-binding attribute, it is determined that the page template uses the two-way binding syntax of the form, and corresponding conversion is required.

[0111] Reference Figure 3 In an embodiment of the present application, a computer device is also provided. The computer device may be a server, and its internal structure may be as follows: Figure 3As shown. The computer device includes a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor designed by the computer is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The database of the computer device is used to store data such as initial script files. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a syntax expansion method of a front-end native component is implemented.

[0112] The above processor executes the steps of the syntax expansion method of the above front-end native component:

[0113] S1: Get the initial script file of the front-end project;

[0114] S2: executing a pre-built syntax extension tool, and performing syntax extension of dynamic rendering, interpolation expression and two-way binding of forms on the initial script file in sequence through the syntax extension tool;

[0115] S3: After completing the syntax expansion, the final script file is obtained.

[0116] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the implementation step of the dynamic rendering includes:

[0117] S201: searching for a page template from the initial script file according to a preset keyword;

[0118] S202: Identify whether the page template has a first attribute and a second attribute that appear in pair;

[0119] S203: If the page template has the first attribute and the second attribute appearing in pairs, adding a class class in the first element tags of the first attribute and the second attribute;

[0120] S204: defining a control function method according to the same level of the class name of the class class and the constructor function of the native component definition class, wherein the control function method includes two control input parameters, and the control input parameters represent variable values ​​for controlling the first element label of the first attribute and the second attribute to be displayed or hidden;

[0121] S205: Obtain a first attribute value variable of the first attribute and a second attribute value variable of the second attribute, and call the control function method to assign the first attribute value variable with the corresponding first control input parameter, and assign the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to characterize whether the first attribute of the element of the first attribute is displayed or hidden, and the second attribute value variable is used to characterize whether the first attribute of the element of the second attribute is displayed or hidden.

[0122] Furthermore, the step of searching for a page template from the initial script file according to a preset keyword includes:

[0123] S20101: when the front-end native component is initialized, calling the constructor function in the definition class of the front-end native component;

[0124] S20102: obtaining a coding statement of a page element display template by searching for the template keyword inside the constructor function;

[0125] S20103: Obtain the page template written on the HTML page through the coding statement.

[0126] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the step of implementing the interpolation expression includes:

[0127] S206: Identify whether the interpolation expression is used in the syntax of the page template;

[0128] S207: if the interpolation expression is used in the syntax of the page template, adding a first id attribute to a second element tag, the second element tag being the element tag in the page template that uses the interpolation expression, and the first id attribute being used to locate the second element tag;

[0129] S208: defining a replacement function method at the same level as the constructor function of the native component definition class, wherein the replacement function method includes a replacement input parameter, and the replacement input parameter represents the content to be displayed;

[0130] S209: Call the replacement function method, obtain the replacement content according to the replacement input parameter and the static value of the second element tag, and find the second element tag according to the first id attribute, and use the replacement content to replace the variables contained in the second element tag.

[0131] Further, the step of calling the replacement function method, obtaining replacement content according to the replacement input parameter and the static value of the second element tag, finding the second element tag according to the first id attribute, and replacing the variable contained in the second element tag with the replacement content includes:

[0132] S20901: monitoring whether a display instruction is collected;

[0133] S20902: if the display instruction is collected, extract the static value from the second element tag, call the replacement function method, and use the variable assignment as the replacement input parameter;

[0134] S20903: Using the replacement input parameter as a dynamic value and concatenating it with the static value according to a preset format to obtain the replacement content;

[0135] S20904: At the same level of the constructor function, search for the second element tag according to the first id attribute, and use the replacement content to modify the variables included in the second element tag.

[0136] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and two-way binding syntax expansion of the initial script file through the syntax expansion tool, the two-way binding of the form is implemented by:

[0137] S2010: Identify whether the page template uses the two-way binding of the form;

[0138] S2011: If the page template uses the two-way binding of the form, then add a second id attribute to the third element tag, and add a third id attribute to the fourth element tag, the third element tag is an element tag containing the component-binding attribute in the page template, the fourth element tag is an element tag containing the component-binding-text attribute in the page template, the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag;

[0139] S2012: defining a display function method at the same level as the constructor function of the native component definition class, wherein the display function method includes display input parameters, and the display input parameters represent content to be displayed;

[0140] S2013: when monitoring the user typing text in the input box, calling the display function method, and taking the text in the input box as the display input parameter;

[0141] S2014: Find the third element tag according to the second id attribute, and find the fourth element tag according to the third id attribute, and use the display input parameters to modify the variables contained in the third element tag and the fourth element tag.

[0142] Furthermore, the step of identifying whether the page template uses the two-way binding of the form includes:

[0143] S201001: Search and obtain an input tag and a textarea tag from the page template;

[0144] S201002: Determine whether the input tag and the textarea tag both contain the component-binding attribute;

[0145] S201003: If both the input tag and the textarea tag include the component-binding attribute, it is determined that the page template uses the two-way binding of the form.

[0146] An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, a syntax expansion method of a front-end native component is implemented. The syntax expansion method of the front-end native component is specifically:

[0147] S1: Get the initial script file of the front-end project;

[0148] S2: executing a pre-built syntax extension tool, and performing syntax extension of dynamic rendering, interpolation expression and two-way binding of forms on the initial script file in sequence through the syntax extension tool;

[0149] S3: After completing the syntax expansion, the final script file is obtained.

[0150] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the implementation step of the dynamic rendering includes:

[0151] S201: searching for a page template from the initial script file according to a preset keyword;

[0152] S202: Identify whether the page template has a first attribute and a second attribute that appear in pair;

[0153] S203: If the page template has the first attribute and the second attribute appearing in pairs, adding a class class in the first element tags of the first attribute and the second attribute;

[0154] S204: defining a control function method according to the same level of the class name of the class class and the constructor function of the native component definition class, wherein the control function method includes two control input parameters, and the control input parameters represent variable values ​​for controlling the first element label of the first attribute and the second attribute to be displayed or hidden;

[0155] S205: Obtain a first attribute value variable of the first attribute and a second attribute value variable of the second attribute, and call the control function method to assign the first attribute value variable with the corresponding first control input parameter, and assign the second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to characterize whether the first attribute of the element of the first attribute is displayed or hidden, and the second attribute value variable is used to characterize whether the first attribute of the element of the second attribute is displayed or hidden.

[0156] Furthermore, the step of searching for a page template from the initial script file according to a preset keyword includes:

[0157] S20101: when the front-end native component is initialized, calling the constructor function in the definition class of the front-end native component;

[0158] S20102: obtaining a coding statement of a page element display template by searching for the template keyword inside the constructor function;

[0159] S20103: Obtain the page template written on the HTML page through the coding statement.

[0160] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the step of implementing the interpolation expression includes:

[0161] S206: Identify whether the interpolation expression is used in the syntax of the page template;

[0162] S207: if the interpolation expression is used in the syntax of the page template, adding a first id attribute to a second element tag, the second element tag being the element tag in the page template that uses the interpolation expression, and the first id attribute being used to locate the second element tag;

[0163] S208: defining a replacement function method at the same level as the constructor function of the native component definition class, wherein the replacement function method includes a replacement input parameter, and the replacement input parameter represents the content to be displayed;

[0164] S209: Call the replacement function method, obtain the replacement content according to the replacement input parameter and the static value of the second element tag, and find the second element tag according to the first id attribute, and use the replacement content to replace the variables contained in the second element tag.

[0165] Further, the step of calling the replacement function method, obtaining replacement content according to the replacement input parameter and the static value of the second element tag, finding the second element tag according to the first id attribute, and replacing the variable contained in the second element tag with the replacement content includes:

[0166] S20901: monitoring whether a display instruction is collected;

[0167] S20902: if the display instruction is collected, extract the static value from the second element tag, call the replacement function method, and use the variable assignment as the replacement input parameter;

[0168] S20903: Using the replacement input parameter as a dynamic value and concatenating it with the static value according to a preset format to obtain the replacement content;

[0169] S20904: At the same level of the constructor function, search for the second element tag according to the first id attribute, and use the replacement content to modify the variables included in the second element tag.

[0170] Furthermore, in the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and two-way binding syntax expansion of the initial script file through the syntax expansion tool, the two-way binding of the form is implemented by:

[0171] S2010: Identify whether the page template uses the two-way binding of the form;

[0172] S2011: If the page template uses the two-way binding of the form, then add a second id attribute to the third element tag, and add a third id attribute to the fourth element tag, the third element tag is an element tag containing the component-binding attribute in the page template, the fourth element tag is an element tag containing the component-binding-text attribute in the page template, the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag;

[0173] S2012: defining a display function method at the same level as the constructor function of the native component definition class, wherein the display function method includes display input parameters, and the display input parameters represent content to be displayed;

[0174] S2013: when monitoring the user typing text in the input box, calling the display function method, and taking the text in the input box as the display input parameter;

[0175] S2014: Find the third element tag according to the second id attribute, and find the fourth element tag according to the third id attribute, and use the display input parameters to modify the variables contained in the third element tag and the fourth element tag.

[0176] Furthermore, the step of identifying whether the page template uses the two-way binding of the form includes:

[0177] S201001: Search and obtain an input tag and a textarea tag from the page template;

[0178] S201002: Determine whether the input tag and the textarea tag both contain the component-binding attribute;

[0179] S201003: If both the input tag and the textarea tag include the component-binding attribute, it is determined that the page template uses the two-way binding of the form.

[0180] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing related hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media provided in this application and used in the embodiments may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0181] It should be noted that, in this article, the terms "include", "comprises" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, device, first object or method including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, device, first object or method. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the presence of other identical elements in the process, device, first object or method including the element.

[0182] The above description is only a preferred embodiment of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly used in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A syntax extension method for a front-end native component, characterized in that: The method comprises: Get the initial script file of the front-end project; Executing a pre-built syntax extension tool, and using the syntax extension tool to sequentially perform syntax extensions of dynamic rendering, interpolation expressions, and two-way binding of forms on the initial script file; After completing the syntax expansion, a final script file is obtained; In the step of executing the pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the step of implementing the dynamic rendering includes: According to the preset keywords, a page template is searched from the initial script file; Identify whether the page template has a first attribute and a second attribute that appear in pair; If the page template has the first attribute and the second attribute appearing in pairs, adding a class class in the first element tags of the first attribute and the second attribute; According to the same level of the class name of the class class and the constructor function of the native component definition class, a control function method is defined, wherein the control function method includes two control input parameters, and the control input parameters represent variable values ​​for controlling the first element label of the first attribute and the second attribute to be displayed or hidden; Obtain a first attribute value variable of the first attribute and a second attribute value variable of the second attribute, and call the control function method to assign a corresponding first control input parameter to the first attribute value variable, and assign a second attribute value variable according to the second control input parameter, wherein the first control input parameter and the second control input parameter are opposite values, the first attribute value variable is used to characterize whether the first attribute of the element of the first attribute is displayed or hidden, and the second attribute value variable is used to characterize whether the first attribute of the element of the second attribute is displayed or hidden; In the step of executing the pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and bidirectional binding syntax expansion of the form on the initial script file through the syntax expansion tool, the step of implementing the interpolation expression includes: Identify whether the interpolation expression is used in the syntax of the page template; If the interpolation expression is used in the syntax of the page template, a first id attribute is added to a second element tag, the second element tag is an element tag in the page template that uses the interpolation expression, and the first id attribute is used to locate the second element tag; At the same level as the constructor function of the native component definition class, define a replacement function method, wherein the replacement function method includes a replacement input parameter, and the replacement input parameter represents the content to be displayed; Call the replacement function method, obtain the replacement content according to the replacement input parameter and the static value of the second element tag, search and obtain the second element tag according to the first id attribute, and use the replacement content to replace the variables contained in the second element tag.

2. The syntax expansion method of the front-end native component according to claim 1 is characterized in that: The step of searching for a page template from the initial script file according to a preset keyword comprises: When the front-end native component is initialized, calling the constructor function in the definition class of the front-end native component; By searching for the template keyword inside the constructor function, a coding statement of the page element display template is obtained; The page template written on the HTML page is obtained through the coding statement.

3. The syntax expansion method of the front-end native component according to claim 1, characterized in that: The step of calling the replacement function method, obtaining replacement content according to the replacement input parameter and the static value of the second element tag, searching for the second element tag according to the first id attribute, and replacing the variable contained in the second element tag with the replacement content includes: Monitor whether display instructions are collected; If the display instruction is collected, extract the static value from the second element tag, call the replacement function method, and use the variable assignment as the replacement input parameter; The replacement input parameter is used as a dynamic value and concatenated with the static value according to a preset format to obtain the replacement content; At the same level of the constructor function, the second element tag is searched according to the first id attribute, and the variables included in the second element tag are modified using the replacement content.

4. The syntax expansion method of the front-end native component according to claim 1, characterized in that: In the step of executing a pre-built syntax expansion tool and sequentially performing dynamic rendering, interpolation expression and two-way binding syntax expansion of the initial script file through the syntax expansion tool, the step of implementing the two-way binding of the form includes: Identify whether the page template uses two-way binding of the form; If the page template uses the two-way binding of the form, a second id attribute is added to the third element tag, and a third id attribute is added to the fourth element tag, the third element tag is an element tag containing the component-binding attribute in the page template, the fourth element tag is an element tag containing the component-binding-text attribute in the page template, the second id attribute is used to locate the third element tag, and the third id attribute is used to locate the fourth element tag; At the same level as the constructor function of the native component definition class, define a display function method, wherein the display function method includes a display input parameter, and the display input parameter represents the content to be displayed; When the user inputs text into the input box, the display function method is called, and the text in the input box is used as the display input parameter; The third element tag is found according to the second id attribute, and the fourth element tag is found according to the third id attribute, and the variables included in the third element tag and the fourth element tag are modified using the display input parameter.

5. The syntax expansion method of the front-end native component according to claim 4 is characterized in that: The step of identifying whether the page template uses the two-way binding of the form includes: Find the input tag and the textarea tag from the page template; Determine whether the input tag and the textarea tag both contain the component-binding attribute; If both the input tag and the textarea tag include the component-binding attribute, it is determined that the page template uses the two-way binding of the form.

6. A syntax expansion device for a front-end native component, used to implement the method as described in any one of claims 1 to 5, characterized in that: The device comprises: Get module, used to get the initial script file of the front-end project; An extension module, used to execute a pre-built syntax extension tool, and to perform syntax extensions of dynamic rendering, interpolation expressions, and two-way binding of forms on the initial script file in sequence through the syntax extension tool; The presentation module is used to obtain the final script file after completing the grammar expansion.

7. A computer device comprising a memory and a processor, wherein a computer program is stored in the memory, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 5 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images