A component platform development method, system, computer device and machine-readable medium

Through mirror detection and scaffolding installation, component branches are created based on master, component development and integration are carried out, and component platform is formed, which solves the problems of low code reuse rate and insufficient technical precipitation in front-end development, and realizes independent upgrades and efficient development of components.

CN113076085BActive Publication Date: 2025-01-03江苏云从曦和人工智能有限公司
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202110355923.9
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-04-01
Publication Date
2025-01-03
Estimated Expiration
2041-04-01

AI Technical Summary

Technical Problem

The code reuse rate during front-end development is not high, resulting in insufficient technical precipitation, and the code dispersion leads to repeated development of the same functions, resulting in waste of human resources.

Method used

Through mirror detection and scaffolding installation, component branches are created based on master, component development and release components, components with the same or similar functions are extracted and integrated, component platforms are formed, development processes are standardized, and technical precipitation is achieved.

Benefits of technology

It improves the efficiency and code reuse rate of component development, avoids code coupling, realizes independent upgrades of components and technical precipitation, reduces repeated development time, promotes platformization, and saves development and debugging time.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN113076085B_ABST
    Figure CN113076085B_ABST
Patent Text Reader

Abstract

The present invention provides a component platform development method, system, computer equipment and machine-readable medium. Before component development, image detection is first performed, and scaffolding is installed when the image is correct; then component branches are created based on the master and components are created using the scaffolding; component development is performed according to the created component branches, and the components are released after the component development is completed; all or part of the released components are extracted and integrated to form a component platform. The present invention quickly creates components through component scaffolding and extracts components with the same or similar functions. Front-end developers can quickly find the components they want on the component platform of the present invention and quickly integrate them, so that the present invention can carry out technical precipitation, standardize the entire process of component development, and solve the problem that component development in the prior art cannot carry out technical precipitation.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a component platform development method, system, computer equipment and machine-readable medium. Background Art

[0002] At present, in the traditional front-end development process, the codes of various product lines are repeatedly developed for the same functions, which causes a large waste of human resources, resulting in low code reuse rate and repeated development of the same functions; at the same time, because the codes are relatively scattered, there is no platform to extract certain similar functions and form technology precipitation. Therefore, the low code reuse rate and the inability to accumulate technology in the front-end development process are the current urgent problems that need to be solved. Summary of the invention

[0003] In view of the above-mentioned shortcomings of the prior art, an object of the present invention is to provide a component platform development method, system, computer device and machine-readable medium for solving the problems existing in the front-end development process in the prior art.

[0004] To achieve the above object and other related objects, the present invention provides a component platform development method, comprising the following steps:

[0005] Perform image detection and install the scaffolding when the image is correct;

[0006] Create component branches based on master and create components using the scaffolding;

[0007] Develop components according to the created component branches, and release the components after the component development is completed;

[0008] Extract and integrate all or part of the published components to form a component platform.

[0009] Optionally, the component branch name created when each component is first developed is consistent with the name of the created component.

[0010] Optionally, the component development process also includes:

[0011] Perform image detection and upgrade the scaffolding when the image is correct;

[0012] Locate the target component branch, merge the latest code in master into the target component branch, and develop components based on the target component branch.

[0013] Optionally, the process of publishing the component includes:

[0014] Test the developed components and write comments and examples for the components after the tests pass;

[0015] Enter and run the component document generation command in the target root directory to generate the component document corresponding to the component;

[0016] Associate each component with its corresponding comments, examples, and component documentation, and publish the associated components to the development environment.

[0017] Optionally, the process of forming the component platform includes:

[0018] Perform a combined test on all components in the development environment and update the tested components to the online environment;

[0019] Determine a target project, switch an image based on the target project, and install one or more components according to the switched image;

[0020] Extract and integrate components with the same or similar functions installed based on the target project, and test whether the integrated components have defects; and after the test is completed, change the component namespace to the online environment, and change the test suffix of the component name in the online environment to form the component platform.

[0021] Optionally, after the component platform is formed, the following is further included:

[0022] Marking the components on the component platform, wherein the marking includes at least one of the following: component name marking and version number marking;

[0023] Perform a merge test on all marked components on the component platform and merge the master after the test is completed;

[0024] The suffix of the component name in the target project is changed, and the target project is published after the suffix is ​​changed.

[0025] Optionally, when performing image detection, if the image is incorrect, image setting is performed, and after the setting is completed, scaffolding installation or upgrade is performed.

[0026] The present invention also provides a component platform development system, comprising:

[0027] The image detection module is used to detect the image and install the scaffolding when the image is correct;

