Appointment-based programming method capable of reducing front-end code writing amount

Abstract

The invention discloses an agreement-based programming method capable of reducing the front-end code writing amount. The agreement-based programming method comprises the following steps of 1, establishing a configuration file; 2, performing initialization rendering and resource loading work on a front-end page through a page rendering and loading analyzer; 3, scanning the whole page through an agreed annotation label analyzer, identifying an annotation label, and analyzing the annotation label according to a preset agreed rule; step 4, unified scheduling and management are carried out on the process of function implementation through an agreed programming engine; 5, configuring an analyzer through agreed programming, and providing accurate operation parameters and instructions for each module of the system; according to the method, the functions of automatically calling the interface, intercepting the request, identifying the operation type, carrying out callback, rendering the page and identifying and filling the corresponding template are realized through the pre-agreed rule, so that the compiling quantity of front-end codes is reduced, the coding efficiency is improved, the joint debugging cost is reduced, and the maintainability and the expandability of the codes are enhanced.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a convention-based programming method that can reduce the amount of front-end code writing. Background Art

[0002] The current front-end code writing process involves a lot of repetitive work. For example, when developing a web application, a large amount of code is required to write templates for page layout display, call APIs to obtain or submit data, process page display effects, intercept and process requests, and other operations. This repetitive work not only increases the workload of front-end developers and reduces development efficiency, but also easily introduces errors and increases code maintenance costs.

[0003] At the same time, during the front-end and back-end joint debugging process, due to the inconsistency of interface definitions and data interaction rules, a lot of time is often required for communication and debugging; developers need to manually write code to handle various requests and responses, implement page rendering and function execution. This hard-coding method makes the code maintainable and scalable, and difficult to adapt to rapidly changing business needs. Summary of the Invention In view of the problems existing in the prior art, the present invention discloses a convention-based programming method that can reduce the amount of front-end code writing. The technical solution adopted is as follows: Step 1: By creating a configuration file, developers can uniformly configure the details of the interaction between the front-end page and the back-end interface, the display method of page elements, the timing of data requests, and the processing logic; Step 2: The parser is responsible for initializing the rendering and resource loading of the front-end page according to the pre-set rules in the configuration file. By orderly loading the framework library, rendering styles, and parsing the page structure, it builds a suitable operating environment for subsequent convention annotation tag parsing, data binding, and dynamic rendering operations. Step 3: The convention annotation tag parser scans the entire page, identifies annotation tags, and parses them according to pre-set convention rules. This parsing process clarifies the operations, data binding requirements, and interaction requirements with other modules associated with each annotation tag. This parsed information is then passed to the subsequent convention-based programming engine module, which drives the system to automatically complete interface calls and page rendering updates according to the developer's intent. Step 4: The convention-based programming engine uniformly schedules and manages the function implementation process according to the rules set in the configuration file, and then automatically completes subsequent operations by parsing the information provided by the convention annotation tag parser and combining it with the convention rules of the configuration file; Step 5: The parser is configured through conventional programming to interpret the configuration file and provide accurate operating parameters and instructions for each module of the system. Furthermore, the configuration file includes the following design: Structural design, using JSON or YAML format, the overall structure is designed as an object, which contains multiple properties to define different types of rules; Page convention design defines the specific information for the interaction between the front-end page and the back-end interface through interface conventions, including the interface address, request method, request parameter format, and return data format; and operation type identification conventions clearly define the identifiers or rules used to identify add, delete, modify, and query operations. Rendering Rules design: Define the rendering methods for different elements on the page through element rendering rules; determine how data is bound to page elements through data binding rules, including the correspondence between data fields and element attributes; Rendering strategy design specifies the rendering order of page elements through rendering order; conditional rendering strategy determines whether to render certain elements or use different rendering methods according to different conditions; Request strategy design defines the triggering conditions of interface requests through request timing; through request interception and processing, sets the interception rules and processing methods for requests; Loading strategy design determines the loading order of framework libraries, style files, and script file resources through resource loading order to optimize page loading performance; through asynchronous loading settings, for some larger resources or non-critical resources, set asynchronous loading mode to improve the initial loading speed of the page. Furthermore, the page rendering and loading parser includes the following designs: Overall architecture design: the page rendering and loading parser is an independent module with input and output interfaces. It receives the configuration file as input, processes page-related resources according to the rules and strategies therein, and finally outputs the page infrastructure that has completed preliminary rendering and resource loading for further processing by subsequent modules. Resource loading function design, the resource loading function design includes framework library loading, style file loading and other resource loading; the framework library loading determines the front-end framework to be loaded by identifying the framework type and parsing the configuration information about the framework library in the configuration file; in addition, the appropriate loading method is selected according to the configured loading strategy; the style file loading locates the style file and obtains the path information of the style file from the configuration file; through loading and application, create<link> Element, set the URL of the style file as the href attribute value, add it to the tag, so that the style can be applied to the page element; in addition to the framework library and style files, the other resource loading also involves loading images or font resources, and according to the resource list and loading strategy in the configuration file, use appropriate HTML tags or JavaScript methods to load them, and perform cache management to avoid repeated loading of the same resources; Page structure parsing and preliminary rendering function design, which includes HTML structure parsing and preliminary rendering. The HTML structure parsing uses the browser's built-in HTML parser to parse the HTML code of the page and convert it into a Document Object Model (DOM) tree structure. Through element identification and classification, the DOM tree is traversed to identify different types of HTML elements. According to the page convention rules in the configuration file, elements with specific identifiers or located in specific areas are marked, providing a basis for subsequent convention annotation tag parsing and data binding. The preliminary rendering applies style rules to the corresponding HTML elements in combination with the loaded style file to achieve preliminary style presentation of the page. Through placeholders and reservations, for areas that need to be dynamically filled through data binding later, corresponding placeholders or structural frameworks are reserved during preliminary rendering to ensure the integrity of the page layout. The interaction design with other modules includes interaction with configuration files, interaction with convention annotation tag parsers and interaction with task scheduling managers; the interaction with configuration files is to read the configuration files at startup to obtain information about resource loading order and rendering rules, and make corresponding adjustments according to configuration changes during operation; the interaction with convention annotation tag parser is to pass the parsed page structure and markup information to the convention annotation tag parser to provide it with basic data for further parsing the convention annotation tags in the page; the interaction with the task scheduling manager is to send a notification to the task scheduling manager after completing the rendering and loading of the page, informing it that the page is ready for subsequent task scheduling and processing.

