Public component development management method

Abstract

The invention provides a public component development management method. The method comprises the following steps: establishing a code writing specification, a dynamic expansion mechanism, a code annotation specification and a version control strategy for developing a public component; establishing a development team training mechanism and a code review mechanism based on the code writing specification; designing dynamic parameters based on a dynamic expansion mechanism; optimizing the annotation document based on the code annotation specification; and managing the version of each public component in the public component library based on the version control strategy. By establishing a series of management specifications and optimization mechanisms, the development efficiency, quality and maintainability of the public component are improved, and the flexibility and expandability of the public component are enhanced. Through the implementation of the steps, it is ensured that developers can rapidly and easily integrate and call the public components, and meanwhile customized configuration and expansion can be conducted according to specific requirements of the project, so that the development efficiency is improved, the maintenance cost is reduced, and successful implementation of the project is promoted.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method for developing and managing public components. Background Technology

[0002] In front-end development, especially when using the Vue.js framework (a JavaScript framework for building user interfaces), developers often need to implement similar functional modules for multiple projects. These modules typically include buttons, forms, pop-ups, etc. However, as the number of projects increases, developers face problems of code redundancy and maintenance difficulties. Especially when requirements change frequently, developers have to modify the same code one by one in multiple projects, leading to low development efficiency and a high risk of errors.

[0003] For example, the implementation of user login functionality may be similar across various productized management systems. If each project implements this functionality separately, developers not only need to repeatedly write similar code, but also need to modify the implementation in each project separately when requirements change, greatly reducing development efficiency and increasing the risk of errors. Therefore, encapsulating common components is particularly important.

[0004] Current technologies suffer from the following problems in the design of common components: 1. Insufficient coding standards lead to developers writing code in various styles. 2. Inadequate support for dynamic parameters easily results in parameter passing errors. 3. Insufficiently detailed error handling mechanisms make it difficult to quickly locate problems. 4. Automatically generated documentation lacks clarity and examples, resulting in a poor user experience. 5. Unclear version control strategies cause confusion among developers between different versions. These problems severely impact the design and usage efficiency of common components, thereby reducing the overall development efficiency of the team. Summary of the Invention

[0005] To address the shortcomings of existing technologies, this application provides a common component development and management method, aiming to solve the problem of low efficiency in the design and development of common components in existing technologies.

[0006] To achieve the above objectives and other advantages, this application adopts the following technical solution: This application provides a public component development management method, including: Establish coding standards, dynamic extension mechanisms, code commenting standards, and version control strategies for developing common components; Based on the aforementioned coding standards, establish a development team training mechanism and a code review mechanism; Based on the aforementioned dynamic expansion mechanism, dynamic parameters are designed; Based on the aforementioned code commenting standards, optimize the comment documentation; Based on the version control strategy, the version of each public component in the public component library is managed.

[0007] According to the public component development management method provided in this application, the steps for establishing code writing standards for developing public components include: Use camelCase naming conventions for functions and variables; The parameter types and formats required to construct each of the aforementioned common components; Build an error capture mechanism to respond in real time to error codes that do not conform to naming rules and coding standards.

[0008] According to the public component development management method provided in this application, the steps for establishing a development team training mechanism and a code review mechanism based on the aforementioned code writing standards include: Based on the aforementioned coding standards, a training plan and training materials were developed. Example code was used in the training materials for demonstration, and phased training assessments were conducted based on the aforementioned training plan. Establish a code review mechanism and implement it during the development of common components to identify and correct code that does not conform to coding standards.

[0009] According to the public component development management method provided in this application, the steps of establishing a development team training mechanism and a code review mechanism based on the code writing specifications also include: Establish a developer feedback mechanism to collect problems or suggestions encountered during the development of public components, form feedback opinions, and use the feedback opinions to optimize the code writing standards.

[0010] According to a public component development and management method provided in this application, the dynamic extension mechanism includes the use of a slot mechanism and dynamic parameter design; Based on the aforementioned dynamic expansion mechanism, the steps for designing dynamic parameters include: At the UI design level of public components, a slot mechanism is introduced, allowing custom DOM elements to be inserted at predefined positions within public components; At the logical level of common components, dynamic parameter design with optional and variable parameters is provided according to the needs of different projects; Provide detailed documentation to clearly describe how to use dynamic parameters.

[0011] According to the public component development and management method provided in this application, the detailed description document includes the type, format, value range and usage examples of each parameter in the public component, as well as how to add, modify or delete parameters.

[0012] According to the public component development management method provided in this application, the steps for optimizing the comment documentation based on the code commenting specifications include: Define a unified annotation format, and describe the usage of common components in the annotation documentation based on the annotation format; Sample code is provided in the documentation, which includes different request scenarios for the common components and parameter combinations under the request scenarios.