[0028] A component branch module, used to create component branches based on the master and to create components using the scaffolding;

[0029] A component development module, used to develop components according to the created component branches and release the components after the component development is completed;

[0030] The component platform module is used to extract and integrate all or part of the published components to form a component platform.

[0031] Optionally, the component branch name created when each component is first developed is consistent with the name of the created component.

[0032] Optionally, the image detection module further includes performing a scaffold upgrade when the image is correct;

[0033] The component branch module also includes locating the target component branch after completing the scaffold upgrade, and merging the latest code in the master into the target component branch;

[0034] The component development module also includes developing components according to the target component branch, and publishing the components after completing the component development.

[0035] Optionally, after the component development module completes the component development, the process of publishing the component includes:

[0036] Test the developed components and write comments and examples for the components after the tests pass;

[0037] Enter and run the component document generation command in the target root directory to generate the component document corresponding to the component;

[0038] Associate each component with its corresponding comments, examples, and component documentation, and publish the associated components to the development environment.

[0039] Optionally, the process of forming the component platform includes:

[0040] Perform a combined test on all related components in the development environment and update the tested components to the online environment;

[0041] Determine a target project, switch an image based on the target project, and install one or more components according to the switched image;

[0042] Extract and integrate components with the same or similar functions installed based on the target project, and test whether the integrated components have defects; and after the test is completed, change the component namespace to the online environment, and change the test suffix of the component name in the online environment to form the component platform.

[0043] Optionally, after the component platform is formed, the following is further included:

[0044] Marking the components on the component platform; the marking includes at least one of the following: component name marking, version number marking;

[0045] Perform a merge test on all marked components on the component platform and merge the master after the test is completed;

[0046] The suffix of the component name in the target project is changed, and the target project is published after the suffix is ​​changed.

[0047] The present invention also provides a computer device, comprising:

[0048] one or more processors; and

[0049] One or more machine-readable media storing instructions, when the one or more processors execute the instructions, enable the device to perform any of the methods described above.

[0050] The present invention also provides one or more machine-readable media, characterized in that instructions are stored thereon, and when the instructions are executed by one or more processors, the device executes any one of the methods described above.

[0051] As described above, the present invention provides a component platform development method, system, computer device and machine-readable medium, which have the following beneficial effects: before the component development, the present invention first performs image detection, and installs the scaffolding when the image is correct; then creates a component branch based on the master and uses the scaffolding to create a component, wherein the component branch name created when each component is first developed is consistent with the created component name; develops the component according to the created component branch, and publishes the component after the component development is completed; extracts and integrates all or part of the published components to form a component platform. In view of the existing problems, the present invention provides a component platform development method, which quickly creates components through component scaffolding and extracts components with the same or similar functions, and can provide a complete solution for component development. At the same time, the present invention forms a closed loop in the process of component development, description, release and use, and the front-end developer can quickly find the components they want on the component platform in the present invention and quickly integrate them, so that the present invention can precipitate technology for components with the same or similar functions, standardize the entire development process of the component, and solve the problem that the component development existing in the prior art cannot precipitate technology. Since the components in the present invention are independently developed and released after compilation and association, there is no restriction on the technology stack of the introduced project when using the components; at the same time, the present invention can perform independent upgrade and maintenance when upgrading the components. In addition, each component in the present invention is a single code block, which only provides an interface to the outside; the dependency between components can only be achieved through interfaces, projects or projects, which can largely avoid coupling between codes, thereby achieving decoupling between components. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] Figure 1 A schematic diagram of a flow chart of a component platform development method provided by an embodiment;

[0053] Figure 2 A schematic diagram of a flow chart of a component platform development method provided in another embodiment;

[0054] Figure 3 A flowchart of a component platform development method provided in yet another embodiment;

[0055] Figure 4 A schematic diagram of the hardware structure of a component platform development system provided by an embodiment;

[0056] Figure 5 A schematic diagram of the hardware structure of a terminal device provided by an embodiment;

[0057] Figure 6 A schematic diagram of the hardware structure of a terminal device provided in another embodiment.

[0058] Component number description

[0059] M10 Mirror Detection Module

[0060] M20 Component Branch Module

[0061] M30 Component Development Module

[0062] M40 Component Platform Module

[0063] 1100 Input Devices

[0064] 1101 First Processor

[0065] 1102 Output devices

[0066] 1103 First Memory

[0067] 1104 Communication Bus

[0068] 1200 Processing Components

[0069] 1201 Second processor

[0070] 1202 Second Memory