[0004] Furthermore, the loading method selects asynchronous loading or synchronous loading according to the configured loading strategy; for asynchronous loading, dynamic script loading technology is used to load the framework library file from the specified CDN address or local path into the page; for synchronous loading, the framework library files are introduced in sequence according to the resource loading order, and at the same time, a loading status monitoring mechanism is added to trigger the corresponding callback function after the framework library loading is completed, notifying the parser to proceed to the next step. Furthermore, the convention annotation tag parser includes the following design: In the overall workflow design, the convention annotation tag parser obtains the preliminarily parsed page DOM structure from the page rendering loader parser, and then deeply traverses the DOM tree. During the traversal process, it searches for elements or code snippets with convention annotation tags, extracts the relevant attributes and values ​​of the tags, and parses them according to the convention rules in the configuration file. Finally, it organizes the parsing results into data output in a specific format for use by other modules. The annotation tag recognition design defines the syntax of annotation tags through tag syntax definition. Through identification, the DOM traversal technology is used to check the page DOM tree node by node. When an element containing a specified prefix attribute is encountered, it is identified as an element with an annotation tag and information including the element itself, tag name, attribute name, and attribute value is recorded. Parsing rule design, the parsing rule design includes interface call parsing, data binding parsing, operation type parsing and other functional parsing. The interface call parsing identifies the annotation tags related to the interface call and parses the information of the interface address, request method and request parameters according to the interface convention rules defined in the configuration file; the data binding parsing parses the correspondence between the data field and the page element attributes for the annotation tags related to data binding, and at the same time, determines the processing method when the data is updated according to the data binding rules in the configuration file; the operation type parsing parses the operation type value of the annotation tag used to identify the add, delete, modify and query operations, and matches it with the operation type identification convention defined in the configuration file; the other functional parsing parses the user role permission required for the element or operation through the annotation tag of permission control, and performs permission verification in subsequent operations; the bound event name and the corresponding processing function are parsed through the annotation tag of event binding, and associated with the event mechanism of the page element; Parsing structure processing and output design: By organizing the results, various information obtained from the analysis are integrated and stored according to a certain data structure; by designing a unified output interface, the organized parsing results are passed to the convention-based programming engine; Error handling and compatibility design, by setting up an error capture mechanism, records error information, including the location or element path where the error occurred, error type and error details, and gives corresponding error prompts; by adopting common DOM operations and JavaScript syntax, at the same time, testing and adapting to the differences between different browsers, ensure that the convention annotation tags can be correctly parsed in mainstream browsers.

[0005] Furthermore, the conventional programming engine includes the following modules: Module 1: The rule parsing module is responsible for loading and parsing the rules in the configuration file, converting them into internally recognizable and operable data structures; identifying different types of rules, and categorizing, storing, and managing these rules. When receiving requests from other modules, it retrieves the corresponding rules from the rule library based on the request type, parses, and applies them; Module 2: Task Scheduling Module, which schedules and manages tasks in the system based on the rules provided by the rule parsing module and the module's execution results. It sorts the tasks that need to be executed according to priority and dependency relationships, and then executes them in sequence. At the same time, it is responsible for monitoring the execution status of tasks and promptly handling abnormal situations during task execution. Module 3: Event management module, which records all events that occur in the system, finds the corresponding processing function according to the event type, and passes the event parameters to the function for processing; Module 4: Data processing module, responsible for processing and converting the data returned by the interface request to make it conform to the data binding rules and page rendering requirements. According to the data processing rules in the configuration file, the module formats, verifies, and filters the data. At the same time, during the data processing process, it handles data updates and synchronization issues to ensure that the data displayed on the page is always the latest. Module 5: Error handling module, which captures and handles exceptions and errors during system operation, adopts different handling strategies according to the type and severity of the error, and classifies and counts the errors.