[0013] According to the public component development management method provided in this application, the steps of managing the version of each public component in the public component library based on the version control strategy include: Define version number naming rules and create version update logs; Define the version release process and describe version compatibility information; Version management tools are used to track and manage versions by creating corresponding tags for common components in each version.

[0014] According to the public component development management method provided in this application, the steps for formulating a version release process and describing version compatibility information include: Update the version number in the code; The version update log records the changes for each version; Run automated testing tools to test the new version of public components; Release the new version to the version control system and include compatibility information for each version in the API documentation.

[0015] According to the public component development and management method provided in this application, a semantic version control specification is adopted to define the version number naming rules, and the version number includes the major version number, minor version number and revision number.

[0016] This application provides a common component development management method. It establishes code writing standards, dynamic extension mechanisms, code commenting standards, and version control strategies for developing common components. Based on the code writing standards, it establishes development team training and code review mechanisms. Based on the dynamic extension mechanism, it designs dynamic parameters. Based on the code commenting standards, it optimizes comment documentation. Based on the version control strategy, it manages the version of each common component in the common component library. By establishing a series of management standards and optimization mechanisms, this application improves the development efficiency, quality, and maintainability of common components, and enhances their flexibility and scalability. Through the implementation of the above steps, it ensures that developers can quickly and easily integrate and call common components, while also enabling customized configuration and extension according to specific project needs, thereby improving development efficiency, reducing maintenance costs, and promoting successful project implementation. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other implementation methods can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is a flowchart illustrating the public component development and management method provided in the embodiments of this application. Detailed Implementation

[0019] The above description is merely an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings.

[0020] It should be noted that those skilled in the art will understand, explicitly and implicitly, that the embodiments described in this application can be combined with other embodiments without conflict. Unless otherwise defined, the technical or scientific terms used in this application should have the ordinary meaning understood by those skilled in the art. The terms "a," "an," "an," "the," and similar words used in this application do not indicate quantity limitation and can represent singular or plural. The terms "comprising," "including," "having," and any variations thereof used in this application are intended to cover non-exclusive inclusion; the terms "first," "second," "third," etc., used in this application are merely to distinguish similar objects and do not represent a specific ordering of objects.

[0021] Reference Figure 1 As shown in the embodiment of this application, a public component development management method includes: Step S1: Establish code writing standards, dynamic extension mechanisms, code commenting standards, and version control strategies for developing common components.

[0022] In this embodiment, step S1, establishing code writing standards for developing common components, specifically includes: Step S101: Name functions and variables using camelCase naming conventions; Step S102: Construct the parameter types and formats required for each common component; Step S103: Build an error capture mechanism to respond in real time to error codes that do not conform to naming rules and coding standards.

[0023] Specifically, naming conventions are fundamental to code readability. For functions and variables used in developing common components, a consistent naming style should be adopted, such as using camelCase to improve readability. CamelCase stipulates that the first letter of each word is capitalized (the first word is lowercase), the remaining letters are lowercase, and words are not separated by spaces or underscores. For example, a navigation bar component should be named menuList, not MenuList or menu_list. Therefore, consistent naming rules facilitate team collaboration and reduce communication barriers and code comprehension difficulties caused by inconsistent naming.

[0024] Defining parameter types and formats is a crucial part of component interface design, directly impacting component usability and stability. Therefore, it's essential to clearly define the parameter types and formats required for each public component. For example, a navigation bar component requires two parameters: `menuList` (array type) and `menuColor` (string type). These parameter specifications should be detailed in the component's documentation for developers' reference.

[0025] To address component naming errors and parameter definition errors, predefined error types or classes are used to define different types of errors. Each error type should include an error code, error message, and optional additional information. These error types can be configured in development tools or IDEs to form an error capture mechanism, automatically detecting and highlighting code that violates naming rules during code writing or submission. Real-time error feedback encourages developers to correct problems promptly, improving code quality.

[0026] For all captured parameter errors, a notification bubble can be displayed, which can include the error type, error message, parameter value, etc.

[0027] Step S2: Based on coding standards, establish a training mechanism and code review mechanism for the development team.

[0028] In this embodiment, step S2 specifically includes: Step S201: Based on the coding standards, develop a training plan and training materials, use example code in the training materials for demonstration, and conduct phased training assessments based on the training plan; Step S202: Establish a code review mechanism and implement it during the development of common components to identify and correct code that does not conform to coding standards.