[0071] 1203 Communication Components

[0072] 1204 Power Supply Components

[0073] 1205 Multimedia Components

[0074] 1206 Audio Components

[0075] 1207 Input / Output Interface

[0076] 1208 Sensor Components DETAILED DESCRIPTION

[0077] The following describes the embodiments of the present invention by specific examples, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.

[0078] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present invention, and thus the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0079] See also Figures 1 to 3 As shown, the present invention provides a component platform development method, comprising the following steps:

[0080] S100, perform mirror image detection, and install the scaffolding when the mirror image is correct;

[0081] S200, creating a component branch based on the master and creating a component using the scaffolding;

[0082] S300, developing a component according to the created component branch, and publishing the component after the component development is completed;

[0083] S400: extract and integrate all or part of the published components to form a component platform. As an example, components with the same or similar functions may be extracted and integrated to form a component platform.

[0084] In view of the existing problems, this method provides a component platform development method, which can quickly create components through component scaffolding and extract components with the same or similar functions, and can provide a complete solution for component development. This method can carry out technical precipitation for components with the same or similar functions, standardize the entire process of component development, and solve the problem that component development in the prior art cannot be technically precipitated. Since the components in this method are independently developed and released after compilation association, this method does not have any restrictions on the technology stack of the introduced project when using the components; at the same time, this method can perform independent upgrade and maintenance when upgrading the components. In addition, each component in this method is a single code block, which only provides interfaces to the outside world; the dependencies between components can only be achieved through interfaces, projects or projects, which can largely avoid coupling between codes, thereby achieving decoupling between components.

[0085] According to the above records, in the embodiment of the present application, when each component is first developed, the component branch name created is consistent with the created component name.

[0086] According to the above records, if Figure 2 and Figure 3 As shown, image detection can be performed before component development. The npm_public code can be used for image detection. If the image detection is correct, the scaffolding installation is performed; if the image detection is incorrect, the image setting is performed, for example, the npm config set registry code can be used for image setting. When performing scaffolding installation, for example, the following code can be used:

[0087] npm install yo-g;

[0088] npm install@cw-af-fe / generator-water-cli-g;

[0089] npm install@cw-af-fe / generator-water-md-g.

[0090] When creating a component branch based on the master, the branch name and component name must be consistent. The name must be in full English, separated by a hyphen; for example: async-tree. And when each component is developed for the first time, a branch name with the component name must be created based on the master branch. For example: if the component is called `login`, then the branch name should be called `login`. And note that the branch must be created based on the master branch. After the branch is created, component development can be carried out on this branch. Use the scaffolding to create a component, for example, go to the cw-common root directory, run the npm run cli code, and then enter the Chinese name, English name, component description and other information according to the prompts to create the component.

[0091] Then, component development is performed based on the created component branches, and the component is released after the component development is completed; and all or part of the released components are extracted and integrated to form a component platform. As an example, components with the same or similar functions can be extracted and integrated to form a component platform.

[0092] In an exemplary embodiment, it also includes: performing image detection and upgrading the scaffolding when the image is correct; locating the target component branch and merging the latest code in the master into the target component branch; developing components according to the target component branch, and releasing the components after the component development is completed. Figure 2 and Figure 3As shown, image detection can be performed before component development. The npm_public code can be used for image detection. If the image detection is correct, the scaffolding is upgraded; if the image detection is incorrect, the image is set, for example, the npm config setregistry code can be used for image setting. When upgrading the scaffolding, for example, the following code can be used:

[0093] npm install@cw-af-fe / generator-water-cli-g;

[0094] npm install@cw-af-fe / generator-water-md-g.

[0095] Merge the latest code in master to the target component branch; develop the component according to the target component branch, and release the component after the component development is completed. As an example, this method first merges a wave of the latest code from master to the target component branch, and then develops the component on the target component branch, which can ensure the latest code.

[0096] In some exemplary embodiments, after the component development is completed, the following is also included: testing the developed component, and writing comments and examples for the component after the test passes; inputting and running the component document generation command in the target root directory to generate the component document corresponding to the component; associating each component with its corresponding comments, examples and component documents, and publishing the associated components to the development environment. Among them, the way to associate each component with its corresponding comments, examples and component documents can be to package each component and the corresponding comments, examples and component documents to form a packaged component, and then publish the packaged component to the development environment. Specifically, if Figure 2 and Figure 3As shown, the developed component is tested locally, and after the test passes, comments and examples are written for the component. For example, write events, methods, slots, descriptions and version information in the top comment section of the component development directory, and write the comments of props directly on the props attribute. Enter and run the component document generation command in the target root directory to generate the component document corresponding to the component; for example, go to the cw-common root directory, run npm run md, enter the English name of the component according to the prompt, and generate automatic documents for the component. Associate each component with its corresponding comments, examples and component documents; for example, you can use 'npm run bulid-c+component name' to package the corresponding component. Among them, npm runbulid-c async-tree means to package the component async-tree. Publish the packaged component to the development environment, for example, you can enter the corresponding component directory under dist-c, then switch to the development image, check the component name in package.json, and determine whether the namespace is @cw-af-fe-dev / xxx. If there is no dev, you need to add it manually.