[0006] Furthermore, the conventional programming configuration parser includes loading and reading configuration files, parsing various types of convention rules, providing configuration information to other modules, and configuration verification and error handling. The loading and reading of configuration files is performed by loading configuration files of different formats, specifying the storage location, reading the configuration file content, and converting it into a data structure that the system can process; the parsing of various types of convention rules includes page convention rule parsing, rendering rule parsing, request strategy parsing, and loading strategy parsing. The provision of configuration information to other modules is performed by organizing the parsed configuration information into a unified format and providing it to other modules in the system in the form of an interface. These modules perform corresponding operations based on the information provided by the configuration parser to achieve system collaboration; the configuration verification and error handling ensures that the configuration information complies with the system's convention format and business logic requirements by verifying the configuration information during the parsing of the configuration file.

[0007] Furthermore, the page convention rule parsing is performed by parsing the conventions regarding page elements, interface calls, and operation type identification in the configuration file; the rendering rule parsing is performed by analyzing the page rendering rules defined in the configuration file, including the element style, display conditions, and data binding relationships. By parsing these rules, it is clarified how the page elements are dynamically displayed according to data changes, as well as the rendering methods under different conditions; the request strategy parsing is performed by interpreting the interface request strategy specified in the configuration file to ensure that the interface request is performed according to the expected strategy; the loading strategy parsing is performed by processing the resource loading strategy in the configuration file, including the loading order of framework libraries, style files, and script file resources, and asynchronous loading settings, to optimize page loading performance.

[0008] Furthermore, the task scheduling manager is responsible for coordinating various scheduling tasks of the page to ensure that the loading and rendering operations of the page are carried out in an orderly manner.

[0009] Furthermore, it also includes a page request interceptor, an interface request manager, a template loader and a data injection and rendering module. The page request interceptor is used to monitor the request behavior of the page, perform interception operations before the request is sent, mark the area that needs to be processed, and provide support for subsequent request processing and page updates; the interface request manager is responsible for interacting with the back-end interface, sending requests and obtaining return values ​​according to the agreed rules; the template loader is responsible for asynchronously processing the data returned by the interface and binding the data to the corresponding template; the data injection and rendering module is responsible for injecting the template bound to the data into the DOM structure of the page, and rendering and displaying it so that the page presents the final user-visible state.

[0010] Beneficial effects of the present invention:

[0011] 1. Improve coding efficiency: By automatically completing repetitive tasks such as calling interfaces and page rendering, the amount of code written by front-end developers is reduced, greatly improving coding speed. Code that originally required a lot of time to write can now be automatically implemented by the system, significantly shortening the development cycle;

[0012] 2. Reduced joint debugging costs: Unified front-end and back-end agreement rules and standardized interface requests reduce communication costs and debugging time for front-end and back-end developers in interface definition and data interaction, reducing the complexity and difficulty of joint debugging.

[0013] 3. Strong code maintainability and scalability: The use of hard coding is reduced, making the code structure clearer, easier to understand and maintain. When business needs change, only the agreed rules need to be adjusted without modifying a large amount of code, which improves the scalability of the code.

[0014] 4. Reduce the occurrence of errors: The automated processing process reduces the errors that may occur when manually writing code, and improves the stability and reliability of the software. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 Flow chart of the method of the present invention; DETAILED DESCRIPTION

[0016] Example 1