[0029] Specifically, a detailed training plan should be developed based on the complexity of the coding standards and the experience level of team members. The training plan should include training objectives, content, schedule, and assessment methods. By organizing regular training courses, providing training materials and sample code demonstrations, the content and importance of component development standards should be introduced to the development team, ensuring that every developer can refer to and follow these standards in actual development. Furthermore, assessments should be conducted at the end of each training phase, such as writing quizzes, code reviews, or practical programming tasks, to evaluate the developers' understanding and mastery of the standards.

[0030] During component development, a code review mechanism is implemented to ensure that all submitted code conforms to unified coding standards. A multi-level review mechanism can be adopted, with senior developers within the team first reviewing the code, followed by a dedicated code quality inspection team. The review results and quality are quantitatively assessed to avoid subjectivity inherent in manual reviews. Through code review, non-standard code can be identified and corrected promptly, ensuring consistency in interface design across the entire development team.

[0031] For example, a development team is developing a vehicle-road-cloud integrated platform, and they decide to implement a user registration function. First, the following code was written for this common component: Component name: userRegister Passing parameters: username (string, required), password (string, required) Example code is shown below: <el-form class="c-position-trbl c-scroll" ref="dialogForm" :model="formParams" :rules="rules" size="small" label-position="right" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model.trim="formParams.username" placeholder="请输入用户名" :disabled="type === 'edit'">< / el-input> < / el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model.trim="formParams.password" maxlength="20" placeholder="请输入密码" :disabled="type === 'edit'">< / el-input> < / el-form-item> < / el-form> During team training, developers learned how to use the component, and code reviews checked whether each person's implementation conformed to the standards. This approach not only improved development efficiency but also reduced errors caused by inconsistent parameters. Ultimately, through this standardized component design and training mechanism, the development team successfully implemented the user registration function, laying a solid foundation for subsequent development.

[0032] In this embodiment, step S2 further includes: Step S203: Establish a developer feedback mechanism, collect problems or suggestions encountered during the development of public components to form feedback opinions, and use the feedback opinions to optimize code writing standards.

[0033] Provide templates or guidelines in the feedback channels to help developers more clearly express their feedback, such as problems encountered during the development of common components, questions about coding standards, and suggestions for improvement. Use automated tools to initially screen and categorize feedback. Conduct in-depth analysis of the collected feedback to assess its impact and importance on coding standards. Based on the feedback assessment results, revise and optimize the coding standards as necessary. Promptly notify all developers of the optimized coding standards and, after implementing the optimized standards for a period of time, track and verify them to evaluate whether they have effectively addressed the issues raised by developers. The effectiveness can be evaluated through code reviews, error rate statistics, and developer satisfaction surveys.

[0034] Step S3: Design dynamic parameters based on the dynamic expansion mechanism.

[0035] In this embodiment, step S3 specifically includes: Step S301: At the UI design level of public components, introduce a slot mechanism to allow the insertion of custom DOM elements at predefined positions in public components; Step S302: At the logical level of common components, provide dynamic parameter design with optional and variable parameters according to the needs of different projects; Step S303: Provide detailed documentation to clearly describe how the dynamic parameters are used.

[0036] Specifically, in the UI design of common components, positions where custom DOM (Document Object Model) elements can be inserted are planned and marked in advance; these positions are called slots. The slot interface is implemented in the component's code. Slots allow developers to customize different DOM elements (such as HTML, CSS, JavaScript, etc.) according to actual needs, thereby achieving more complex and diverse functionalities.

[0037] Example code with slot functionality is shown below: <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form"> <el-form-item prop="userNo" class="login-item"> <el-input type="text" v-model.trim="loginForm.userNo" :maxlength="40" placeholder="请输入用户名">< / el-input> < / el-form-item> <el-form-item prop="password" class="login-item"> <el-input type="password" v-model.trim="loginForm.password" :maxlength="20" placeholder="请输入密码" @keyup.enter.native="handleLogin">< / el-input> < / el-form-item> <slot name="anotherInput">< / slot> <div class="c-white c-cursor c-float-right c-auto-width c-mb-10" @click="$refs.loginForm.clearValidate();loginBox = false;"> forget the password < / el-form> By deeply understanding and analyzing the requirements of different projects for the logical functionality of common components, we can design which parameters are variable or optional based on the specific circumstances of each project. For example, in a user registration component, there might be an optional "age" field. If the developer does not provide the age parameter when calling the component, the component will use a default age value (such as 0 or a null value) without throwing an error. In a chart component, multiple data series may need to be passed to draw the chart. The number and type of these data series may be uncertain, so the component can use variable parameters to receive this data. In component design, optional and variable parameters can be used in combination to support more complex dynamic parameter passing. Developers can choose which basic parameters to provide and pass any number or type of data parameters to customize the behavior and appearance of the component according to actual needs.