[0097] According to the above records, in an exemplary embodiment, after publishing the associated components to the development environment, it also includes: merging and testing all associated components in the development environment, and updating the tested components to the online environment; determining the target project, switching the image based on the target project, and installing one or more components according to the switched image; extracting and integrating components with the same or similar functions installed based on the target project, and testing whether the integrated components have defects; and after the test is completed, changing the component namespace to the online environment, and changing the test suffix of the component name in the online environment to form the component platform. Specifically, Figure 2 and Figure 3As shown, all associated components are merged and tested in the development environment, and the component is automatically updated to the online environment. The component is used through one or more projects, and during the use of one or more projects, the image is switched to npm_public, and then one or more components are installed based on the switched image. For example, component installation can be achieved through npm install@cw-af-fe-dev / xxx. Extract and integrate components with the same or similar functions installed based on the target project, and test whether the integrated components have defects and bugs; if there are defects and bugs, modify them according to the defects and bugs that appear, and if there are no defects and bugs, complete the test. After the test is completed, change the component namespace to the online environment and remove the test suffix of the component name in the online environment; for example, remove @cw-af-fe-dev / xxx. After removing the suffix, use the integrated component as a component platform.

[0098] According to the above records, in an exemplary embodiment, after forming a component platform, it also includes: marking the components on the component platform; the marking includes at least one of the following: component name marking, version number marking; merging and testing all marked components on the component platform, and merging master after the test is completed; changing the suffix of the component name in the target project, and publishing the target project after changing the suffix. In the embodiment of the present application, after each version of the component is developed and the component is successfully released, it is necessary to mark a tag based on the component branch, and the tag is named: component name + version number, for example: async-tree-1.0.0. At the same time, after the component version is released, the latest code of the component branch is merged into the master, and the component branch is retained to facilitate the next version iteration upgrade. After marking the component branch, all marked components are merged and tested on the component platform, and the super administrator is notified to merge the master; and the suffix of the component name in the project is removed, for example, @cw-af-fe-dev / xxx is removed. After removing the suffix, the one or more projects are released online.

[0099] In summary, this method provides a component platform development method for the existing problems. It quickly creates components through component scaffolding and extracts components with the same or similar functions, which can provide a complete solution for component development. At the same time, this method forms a closed loop in the process of component development, description, release and use. Front-end developers can quickly find the components they want on the component platform in this method and quickly integrate them, so that this method can precipitate technology for components with the same or similar functions, standardize the entire process of component development, and solve the problem that component development in the prior art cannot precipitate technology. Since the components in this method are independently developed and released after compilation association, this method does not have any restrictions on the technology stack of the introduced project when using the components; at the same time, this method can perform independent upgrade maintenance when upgrading the components. In addition, each component in this method is a single code block, which only provides interfaces to the outside; the dependencies between components can only be achieved through interfaces, projects or projects, which can largely avoid coupling between codes, thereby achieving decoupling between components. The components in this method can be reused in one or more projects, so that the utilization rate and code reuse rate of each product component can be improved. This method not only saves the time cost of repeated component development for front-end developers, allowing component development technology to be accumulated, but also allows the codes of various product lines to be low-coupled and highly reused; at the same time, this method can better realize platformization, which can save a lot of time when multiple departments and teams are jointly debugging; after the components are platformized, developers can conveniently rely on the necessary components in the component platform during development and testing, especially when their project business needs to be integrated into the component platform of this method. At the same time, by platformizing the components, this method can also facilitate developers to debug the components.

[0100] like Figure 4 As shown, the present invention also provides a component platform development system, including:

[0101] The mirror image detection module M10 is used to perform mirror image detection and install the scaffolding when the mirror image is correct;

[0102] A component branch module M20 is used to create a component branch based on the master and to create a component using the scaffolding;

[0103] The component development module M30 is used to develop components according to the created component branches and release the components after the component development is completed;

[0104] The component platform module M40 is used to extract and integrate all or part of the released components to form a component platform.