[0017] like Figure 1 As shown, the present invention discloses a convention-based programming method that can reduce the amount of front-end code writing. The technical solution adopted is to include the following steps: Step 1: By creating a configuration file, developers can uniformly configure the details of the interaction between the front-end page and the back-end interface, the display method of page elements, the timing of data requests, and the processing logic. The configuration file includes the following designs: The structure is designed in JSON or YAML format. The overall structure is designed as an object, which contains multiple attributes to define different types of rules. The following is an example of JSON format: Page convention design defines the specific information of the interaction between the front-end page and the back-end interface through interface conventions, including the interface address, request method, request method such as GET, POST, request parameter format and return data format; Through the operation type identification convention, the identifiers or rules used to identify add, delete, modify, and query operations are clearly defined, such as specific request parameter values ​​or request header information; Rendering Rules design, through element rendering rules, defines the rendering methods for different elements in the page; such as the style and display conditions of HTML elements; Determine how data is bound to page elements through data binding rules, including the correspondence between data fields and element attributes; Rendering Strategy design specifies the order in which page elements are rendered, such as rendering the header navigation bar first and then the main content. Through conditional rendering strategies, decide whether to render certain elements or use different rendering methods based on different conditions, such as data status and user permissions; Request strategy design defines the triggering conditions of interface requests through request timing, such as when the page is loaded and the user clicks the button; Through request interception and processing, set the interception rules and processing methods for requests; such as adding request information and preprocessing request parameters; Loading strategy design: determine the loading order of framework libraries, style files, and script file resources through resource loading order to optimize page loading performance; Through asynchronous loading settings, for some larger resources or non-critical resources, set asynchronous loading mode to improve the initial loading speed of the page; Step 2: The page rendering and loading parser is responsible for initializing the rendering and resource loading of the front-end page according to the pre-set rules in the configuration file. By orderly loading the framework library, rendering style, and parsing the page structure, a suitable operating environment is established for subsequent convention annotation tag parsing, data binding, and dynamic rendering operations. The page rendering and loading parser includes the following designs: Overall architecture design: the page rendering and loading parser is an independent module with input and output interfaces. It receives the configuration file as input, processes page-related resources according to the rules and strategies therein, and finally outputs the page infrastructure that has completed preliminary rendering and resource loading for further processing by subsequent modules. Resource loading function design, including framework library loading, style file loading and other resource loading; The framework library loading identifies the framework type, parses the configuration information about the framework library in the configuration file, and determines the front-end framework that needs to be loaded; such as React, Vue, and Angular; in addition, the appropriate loading method is selected according to the configured loading strategy; the loading method selects asynchronous loading or synchronous loading according to the configured loading strategy; for asynchronous loading, dynamic script loading technology is used, such as document.createElement('script'), which loads the framework library file from the specified CDN address or local path to the page without blocking the loading of other resources on the page; for synchronous loading, the framework library files are introduced in the order of resource loading, and a loading status monitoring mechanism is added at the same time. After the framework library is loaded, the corresponding callback function is triggered to notify the parser to proceed to the next step; the style file loading is located by the style file, and the path information of the style file is obtained from the configuration file; by loading and applying, the style file is created. <link> Element, set the URL of the style file as the href attribute value, add it to the tag, so that the style can be applied to the page element; in addition to the framework library and style files, the other resource loading also involves loading images or font resources, and according to the resource list and loading strategy in the configuration file, use appropriate HTML tags or JavaScript methods to load them, and perform cache management to avoid repeated loading of the same resources; The page structure parsing and preliminary rendering function design includes HTML structure parsing and preliminary rendering. The HTML structure parsing uses the browser's built-in HTML parser through the parser selection. For example, in a JavaScript environment, the DOMParser object can be used to parse the HTML code of the page and convert it into a Document Object Model (DOM) tree structure; through element identification and classification, the DOM tree is traversed to identify different types of HTML elements, such as, 、 、 <button>, and according to the page convention rules in the configuration file, elements with specific identifiers or located in specific areas are marked to provide a basis for subsequent convention annotation tag parsing and data binding; the preliminary rendering applies style rules to the corresponding HTML elements through style application in combination with the loaded style file to achieve the preliminary style presentation of the page; through placeholders and reservations, for areas that need to be dynamically filled through data binding later, corresponding placeholders or structural frameworks are reserved during the preliminary rendering to ensure the integrity of the page layout; Interaction design with other modules, including interaction with configuration files, interaction with convention annotation tag parsers, and interaction with task scheduling managers; interaction with configuration files involves reading the configuration files at startup to obtain information about resource loading order and rendering rules, and making corresponding adjustments according to configuration changes during operation; interaction with convention annotation tag parsers involves passing the parsed page structure and markup information to the convention annotation tag parser to provide it with basic data for further parsing the convention annotation tags in the page; interaction with the task scheduling manager involves sending a notification to the task scheduling manager after completing page rendering and loading, informing it that the page is ready for subsequent task scheduling and processing; The task scheduling manager is responsible for coordinating the various scheduling tasks of the page to ensure that the loading and rendering operations of the page are carried out in an orderly manner; when the system starts, the task scheduling manager reads the configuration file to obtain the loading order and dependency information of the page, and maintains a task queue to sort the page scheduling tasks according to priority and dependency, such as loading the basic framework library and style files first, and then loading the static template; when loading the static template, it will obtain the template file from the local storage or server according to the path specified in the configuration file, and parse it into a DOM structure; at the same time, the task scheduling manager will monitor the execution status of the task. When a task is completed, it will check the task queue to determine the next executable task; if other tasks that a task depends on have not been completed, the task will wait until all dependent tasks are completed before it is executed; Step 3: Scan the entire page through the convention annotation tag parser, identify annotation tags, and parse them according to pre-set convention rules. This parsing can clarify the operations, data binding requirements, and interaction requirements with other modules associated with each annotation tag. This parsed information is passed to the subsequent convention-based programming engine module, driving the system to automatically complete interface calls and page rendering updates according to the developer's intentions. The convention annotation tag parser includes the following designs: In the overall workflow design, the convention annotation tag parser obtains the preliminarily parsed page DOM structure from the page rendering loader parser, and then deeply traverses the DOM tree. During the traversal process, it searches for elements or code snippets with convention annotation tags, extracts the relevant attributes and values ​​of the tags, and parses them according to the convention rules in the configuration file. Finally, it organizes the parsing results into data output in a specific format for use by other modules. The annotation tag recognition design defines the syntax specifications of the agreed annotation tags through tag syntax definition. For example, a method similar to HTML custom attributes is used to identify the agreed annotation tags with a specific prefix (such as data-api-). Through the identification method, the DOM traversal technology is used to check the page DOM tree node by node. When an element containing an attribute with a agreed prefix is ​​encountered, it is identified as an element with an annotation tag, and information including the element itself, tag name, attribute name, and attribute value is recorded. Parsing rule design, the parsing rule design includes interface call parsing, data binding parsing, operation type parsing and other functional parsing; the interface call parsing identifies the annotation tags related to the interface call, and parses the interface address, request method, and request parameter information according to the interface convention rules defined in the configuration file; the data binding parsing parses the correspondence between the data field and the page element attributes for the annotation tags related to data binding, and at the same time, determines the processing method when the data is updated according to the data binding rules in the configuration file; the operation type parsing parses the operation type value of the annotation tag used to identify the add, delete, modify and query operations, and matches it with the operation type identification convention defined in the configuration file; the other functional parsing parses the user role permissions required for the element or operation through the annotation tag of permission control, and performs permission verification in subsequent operations; the bound event name and the corresponding processing function are parsed through the annotation tag of event binding, and associated with the event mechanism of the page element; Parsing structure processing and output design: By collating the results, various information obtained from the analysis are integrated and stored according to a certain data structure. For example, JSON objects are used to organize data. Each element with an annotated tag corresponds to a JSON object, which contains fields such as element identifiers and various functional information parsed from the tags. By designing a unified output interface, the organized parsing results are passed to the convention-based programming engine. The interface can be in the form of a function call, with the parsing results passed in as parameters, or in the form of event triggering. When the parsing is completed, a specific event is triggered, and other modules listen to the event to obtain the parsing results. Error handling and compatibility design: By setting up an error capture mechanism, error information is recorded, including the location or element path where the error occurred, the error type and error details, and corresponding error prompts are given. By adopting common DOM operations and JavaScript syntax, and testing and adapting to the differences between different browsers, we ensure that the convention annotation tags can be correctly parsed in mainstream browsers. Step 4: The convention-based programming engine uniformly schedules and manages the function implementation process according to the rules set in the configuration file, and then automatically completes subsequent operations by parsing the information provided by the convention annotation tag parser and combining it with the convention rules of the configuration file. The convention-based programming engine includes the following modules: Module 1: The rule parsing module is responsible for loading and parsing the rules in the configuration file, converting them into internally recognizable and operable data structures; identifying different types of rules, and categorizing, storing, and managing these rules. When receiving requests from other modules, it retrieves the corresponding rules from the rule library based on the request type, parses, and applies them; Module 2: Task Scheduling Module, which schedules and manages tasks in the system based on the rules provided by the rule parsing module and the module's execution results. It sorts the tasks that need to be executed according to priority and dependency relationships, and then executes them in sequence. At the same time, it is responsible for monitoring the execution status of tasks and promptly handling abnormal situations during task execution. Module 3: Event Management Module, which records all events that occur in the system, searches for the corresponding processing function based on the event type, and passes the event parameters to the function for processing. For example, when an interface request is successfully triggered, the event management module calls the data processing module to process the returned data. In this way, loose coupling and asynchronous communication between the modules of the system are achieved; Module 4: Data processing module, responsible for processing and converting the data returned by the interface request to make it conform to the data binding rules and page rendering requirements. According to the data processing rules in the configuration file, the module formats, verifies, and filters the data. For example, it extracts specific fields from the JSON data returned by the interface and binds them to the page elements according to the data binding rules. At the same time, during the data processing process, it handles data updates and synchronization issues to ensure that the data displayed on the page is always the latest. Module 5: Error handling module. During system operation, it captures and handles exceptions and errors, and adopts different handling strategies based on the type and severity of the error. For example, for recoverable errors, such as interface request timeouts, it attempts to resend the request. For unrecoverable errors, such as configuration file format errors, it records detailed error information and provides friendly error prompts to developers or users. At the same time, it categorizes and compiles statistics on errors to enable developers to analyze system stability and reliability. The convention-based programming engine coordinates the collaborative work of various modules based on pre-set convention rules to realize the automated processing of various tasks in front-end development. When the system starts, the convention-based programming engine loads and parses various rules in the configuration file. When it receives information from the convention annotation tag parser, it plans and schedules tasks based on these rules. According to the convention rules of interface calls, it determines the requested interface address, request method, and parameter format; according to the data binding rules, it clarifies the correspondence between data and page elements. During operation, the convention-based programming engine triggers corresponding operations by monitoring various events in the system. When the page rendering and loading parser completes the initial rendering of the page, it triggers an event to notify the convention-based programming engine. After receiving the event, the engine starts the convention annotation tag parser to parse the page. Similarly, when the interface request manager completes the interface request and returns data, it also triggers an event to notify the engine to process the data and update the page. This event-driven approach enables asynchronous communication and efficient collaboration between system modules. Step 5: The conventional programming configuration parser is responsible for interpreting the configuration file and providing accurate operating parameters and instructions for each module of the system; the conventional programming configuration parser includes loading and reading configuration files, parsing various convention rules, providing configuration information to other modules, and configuration verification and error handling. The loading and reading of configuration files is performed by loading configuration files of different formats, specifying the storage location, reading the configuration file content, and converting it into a data structure that the system can process; the parsing of various convention rules includes page convention rule parsing, rendering rule parsing, request strategy parsing, and loading strategy parsing. The page convention rule parsing is performed by parsing the conventions in the configuration file regarding page elements, interface calls, and operation type identification; the rendering rule parsing is performed by analyzing the page rendering rules defined in the configuration file, including the element style, display conditions, and data binding relationships. By parsing these rules, it is clear how page elements are dynamically displayed according to data changes, as well as how they are rendered under different conditions; the request strategy parsing ensures that interface requests are performed in accordance with the expected strategy by interpreting the interface request strategy specified in the configuration file; the loading strategy parsing optimizes page loading performance by processing the resource loading strategy in the configuration file, including the loading order of framework libraries, style files, and script file resources, and asynchronous loading settings; the provision of configuration information to other modules is carried out by organizing the parsed configuration information into a unified format and providing it to other modules in the system in the form of an interface. These modules perform corresponding operations based on the information provided by the configuration parser to achieve system collaboration; the configuration verification and error handling ensures that the configuration information complies with the system's agreed format and business logic requirements by verifying the configuration information during the parsing of the configuration file; It also includes a page request interceptor, an interface request manager, a template loader and a data injection and rendering module. The page request interceptor is used to monitor the request behavior of the page, intercept the request before it is sent, mark the area that needs to be processed, and provide support for subsequent request processing and page updates. The page request interceptor is implemented by using a specific API in the browser environment (such as the interception function of the Fetch API or the interception mechanism of the browser extension). When a page initiates a request, the interceptor will capture the request. It will check the URL, request method, request header and request parameter information of the request according to the agreed rules in the configuration file. If the request meets certain conditions (for example, the requested interface matches a certain agreed interface), the interceptor will mark the page processing area corresponding to the request. These marking information can be used to determine which parts of the page should be updated with the data returned by the request. The interceptor can also pre-process the request when it is intercepted, such as adding additional request header information, modifying request parameters, and then forwarding the request. The interface request manager is responsible for interacting with the back-end interface, sending requests and obtaining return values ​​according to the agreed rules; the interface request manager obtains relevant information of the interface request from the configuration file and the agreed annotation tag parser, including the interface address, request method (GET, POST, PUT), request parameters, and request header information; when an interface request needs to be initiated, it will construct an HTTP request based on this information; if it is a GET request, it will splice the request parameters into the URL; if it is a POST request, it will include the parameters in the request body; after the request is sent, the interface request manager will wait for the response from the back-end; when the response is received, it will check the response status code to determine whether the request is successful; if the response status code indicates success, it will extract the response data; if the request fails, it will process it according to the configured error handling strategy, such as retrying the request and displaying an error message; after obtaining the response data, the interface request manager passes the data to the template loader for subsequent processing; The template loader is responsible for asynchronously processing the data returned by the interface and binding the data to the corresponding template. After receiving the data returned by the interface request manager, the template loader will first asynchronously process the data according to the data processing rules in the configuration file. This may include data format conversion, data filtering, and data merging operations. For example, the required fields are extracted from the complex JSON data returned by the interface. After the processing is completed, the template loader will bind the data to the corresponding template according to the grammatical rules of the template. The template engine (such as Handlebars and EJS) provides data binding functions, and the template loader will call these functions to fill the data into the placeholders of the template. During the binding process, the template loader will handle the dynamic update of the data, and when the data changes, the corresponding part of the template can be updated in time. After the binding is completed, the template loader passes the template with the bound data to the data injection and rendering module. The data injection and rendering module is responsible for injecting the template bound to the data into the DOM structure of the page and rendering and displaying it so that the page presents the final user-visible state; the data injection and rendering module receives the template bound to the data passed by the template loader; it first determines the insertion position of the template in the page according to the rendering rules in the configuration file; for example, the template may be inserted into a specific DOM container; after insertion, it will call the browser's rendering engine to render the template containing the data; during the rendering process, the style rules in the configuration file will be applied to ensure that the style of the page is displayed correctly; at the same time, the module will handle dynamic updates of the page. When the data changes, it will re-render the relevant parts to maintain consistency between the page and the data; in addition, it will also handle some optimization operations in the rendering process, such as batch updating of DOM to avoid reflow and redrawing, so as to improve the page loading speed and user experience.