[0038] For public components of the user registration function, in addition to necessary parameters such as account and password, other optional parameters (such as gender, birthday, etc.) and variable parameters (security level, associated account, etc.) can be set according to the specific circumstances of the project to support the scalability of dynamic parameters.

[0039] Detailed documentation should be provided for the slot mechanism at the UI design level and the dynamic parameters at the logic level, including parameter names, types, default values, purposes, usage methods, and sample code. This documentation can be organized logically, such as first introducing the basic concepts and usage of the slot mechanism, and then introducing the design and use of dynamic parameters at the logic level, to ensure developers can use them correctly.

[0040] Step S4: Optimize the comment documentation based on code commenting standards.

[0041] In this embodiment, step S4 specifically includes: Step S401: Define a unified annotation format and describe the usage of common components in the annotation document based on the annotation format; Step S402: Provide sample code in the comment documentation, including different request scenarios for the common components and parameter combinations under the request scenarios.

[0042] Specifically, to ensure all developers follow the same format when writing common components, a unified commenting standard needs to be established. This includes the syntax, style, placement, and information that comments should contain. In the source code of common components, comments are added to key parts of the source code (such as functions, methods, classes, properties, etc.) according to the defined commenting standard. These comments clearly describe the component's functionality, parameters, return values, exception handling, and usage considerations. In the comment documentation, based on the defined comment format, the usage methods of the common component are explained in detail, such as initialization, method calls, and event handling. By defining and applying a unified commenting standard, consistency and readability of comments are ensured.

[0043] Example code with comment formatting is shown below: / ** * Monitoring center video * @param params * @returns {PromiseLike<*> | Promise<*>} / Write corresponding sample code based on the functionality and purpose of the common components. The sample code includes how to call the component's methods, pass parameters, and handle success / error return values. Extensive sample code is provided in the commented documentation to help developers understand how to call the common components.

[0044] For example, for menu navigation functionality, the following sample code can be provided: ### Menu Navigation Example <menu-list :menulist="list" :icon="icon" :openmenu="openMenu">< / menu-list> Step S5: Based on the version control strategy, manage the version of each public component in the public component library.

[0045] In this embodiment, step S5 specifically includes: Step S501: Define version number naming rules and create version update logs.

[0046] For example, the Semantic Versioning (SemVer) specification is used to define version number naming rules, and the version number includes the major version number, the minor version number, and the patch number.

[0047] Major version number: Increase the major version number when you make incompatible API changes.

[0048] Minor version number: Increase the minor version number when you add features without breaking backward compatibility.

[0049] Revision number: Add a revision number when you make backward compatibility fixes.

[0050] For example, an update from version 1.0.0 to 1.1.0 indicates the addition of new features, while an update to 2.0.0 indicates the implementation of incompatible changes.

[0051] Each time a new version of a component is released, maintain a version changelog to record the major changes, fixes, and new features for each version. The version changelog should follow a consistent format for easy reference by developers.

[0052] The following is an example format for a version changelog: # Update Log ## [1.1.0] - 2023-10-01 ### Added - Added user search functionality.

[0053] ### Repair - Fixed the issue of slow user list loading speed.

[0054] ## [1.0.0] - 2023-09-15 - Initial version released.

[0055] Step S502: Define the version release process and describe version compatibility information.

[0056] In this embodiment, step S502 specifically includes: Step S5021: Update the version number in the code; Step S5022: Record the changes for each version in the version update log; Step S5023: Run automated testing tools to test the new version of the common components; Step S5024: Publish the new version to the version control system and mark the compatibility information for each version in the API documentation.

[0057] Step S503: Use version management tools to track and manage versions by creating corresponding tags for the common components of each version.

[0058] For example, suppose a team is developing a public component library and implementing the version control strategy described above. In actual development, team members perform version management after each feature development or fix, following these steps: Step 1: Update the version number in the source code of the public component, for example, update the version number from 1.0.0 to 1.1.0.

[0059] Step 2: Record the new features and fixes for this version in the version changelog.

[0060] Step 3: Run automated testing tools to test the common components of the new version to ensure the stability of the new version.

[0061] Step 4: Use Git tools to define tags for the new version and push the tags to the remote repository for storage.

[0062] Step 5: Update the detailed documentation (such as the Demo documentation) to ensure that the documentation contains the latest version information and compatibility notes.

[0063] The API documentation clearly indicates the compatibility information for each version, helping developers understand whether the version they are currently using is compatible with newer versions.

[0064] For example, the following description can be added to the API documentation: ## Version Compatibility Version 1.0.0 is compatible with 1.1.0.