[0105] In view of the existing problems, this system provides a component platform development system. It can quickly create components through component scaffolding and extract components with the same or similar functions, which can provide a complete solution for component development. At the same time, this system forms a closed loop in the process of component development, description, release and use. Front-end developers can quickly find the components they want on the component platform in this system and quickly integrate them, so that this system can precipitate technology for components with the same or similar functions, standardize the entire process of component development, and solve the problem that component development in the existing technology cannot precipitate technology. Since the components in this system are independently developed and released after compilation and association, there is no restriction on the technology stack of the introduced project when using the components in this system; at the same time, this system can perform independent upgrade and maintenance when upgrading the components. In addition, each component in this system is a single code block, which only provides interfaces to the outside world; the dependencies between components can only be achieved through interfaces, projects or projects, which can largely avoid the coupling between codes, thereby achieving decoupling between components.

[0106] According to the above records, in the embodiment of the present application, when each component is first developed, the component branch name created is consistent with the created component name.

[0107] According to the above records, if Figure 2 and Figure 3 As shown, image detection can be performed before component development. The npm_public code can be used for image detection. If the image detection is correct, the scaffolding installation is performed; if the image detection is incorrect, the image setting is performed, for example, the npm config set registry code can be used for image setting. When performing scaffolding installation, for example, the following code can be used:

[0108] npm install yo-g;

[0109] npm install@cw-af-fe / generator-water-cli-g;

[0110] npm install@cw-af-fe / generator-water-md-g.

[0111] When creating a component branch based on the master, the branch name and component name must be consistent. The name must be in full English, separated by a hyphen; for example: async-tree. And when each component is developed for the first time, a branch name with the component name must be created based on the master branch. For example: if the component is called `login`, then the branch name should be called `login`. And note that the branch must be created based on the master branch. After the branch is created, component development can be carried out on this branch. Use the scaffolding to create a component, for example, go to the cw-common root directory, run the npm run cli code, and then enter the Chinese name, English name, component description and other information according to the prompts to create the component.

[0112] Then, component development is performed based on the created component branch, and the component is released after the component development is completed; and all or part of the released components are extracted and integrated to form a component platform.

[0113] In an exemplary embodiment, the image detection module M10 also includes performing image detection and upgrading the scaffolding when the image is correct; and the component branch module M20 also includes locating the target component branch and merging the latest code in the master into the target component branch; the component development module M30 develops the component according to the target component branch and releases the component after the component development is completed. Specifically, Figure 2 and Figure 3 As shown, image detection can be performed before component development. The npm_public code can be used for image detection. If the image detection is correct, the scaffolding is upgraded; if the image detection is incorrect, the image is set, for example, the npm config set registry code can be used for image setting. When upgrading the scaffolding, for example, the following code can be used:

[0114] npm install@cw-af-fe / generator-water-cli-g;

[0115] npm install@cw-af-fe / generator-water-md-g.

[0116] Merge the latest code in master to the target component branch; develop the component according to the target component branch, and release the component after the component development is completed. As an example, this method first merges a wave of the latest code from master to the target component branch, and then develops the component on the target component branch, which can ensure the latest code.

[0117] In some exemplary embodiments, after completing the component development, the component development module M30 further includes: testing the developed component, and writing comments and examples for the component after the test passes; inputting and running the component document generation command in the target root directory to generate the component document corresponding to the component; associating each component with its corresponding comments, examples and component documents, and publishing the associated components to the development environment. Among them, the way to associate each component with its corresponding comments, examples and component documents can be to package each component and the corresponding comments, examples and component documents to form a packaged component, and then publish the packaged component to the development environment. Specifically, as Figure 2 and Figure 3 As shown, the developed component is tested locally, and after the test passes, comments and examples are written for the component. For example, write events, methods, slots, descriptions and version information in the top comment section of the component development directory, and write the comments of props directly on the props attribute. Enter and run the component document generation command in the target root directory to generate the component document corresponding to the component; for example, go to the cw-common root directory, run npm runmd, enter the English name of the component according to the prompt, and generate automatic documents for the component. Associate each component with its corresponding comments, examples and component documents; for example, you can use 'npm run bulid-c+component name' to package the corresponding component. Among them, npm run bulid-c async-tree means to package the component async-tree. Publish the packaged component to the development environment, for example, you can enter the corresponding component directory under dist-c, then switch to the development image, check the component name in package.json, and determine whether the namespace is @cw-af-fe-dev / xxx. If there is no dev, you need to add it manually.