[0018] Technical features not described in detail in the present invention can be achieved by any existing technology.

[0019] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present application.< / button>

Claims

1. A convention-based programming method that can reduce the amount of front-end code writing, characterized in that: The following steps are involved: Step 1: By creating a configuration file, developers can uniformly configure the details of the interaction between the front-end page and the back-end interface, the display method of page elements, the timing of data requests, and the processing logic; Step 2: The parser is responsible for initializing the rendering and resource loading of the front-end page according to the pre-set rules in the configuration file. By orderly loading the framework library, rendering styles, and parsing the page structure, it builds a suitable operating environment for subsequent convention annotation tag parsing, data binding, and dynamic rendering operations. Step 3: The convention annotation tag parser scans the entire page, identifies annotation tags, and parses them according to pre-set convention rules. This parsing process clarifies the operations, data binding requirements, and interaction requirements with other modules associated with each annotation tag. This parsed information is then passed to the subsequent convention-based programming engine module, which drives the system to automatically complete interface calls and page rendering updates according to the developer's intent. Step 4: The convention-based programming engine uniformly schedules and manages the function implementation process according to the rules set in the configuration file, and then automatically completes subsequent operations by parsing the information provided by the convention annotation tag parser and combining it with the convention rules of the configuration file; Step 5: The parser is configured through conventional programming to interpret the configuration file and provide accurate operating parameters and instructions for each module of the system.