[0065] Version 1.1.0 is incompatible with 2.0.0; we recommend updating as soon as possible.

[0066] For example, use version control tools (such as Git) to track version changes and ensure that each version release has a corresponding tag for easy backtracking and management. For instance, in Git, you can define a tag for a new version using the following command: git tag -a v1.1.0 -m "Release version 1.1.0" git push origin v1.1.0 Therefore, in the design of common components, establishing a clear version control strategy ensures that developers can effectively manage and use the components. By standardizing version number naming rules and maintaining detailed version update logs, developers can clearly understand the changes in each version, thereby reducing errors caused by version confusion and improving overall development efficiency and component maintainability.

[0067] In summary, this application provides a common component development management method that establishes code writing standards, dynamic extension mechanisms, code commenting standards, and version control strategies for developing common components; based on the code writing standards, it establishes development team training and code review mechanisms; based on the dynamic extension mechanism, it designs dynamic parameters; based on the code commenting standards, it optimizes comment documentation; and based on the version control strategy, it manages the version of each common component in the common component library. This application improves the development efficiency, quality, and maintainability of common components, and enhances their flexibility and scalability by establishing a series of management standards and optimization mechanisms. Through the implementation of the above steps, it ensures that developers can quickly and easily integrate and call common components, while also enabling customized configuration and extension according to specific project needs, thereby improving development efficiency, reducing maintenance costs, and promoting successful project implementation.

[0068] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0069] The flowcharts or block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of devices, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-specific system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0070] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily made by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims, and the above embodiments should be regarded as exemplary and non-limiting.

Claims

1. A common component development management method characterized by comprising: The method comprises the following steps: establishing code writing specifications, dynamic expansion mechanisms, code comment specifications, and version control strategies for developing public components; based on the code writing specifications, establishing a development team training mechanism and a code review mechanism; based on the dynamic expansion mechanism, designing dynamic parameters; based on the code comment specification, optimizing the comment document; based on the version control strategy, managing the version of each public component in the public component library.

2. The common component development management method according to Claim 1, wherein The steps of establishing code writing specifications for developing public components include: using camel case naming rules for function and variable naming; constructing the parameter types and formats required by each public component; constructing an error capture mechanism to respond to error codes that do not conform to naming rules and code writing specifications in real time.

3. The common component development management method of claim 1, wherein The steps of establishing a development team training mechanism and a code review mechanism based on the code writing specifications include: According to the code writing specifications, develop a training plan and training courseware, demonstrate with example code in the training courseware, and conduct phased training assessment based on the training plan; establish a code review mechanism to implement during the development of public components to discover and correct code that does not conform to code writing specifications.

4. The common component development management method according to claim 1 or 3, characterized by, The steps of establishing a development team training mechanism and a code review mechanism based on the code writing specifications also include: Establish a developer feedback mechanism to collect problems or suggestions encountered during the development of public components to form feedback opinions, and use the feedback opinions to optimize the code writing specifications.

5. The common component development management method of claim 1, wherein, The dynamic expansion mechanism includes using a slot mechanism and dynamic parameter design; The steps of designing dynamic parameters based on the dynamic expansion mechanism include: Introduce a slot mechanism at the UI design level of the public component to allow custom DOM elements to be inserted at predefined locations in the public component; At the logic level of the public component, provide dynamic parameter design of optional parameters and variable parameters according to the needs of different projects; Provide detailed specification documents to clearly describe the usage of dynamic parameters.

6. The common component development management method according to Claim 5, characterized by, The detailed specification documents include the type, format, value range, and usage examples of each parameter in the public component, as well as how to add, modify, or delete parameters.

7. The common component development management method of claim 1, wherein The steps of optimizing the comment document based on the code comment specification include: Define a unified comment format and describe the usage of the public component in the comment document based on the comment format; Provide example code in the comment document, which includes different request scenarios for the public component and parameter combinations in the request scenarios.

8. The common component development management method of claim 1, wherein, The steps of managing the version of each public component in the public component library based on the version control strategy include: Define version number naming rules and create version update logs; Develop a version release process to describe version compatibility information; Use version management tools to track and manage versions by establishing corresponding tags for each version of the public component.

9. The common component development management method according to Claim 8, characterized by, The steps of developing a version release process to describe version compatibility information include: Update the version number in the code; Record each version change in the version update log; Run an automated testing tool to test the new version of the public component; Release new versions into the version control system and document the compatibility information for each version in the API documentation.

10. The common component development management method of claim 8, wherein, Adopt the semantic versioning specification to define the version number naming rules, which include the major version number, minor version number, and revision number.

Images