[0118] According to the above records, in an exemplary embodiment, after publishing the associated components to the development environment, it also includes: merging and testing all associated components in the development environment, and updating the tested components to the online environment; determining the target project, switching the image based on the target project, and installing one or more components according to the switched image; extracting and integrating components with the same or similar functions installed based on the target project, and testing whether the integrated components have defects; and after the test is completed, changing the component namespace to the online environment, and changing the test suffix of the component name in the online environment to form the component platform. Specifically, Figure 2 and Figure 3As shown, all associated components are merged and tested in the development environment, and the component is automatically updated to the online environment. The component is used through one or more projects, and during the use of one or more projects, the image is switched to npm_public, and then one or more components are installed based on the switched image. For example, component installation can be achieved through npm install@cw-af-fe-dev / xxx. Extract and integrate components with the same or similar functions installed based on the target project, and test whether the integrated components have defects and bugs; if there are defects and bugs, modify them according to the defects and bugs that appear, and if there are no defects and bugs, complete the test. After the test is completed, change the component namespace to the online environment, and remove the test suffix of the component name in the online environment; for example, remove @cw-af-fe-dev / xxx. After removing the suffix, use the integrated component as a component platform.

[0119] According to the above records, in an exemplary embodiment, after forming a component platform, it also includes: marking the components on the component platform; the marking includes at least one of the following: component name marking, version number marking; merging and testing all marked components on the component platform, and merging master after the test is completed; changing the suffix of the component name in the target project, and publishing the target project after changing the suffix. In the embodiment of the present application, after each version of the component is developed and the component is successfully released, it is necessary to mark a tag based on the component branch, and the tag is named: component name + version number, for example: async-tree-1.0.0. At the same time, after the component version is released, the latest code of the component branch is merged into the master, and the component branch is retained to facilitate the next version iteration upgrade. After marking the component branch, all marked components are merged and tested on the component platform, and the super administrator is notified to merge the master; and the suffix of the component name in the project is removed, for example, @cw-af-fe-dev / xxx is removed. After removing the suffix, the one or more projects are released online.

[0120] In summary, this system provides a component platform development system for the existing problems. It can quickly create components through component scaffolding and extract components with the same or similar functions, which can provide a complete solution for component development. At the same time, this system forms a closed loop in the process of component development, description, release and use. Front-end developers can quickly find the components they want on the component platform in this system and quickly integrate them, so that this system can precipitate technology for components with the same or similar functions, standardize the entire process of component development, and solve the problem that component development in the existing technology cannot be precipitated. Since the components in this system are independently developed and released after compilation and association, there is no restriction on the technology stack of the introduced project when using the components in this system; at the same time, this system can perform independent upgrade and maintenance when upgrading the components. In addition, each component in this system is a single code block, which only provides interfaces to the outside; the dependency between components can only be achieved through interfaces, projects or projects, which can largely avoid coupling between codes, thereby achieving decoupling between components. The components in this system can be reused in one or more projects, so that the utilization rate and code reuse rate of each product component can be improved. This system not only saves the time cost of repeated component development for front-end developers, allowing component development technology to be accumulated, but also allows the codes of various product lines to be low-coupled and highly reused; at the same time, this system can better realize platformization, which can save a lot of time when multiple departments and teams are jointly debugging; after the components are platformized, developers can conveniently rely on the necessary components in the component platform during development and testing, especially when their project business needs to be integrated into the component platform of this system. At the same time, by platformizing the components, this system can also facilitate developers to debug the components.

[0121] The present application also provides a computer device, which may include: one or more processors; and one or more machine-readable media having instructions stored thereon, which, when executed by the one or more processors, enable the device to execute Figure 1In practical applications, the device can be used as a terminal device or a server. Examples of terminal devices may include: smart phones, tablet computers, e-book readers, MP3 (Moving Picture Experts Group Audio Layer III) players, MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, car computers, desktop computers, set-top boxes, smart TVs, wearable devices, etc. The embodiments of this application do not limit specific devices.

[0122] The present application also provides a non-volatile readable storage medium, in which one or more modules (programs) are stored. When the one or more modules are applied to a device, the device can execute the embodiment of the present application. Figure 1 Instructions for the steps involved in a data processing method.

[0123] Figure 5 A schematic diagram of the hardware structure of a terminal device provided for an embodiment of the present application. As shown in the figure, the terminal device may include: an input device 1100, a first processor 1101, an output device 1102, a first memory 1103 and at least one communication bus 1104. The communication bus 1104 is used to realize the communication connection between the components. The first memory 1103 may include a high-speed RAM memory, and may also include a non-volatile storage NVM, such as at least one disk storage. Various programs can be stored in the first memory 1103 to complete various processing functions and implement the method steps of this embodiment.