2. A convention-based programming method capable of reducing the amount of front-end code writing according to claim 1, characterized in that: The configuration file includes the following design: Structural design, using JSON or YAML format, the overall structure is designed as an object, which contains multiple properties to define different types of rules; Page convention design defines the specific information for the interaction between the front-end page and the back-end interface through interface conventions, including the interface address, request method, request parameter format, and return data format; and operation type identification conventions clearly define the identifiers or rules used to identify add, delete, modify, and query operations. Rendering Rules design: Define the rendering methods for different elements on the page through element rendering rules; determine how data is bound to page elements through data binding rules, including the correspondence between data fields and element attributes; Rendering Strategy design, which specifies the rendering order of page elements through rendering order; Through conditional rendering strategies, decide whether to render certain elements or use different rendering methods according to different conditions; Request strategy design defines the triggering conditions of interface requests through request timing; through request interception and processing, sets the interception rules and processing methods for requests; Loading strategy design determines the loading order of framework libraries, style files, and script file resources through resource loading order to optimize page loading performance; through asynchronous loading settings, for some larger resources or non-critical resources, set asynchronous loading mode to improve the initial loading speed of the page.

3. The convention-based programming method for reducing the amount of front-end code writing according to claim 1, characterized in that: The page rendering and loading parser includes the following designs: Overall architecture design: the page rendering and loading parser is an independent module with input and output interfaces. It receives the configuration file as input, processes page-related resources according to the rules and strategies therein, and finally outputs the page infrastructure that has completed preliminary rendering and resource loading for further processing by subsequent modules. Resource loading function design, the resource loading function design includes framework library loading, style file loading and other resource loading; the framework library loading determines the front-end framework to be loaded by identifying the framework type and parsing the configuration information about the framework library in the configuration file; in addition, the appropriate loading method is selected according to the configured loading strategy; the style file loading locates the style file and obtains the path information of the style file from the configuration file; through loading and application, create <link> Element, set the URL of the style file as the href attribute value, add it to the tag, so that the style can be applied to the page element; in addition to the framework library and style files, the other resource loading also involves loading images or font resources, and according to the resource list and loading strategy in the configuration file, use appropriate HTML tags or JavaScript methods to load them, and perform cache management to avoid repeated loading of the same resources; Page structure parsing and preliminary rendering function design, which includes HTML structure parsing and preliminary rendering. The HTML structure parsing uses the browser's built-in HTML parser to parse the HTML code of the page and convert it into a Document Object Model (DOM) tree structure. Through element identification and classification, the DOM tree is traversed to identify different types of HTML elements. According to the page convention rules in the configuration file, elements with specific identifiers or located in specific areas are marked, providing a basis for subsequent convention annotation tag parsing and data binding. The preliminary rendering applies style rules to the corresponding HTML elements in combination with the loaded style file to achieve preliminary style presentation of the page. Through placeholders and reservations, for areas that need to be dynamically filled through data binding later, corresponding placeholders or structural frameworks are reserved during preliminary rendering to ensure the integrity of the page layout. Interaction design with other modules, including interaction with configuration files, interaction with convention annotation tag parsers, and interaction with task scheduling managers; The interaction with the configuration file is to read the configuration file at startup to obtain information about the resource loading order and rendering rules, and make corresponding adjustments according to the configuration changes during operation; the interaction with the convention annotation tag parser is to pass the parsed page structure and markup information to the convention annotation tag parser to provide it with basic data for further parsing the convention annotation tags in the page; the interaction with the task scheduling manager is to send a notification to the task scheduling manager after completing the rendering and loading of the page, informing it that the page is ready for subsequent task scheduling and processing.