[0124] Optionally, the first processor 1101 may be implemented, for example, as a central processing unit (CPU), an application-specific integrated circuit (ASIC), a digital signal processor (DSP), a digital signal processing device (DSPD), a programmable logic device (PLD), a field programmable gate array (FPGA), a controller, a microcontroller, a microprocessor or other electronic components, and the processor 1101 is coupled to the input device 1100 and the output device 1102 via a wired or wireless connection.

[0125] Optionally, the input device 1100 may include multiple input devices, for example, at least one of a user interface for users, a device interface for devices, a software programmable interface, a camera, and a sensor. Optionally, the device interface for devices may be a wired interface for data transmission between devices, or a hardware insertion interface for data transmission between devices (such as a USB interface, a serial port, etc.); Optionally, the user interface for users may be, for example, a control button for users, a voice input device for receiving voice input, and a touch sensing device for users to receive user touch input (such as a touch screen with a touch sensing function, a touchpad, etc.); Optionally, the software programmable interface may be, for example, an entry for users to edit or modify programs, such as an input pin interface or an input interface of a chip; the output device 1102 may include output devices such as a display and a speaker.

[0126] In this embodiment, the processor of the terminal device includes functions for executing each module of the voice recognition device in each device. The specific functions and technical effects can be referred to the above embodiments and will not be repeated here.

[0127] Figure 6 A schematic diagram of the hardware structure of a terminal device provided for another embodiment of the present application. Figure 6 Yes Figure 5 A specific embodiment in the implementation process. As shown in the figure, the terminal device of this embodiment may include a second processor 1201 and a second memory 1202.

[0128] The second processor 1201 executes the computer program code stored in the second memory 1202 to implement the above embodiment. Figure 1 The method.

[0129] The second memory 1202 is configured to store various types of data to support operations on the terminal device. Examples of such data include instructions for any application or method used to operate on the terminal device, such as messages, pictures, videos, etc. The second memory 1202 may include a random access memory (RAM), and may also include a non-volatile memory, such as at least one disk storage.

[0130] Optionally, the second processor 1201 is arranged in the processing component 1200. The terminal device may further include: a communication component 1203, a power component 1204, a multimedia component 1205, an audio component 1206, an input / output interface 1207 and / or a sensor component 1208. The specific components included in the terminal device are set according to actual needs, and this embodiment does not limit this.

[0131] The processing component 1200 generally controls the overall operation of the terminal device. The processing component 1200 may include one or more second processors 1201 to execute instructions to complete the above Figure 1 In addition, the processing component 1200 may include one or more modules to facilitate the interaction between the processing component 1200 and other components. For example, the processing component 1200 may include a multimedia module to facilitate the interaction between the multimedia component 1205 and the processing component 1200.

[0132] The power supply component 1204 provides power to various components of the terminal device. The power supply component 1204 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the terminal device.

[0133] The multimedia component 1205 includes a display screen that provides an output interface between the terminal device and the user. In some embodiments, the display screen may include a liquid crystal display (LCD) and a touch panel (TP). If the display screen includes a touch panel, the display screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0134] The audio component 1206 is configured to output and / or input voice signals. For example, the audio component 1206 includes a microphone (MIC), and when the terminal device is in an operating mode, such as a voice recognition mode, the microphone is configured to receive an external voice signal. The received voice signal can be further stored in the second memory 1202 or sent via the communication component 1203. In some embodiments, the audio component 1206 also includes a speaker for outputting voice signals.

[0135] The input / output interface 1207 provides an interface between the processing component 1200 and the peripheral interface modules, which may be click wheels, buttons, etc. These buttons may include but are not limited to: volume buttons, start buttons, and lock buttons.

[0136] The sensor component 1208 includes one or more sensors for providing various aspects of status assessment for the terminal device. For example, the sensor component 1208 can detect the open / closed state of the terminal device, the relative positioning of the components, and the presence or absence of contact between the user and the terminal device. The sensor component 1208 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact, including detecting the distance between the user and the terminal device. In some embodiments, the sensor component 1208 may also include a camera, etc.

[0137] The communication component 1203 is configured to facilitate wired or wireless communication between the terminal device and other devices. The terminal device can access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In one embodiment, the terminal device may include a SIM card slot for inserting a SIM card, so that the terminal device can log in to a GPRS network and establish communication with a server via the Internet.