4. The convention-based programming method for reducing the amount of front-end code writing according to claim 3, characterized in that: The loading method selects asynchronous loading or synchronous loading according to the configured loading strategy; asynchronous loading uses dynamic script loading technology to load the framework library file from the specified CDN address or local path to the page; synchronous loading introduces the framework library files in sequence according to the resource loading order, and at the same time, adds a loading status monitoring mechanism to trigger the corresponding callback function after the framework library is loaded, notifying the parser to proceed to the next step.

5. The convention-based programming method capable of reducing the amount of front-end code writing according to claim 1, characterized in that: The convention annotation tag parser includes the following designs: In the overall workflow design, the convention annotation tag parser obtains the preliminarily parsed page DOM structure from the page rendering loader parser, and then deeply traverses the DOM tree. During the traversal process, it searches for elements or code snippets with convention annotation tags, extracts the relevant attributes and values ​​of the tags, and parses them according to the convention rules in the configuration file. Finally, it organizes the parsing results into data output in a specific format for use by other modules. The annotation tag recognition design defines the syntax of annotation tags through tag syntax definition. Through identification, the DOM traversal technology is used to check the page DOM tree node by node. When an element containing a specified prefix attribute is encountered, it is identified as an element with an annotation tag and information including the element itself, tag name, attribute name, and attribute value is recorded. Parsing rule design, the parsing rule design includes interface call parsing, data binding parsing, operation type parsing and other functional parsing. The interface call parsing identifies the annotation tags related to the interface call and parses the information of the interface address, request method and request parameters according to the interface convention rules defined in the configuration file; the data binding parsing parses the correspondence between the data field and the page element attributes for the annotation tags related to data binding, and at the same time, determines the processing method when the data is updated according to the data binding rules in the configuration file; the operation type parsing parses the operation type value of the annotation tag used to identify the add, delete, modify and query operations, and matches it with the operation type identification convention defined in the configuration file; the other functional parsing parses the user role permission required for the element or operation through the annotation tag of permission control, and performs permission verification in subsequent operations; the bound event name and the corresponding processing function are parsed through the annotation tag of event binding, and associated with the event mechanism of the page element; Parsing structure processing and output design: by arranging the results, integrating the various information obtained from the analysis and storing them according to a certain data structure; By designing a unified output interface, the sorted parsing results are passed to the convention-based programming engine; Error handling and compatibility design, by setting up an error capture mechanism, records error information, including the location or element path where the error occurred, error type and error details, and gives corresponding error prompts; by adopting common DOM operations and JavaScript syntax, at the same time, testing and adapting to the differences between different browsers, ensure that the convention annotation tags can be correctly parsed in mainstream browsers.

6. A convention-based programming method capable of reducing the amount of front-end code writing according to claim 1, characterized in that: The convention-based programming engine includes the following modules: Module 1: The rule parsing module is responsible for loading and parsing the rules in the configuration file, converting them into internally recognizable and operable data structures; identifying different types of rules, and categorizing, storing, and managing these rules. When receiving requests from other modules, it retrieves the corresponding rules from the rule library based on the request type, parses, and applies them; Module 2: Task Scheduling Module, which schedules and manages tasks in the system based on the rules provided by the rule parsing module and the module's execution results. It sorts the tasks that need to be executed according to priority and dependency relationships, and then executes them in sequence. At the same time, it is responsible for monitoring the execution status of tasks and promptly handling abnormal situations during task execution. Module 3: Event management module, which records all events that occur in the system, finds the corresponding processing function according to the event type, and passes the event parameters to the function for processing; Module 4: Data processing module, responsible for processing and converting the data returned by the interface request to make it conform to the data binding rules and page rendering requirements. According to the data processing rules in the configuration file, the module formats, verifies, and filters the data. At the same time, during the data processing process, it handles data updates and synchronization issues to ensure that the data displayed on the page is always the latest. Module 5: Error handling module, which captures and handles exceptions and errors during system operation, adopts different handling strategies according to the type and severity of the error, and classifies and counts the errors.

7. A convention-based programming method capable of reducing the amount of front-end code writing according to claim 1, characterized in that: The conventional programming configuration parser includes loading and reading configuration files, parsing various types of convention rules, providing configuration information to other modules, and configuration verification and error handling. The loading and reading of configuration files involves loading configuration files of different formats, specifying storage locations, reading the contents of configuration files, and converting them into data structures that the system can process; the parsing of various types of convention rules includes page convention rule parsing, rendering rule parsing, request strategy parsing, and loading strategy parsing; the provision of configuration information to other modules involves organizing the parsed configuration information into a unified format and providing it to other modules in the system in the form of an interface. These modules perform corresponding operations based on the information provided by the configuration parser to achieve system collaboration; the configuration verification and error handling involves verifying the configuration information during the parsing of the configuration file to ensure that it complies with the system's convention format and business logic requirements.

8. The convention-based programming method for reducing the amount of front-end code writing according to claim 7, characterized in that: The page convention rule parsing is performed by parsing the conventions in the configuration file regarding page elements, interface calls, and operation type identification; the rendering rule parsing is performed by analyzing the page rendering rules defined in the configuration file, including the element style, display conditions, and data binding relationships. By parsing these rules, it is clarified how page elements are dynamically displayed according to data changes, as well as the rendering methods under different conditions; the request strategy parsing is performed by interpreting the interface request strategy specified in the configuration file to ensure that the interface request is performed according to the expected strategy; the loading strategy parsing is performed by processing the resource loading strategy in the configuration file, including the loading order of framework libraries, style files, and script file resources, and asynchronous loading settings, to optimize page loading performance.

9. The convention-based programming method capable of reducing the amount of front-end code writing according to claim 3, characterized in that: The task scheduling manager is responsible for coordinating various scheduling tasks of the page to ensure that the loading and rendering operations of the page are carried out in an orderly manner.

10. The convention-based programming method capable of reducing the amount of front-end code writing according to claim 1, characterized in that: It also includes a page request interceptor, an interface request manager, a template loader and a data injection and rendering module. The page request interceptor is used to monitor the request behavior of the page, intercept the request before it is sent, mark the area that needs to be processed, and provide support for subsequent request processing and page updates; the interface request manager is responsible for interacting with the back-end interface, sending requests and obtaining return values ​​according to the agreed rules; the template loader is responsible for asynchronously processing the data returned by the interface and binding the data to the corresponding template; the data injection and rendering module is responsible for injecting the template bound to the data into the DOM structure of the page and rendering and displaying it so that the page presents the final user-visible state.

Images