[0138] From the above, we can see that Figure 6 The communication component 1203, the audio component 1206, the input / output interface 1207, and the sensor component 1208 involved in the embodiment can all be used as Figure 5 Implementation method of the input device in the embodiment.

[0139] The above embodiments are merely illustrative of the principles and effects of the present invention, and are not intended to limit the present invention. Anyone familiar with the art may modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by a person of ordinary skill in the art without departing from the spirit and technical concept disclosed by the present invention shall still be covered by the claims of the present invention.

Claims

1. A component platform development method, characterized in that: The following steps are involved: Perform image detection and install the scaffolding when the image is correct; Create component branches based on master and create components using the scaffolding; Develop components according to the created component branches, and publish the components after the component development is completed; wherein the process of publishing the components includes: testing the developed components, and writing comments and examples for the components after the tests pass; inputting and running the component document generation command in the target root directory to generate the component document corresponding to the components; associating each component with the corresponding comments, examples and component documents, and publishing the associated components to the development environment; Extract and integrate all or part of the released components to form a component platform; the process of forming the component platform includes: merging and testing all components in the development environment, and updating the tested components to the online environment; determining the target project, switching the image based on the target project, and installing one or more components according to the switched image; extracting and integrating components with the same or similar functions installed based on the target project, and testing whether the integrated components have defects; and after the test is completed, changing the component namespace to the online environment, and changing the test suffix of the component name in the online environment to form the component platform.

2. The component platform development method according to claim 1, characterized in that: The component branch name created when each component is first developed is consistent with the name of the component created.

3. The component platform development method according to claim 1, characterized in that: The component development process also includes: Perform image detection and upgrade the scaffolding when the image is correct; Locate the target component branch, merge the latest code in master into the target component branch, and develop components based on the target component branch.

4. The component platform development method according to claim 1 or 3, characterized in that: After the component platform is formed, it also includes: Marking the components on the component platform, wherein the marking includes at least one of the following: component name marking and version number marking; Perform a merge test on all marked components on the component platform and merge the master after the test is completed; The suffix of the component name in the target project is changed, and the target project is published after the suffix is ​​changed.

5. The component platform development method according to claim 1 or 3, characterized in that: When performing image detection, if the image is incorrect, image setting is performed, and after the setting is completed, scaffolding installation or upgrade is performed.

6. A component platform development system, characterized in that: Included are: The image detection module is used to detect the image and install the scaffolding when the image is correct; A component branch module, used to create component branches based on the master and to create components using the scaffolding; The component development module is used to develop components according to the created component branches and publish the components after the component development is completed; wherein the process of publishing the components includes: testing the developed components and writing comments and examples for the components after the tests pass; inputting and running the component document generation command in the target root directory to generate the component document corresponding to the components; associating each component with its corresponding comments, examples and component documents, and publishing the associated components to the development environment; The component platform module is used to extract and integrate all or part of the released components to form a component platform; the process of forming the component platform includes: merging and testing all components in the development environment, and updating the tested components to the online environment; determining the target project, switching the image based on the target project, and installing one or more components according to the switched image; extracting and integrating components with the same or similar functions installed based on the target project, and testing whether the integrated components have defects; and after the test is completed, changing the component namespace to the online environment, and changing the test suffix of the component name in the online environment to form the component platform.

7. The component platform development system according to claim 6, characterized in that: The component branch name created when each component is first developed is consistent with the name of the component created.

8. The component platform development system according to claim 6, characterized in that: The image detection module also includes upgrading the scaffolding when the image is correct; The component branch module also includes locating the target component branch after completing the scaffold upgrade, and merging the latest code in the master into the target component branch; The component development module also includes developing components according to the target component branch, and publishing the components after completing the component development.

9. The component platform development system according to claim 6 or 8, characterized in that: After the component platform is formed, it also includes: Marking the components on the component platform; the marking includes at least one of the following: component name marking, version number marking; Perform a merge test on all marked components on the component platform and merge the master after the test is completed; The suffix of the component name in the target project is changed, and the target project is published after the suffix is ​​changed.

10. A computer device, characterized in that: include: one or more processors; and One or more machine-readable media storing instructions, when the one or more processors execute the instructions, cause the device to perform the method according to any one of claims 1 to 5.

11. One or more machine-readable media, characterized in that Instructions are stored thereon, and when the instructions are executed by one or more processors, the device performs the method according to any one of claims 1 to 5.

Citation Information

Patent Citations

  • Configuration sharing method and device in engineering modularization development, equipment and medium

    CN112148272A

  • VUE-based component development and display method

    CN112162729A