CN109101225B - Component construction method and device, component library architecture and computer readable storage medium - Google Patents
Component construction method and device, component library architecture and computer readable storage medium Download PDFInfo
- Publication number
- CN109101225B CN109101225B CN201710467879.4A CN201710467879A CN109101225B CN 109101225 B CN109101225 B CN 109101225B CN 201710467879 A CN201710467879 A CN 201710467879A CN 109101225 B CN109101225 B CN 109101225B
- Authority
- CN
- China
- Prior art keywords
- component
- file
- test
- behavior logic
- name
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
Abstract
The invention discloses a component construction method and a device, a component library framework and a computer readable storage medium, wherein the component construction method comprises the following steps: adding a component container with a preset name under a specified first code directory, adding an element file in the component container, wherein the element file comprises a file based on a VUE framework, and writing a preset source code into the element file to complete the construction of the component. Compared with the prior art, when the element files of the components are constructed, the files based on the VUE framework exist, so that the components can be constructed by using the VUE framework as the bottom development framework, and the advantage of less code amount is achieved by constructing the components by using the VUE framework according to the method, therefore, the packaging performance of the constructed components can be effectively improved, the misoperation is reduced, and the system performance is improved.
Description
Technical Field
The present invention relates to the field of computer applications, and in particular, to a component construction method and apparatus, a component library architecture, and a computer-readable storage medium.
Background
AngularJS is a structured front-end mvvm (model View model) framework built on top of lightweight jQuery for constructing single-page WEB applications. AngularJS is a large and comprehensive framework for developing components that are costly to learn and whose performance degrades dramatically in complex interaction scenarios.
At present, a front-end page implementation method based on a jQuery framework includes: introducing files required by a jQuery framework, initializing page elements by using the introduced files, and realizing the construction of a component (component) by operating a Document Object Model (DOM) structure, so that an external system can realize the display of a front-end page by calling the component.
However, the existing jQuery framework-based components have the following problems: the jQuery frame is used as a bottom development frame, so that the packaging performance is poor, misoperation is easy to occur, and the overall performance of the system is reduced.
Disclosure of Invention
The invention mainly aims to provide a component construction method and device, a component library framework and a computer readable storage medium, and aims to solve the technical problems that a JQuery framework is adopted as a bottom development framework in the prior art, the packaging performance is poor, and the overall performance of a system is low due to the fact that misoperation is easy to occur.
To achieve the above object, a first aspect of the present invention provides an assembly construction method including:
adding a component container with a preset name under a specified first code directory;
adding element files in the component container, wherein the element files contain files based on a VUE framework;
and writing preset source codes into the element file to complete the construction of the component.
To achieve the above object, a second aspect of the present invention provides an assembly construction apparatus comprising:
the catalog adding module is used for adding a component container with a preset name under the appointed first code catalog;
the file adding module is used for adding element files in the component container, and the element files comprise files based on a VUE framework;
and the writing module is used for writing a preset source code into the element file so as to complete the construction of the component.
To achieve the above object, a third aspect of the present invention provides a component library architecture, comprising: the system comprises an output port, a source code library, a service support system and a VUE framework;
the output port and the source code library are connected with the service support system, and the VUE framework is a bottom development framework of the component library framework;
the service support system comprises the component constructing device provided by the second aspect, and the components constructed by the component constructing device are stored in the source code library.
A fourth aspect of the present invention provides a computer-readable storage medium having stored thereon computer-readable instructions which, when executed by a processor, implement the steps of the component construction method in any one of the possible implementations of the first aspect.
The invention provides a component construction method, in the method, a component container with a preset name is added under a specified first code directory, an element file is added in the component container, the element file comprises a file based on a VUE framework, and a preset source code is written in the element file to complete the construction of a component. Compared with the prior art, when the element files of the components are constructed, the files based on the VUE framework exist, so that the components can be constructed by using the VUE framework as the bottom development framework, and the advantage of less code amount is achieved by constructing the components by using the VUE framework according to the method, therefore, the packaging performance of the constructed components can be effectively improved, the misoperation is reduced, and the system performance is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a schematic diagram of an internal structure of an electronic device according to an embodiment of the invention;
FIG. 2 is a diagram of a component library architecture in accordance with an embodiment of the present invention;
FIG. 3 is a schematic flow chart of a method of constructing a component according to an embodiment of the present invention;
FIG. 4 is another schematic flow chart diagram of a method of constructing a component according to an embodiment of the present invention;
FIG. 5 is another schematic flow chart of a method of constructing a component according to an embodiment of the present invention;
FIG. 6 is a schematic view of a device for constructing a module according to an embodiment of the present invention;
FIG. 7 is another schematic view of the device of the present invention;
FIG. 8 is another schematic view of the device of the present invention.
Detailed Description
In order to make the objects, features and advantages of the present invention more obvious and understandable, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Because the JQuery frame is adopted as a bottom development frame in the prior art, the packaging performance is poor, misoperation is easy to occur, and the technical problem of overall reduction of the system performance is caused.
In order to solve the above technical problems, the present invention provides a component construction method, in which a VUE framework based file exists when constructing an element file of a component, so that a component can be constructed using the VUE framework as a bottom development framework, and since constructing a component using the VUE framework according to the method of the present invention has an advantage of a small code amount, it is possible to effectively improve the packaging property of the constructed component, reduce erroneous operation, and improve system performance.
Referring to fig. 1, which is a schematic diagram of an internal structure of an electronic device according to an embodiment of the present invention, as shown in fig. 1, the electronic device includes a processor, a nonvolatile storage medium, an internal memory, a network interface, a display screen, and an input device, which are connected by a system bus. The non-volatile storage medium of the electronic equipment stores an operating system, and the non-volatile storage medium further comprises a component library architecture, wherein the component library architecture at least comprises a component construction device, the component construction device is used for realizing a component construction method, and the processor is used for providing calculation and control capacity and supporting the operation of the whole electronic equipment. An internal memory in an electronic device, which may store computer-readable instructions that, when executed by a processor, may cause the processor to perform a component construction method, provides an environment for operation of a component construction apparatus in a non-volatile storage medium (which may also be referred to as a computer-readable storage medium). The network interface is used for network communication with other devices. The display screen of the electronic device may be a liquid crystal display screen or an electronic ink display screen, and the input device may be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on a shell of the electronic device, or an external keyboard, a touch pad or a mouse. The electronic device may be a mobile phone, a personal computer, a tablet computer, a server, or the like. Those skilled in the art will appreciate that the architecture shown in fig. 1 is a block diagram of only a portion of the architecture associated with the disclosed aspects and is not intended to limit the applicability of the disclosed aspects to other electronic devices, which may include more or less components than those shown, or combine certain components, or have a different arrangement of components.
To better understand the technical solution in the embodiment of the present invention, a component library architecture is described below, and please refer to fig. 2, which is a schematic diagram of the component library architecture in the embodiment of the present invention, where the component library architecture includes an output port, a source code library, a service support system, and a VUE framework. The output port and the source code library are connected with the service support system, and the VUE framework is a bottom development framework of the component library framework.
The source code library comprises source codes of a plurality of components, and the source code of each component comprises a template source code, a logic source code and a style source code.
The VUE framework is a set of progressive framework for constructing a user interface, and is different from other heavyweight frameworks in that the VUE framework is designed by incremental development from bottom to top. And the VUE frame focuses on the view layer, and compared with the jQuery frame, the code amount of the VUE frame is greatly reduced (for example, reduced by 57%), the effectiveness and the robustness of the source code of the component can be effectively improved, and the performance of a front-end page is greatly improved (for example, improved by 2-3 times).
The service support system at least comprises the component construction device, the component construction based on the VUE framework can be realized through the component construction device, and more functions can be further realized, for example, when a call request of an external system is received, source codes of a plurality of components in a source code library are packaged, and a file obtained by packaging is fed back to the external system through an output port. The common code logic in the service support system can be abstracted and standardized, and the reusability is enhanced.
An embodiment of the above-described module construction apparatus construction module will be described in detail below.
Referring to fig. 3, a flow chart of an assembly construction method according to an embodiment of the present invention is shown, where the assembly construction method includes:
in the embodiment of the present invention, the component constructing method described above is implemented by a component constructing apparatus (hereinafter, simply referred to as a constructing apparatus) which is a part of the service supporting system in the component library architecture shown in fig. 2.
The component can be an extended hypertext Markup Language (HTML) element, package reusable code, be a custom element, or be in a native HTML element form, and be extended by is property, for example, an input box, a button, and the like on a page can be realized by the component. Wherein the component container is a folder for storing the components.
When a component needs to be constructed, the construction device adds a component container with a preset name under a specified first code directory, wherein the first code directory can be src/component, and the first code directory is located in a source code library in a component library architecture. The component container may also be referred to as a component folder or a component directory, among others.
The name of the component container can be realized in a preset manner, for example: the name of the component container to be constructed is stored in a specified path, and when the embodiment of the invention is executed, the name of the component container is acquired according to the specified path, or the name of the component container can be input in a mode of interacting with a manager, for example, the manager executes the input operation of the name on a display screen, and the construction device responds to the input operation of the name and adds the component container according to the input name under a specified first code directory.
in an embodiment of the present invention, the construction apparatus will further add element files in the added component container, wherein the element files contain files based on the VUE framework.
Wherein the constructed component is realized based on the VUE framework by adding files based on the VUE framework in the component container.
The element generally refers to a behavior logic and a style of the component, where the behavior logic refers to a function that can be triggered by a behavior of a user operating the content of the component after the content of the component is displayed on a display screen, and for example, if the component is a button, the behavior logic of the component may be: and when the clicking operation on the button is detected, generating a triggering instruction related to the button so as to trigger the realization of the function. For another example, if the component is an account login component, the behavior logic of the component may be: and when the user is detected to click the confirmation button, acquiring data in an input box corresponding to the user name and an input box corresponding to the password, packaging the acquired data, and generating a login instruction. The style refers to the color, size, shape, and the like of the component when displayed on the display screen. For example, if a component is a button, the style of the component may be: the color is red, the size is 1cm by 1cm, and the shape is square.
In the embodiment of the present invention, after the element file is added, a preset source code needs to be written into the element file to complete the writing of the code of the component, and complete the construction of the component.
The component container, the element files under the component container and the source codes in the element files form a complete component.
In the embodiment of the invention, a component container with a preset name is added under a specified first code directory, an element file is added in the component container, the element file comprises a file based on a VUE framework, and a preset source code is written in the element file to complete the construction of the component. Compared with the prior art, when the element files of the components are constructed, the files based on the VUE framework exist, so that the components can be constructed by using the VUE framework as the bottom development framework, and the advantage of less code amount is achieved by constructing the components by using the VUE framework according to the method, therefore, the packaging performance of the constructed components can be effectively improved, the misoperation is reduced, and the system performance is improved.
Referring to fig. 4, another flow chart of an assembly construction method according to an embodiment of the present invention is shown, where the assembly construction method includes:
In the embodiment of the present invention, step 401 is similar to that described in step 301 in the embodiment shown in fig. 3, and is not described herein again.
In the embodiment of the present invention, after adding a component container, a construction apparatus adds an element file in the component container, where the element file includes a file based on a VUE framework, and further, the element file includes a behavior logic file and a style file, where the behavior logic file is based on the VUE framework, and specifically, the behavior logic file may be: vue, the style file can be obtained through a pre-compiling system, and specifically, the style file may be: style.
When adding element files in the component container, determining the names of behavior logic files to be added and the names of style files, adding behavior logic files based on the VUE framework in the component container according to the determined names of the behavior logic files, and adding style files according to the determined names of the style files.
There are various ways to determine the name of the behavior logic file and the name of the style file to be added, such as: storing the name of the behavioral logic file to be added and the name of the style file under a specified path, and acquiring the name of the behavioral logic file to be added and the name of the style file according to the specified path when needed; alternatively, the input of the name may be implemented by interacting with a manager, for example, if the manager performs an input operation of the name of the behavioral logic file on the display screen, the construction apparatus will acquire the name of the inputted behavioral logic file in response to the input operation, further, add the behavioral logic file in the component container according to the name, and if the manager performs an input operation of the name of the style file on the display screen, the construction apparatus will acquire the name of the inputted style file in response to the input operation, further, add the style file in the component container according to the name.
In the embodiment of the invention, after the behavior logic file and the style file are added in the component container, the source code is written into the behavior logic file and the style file.
The source code includes a style source code, a template source code based on a VUE framework, and a logic source code based on the VUE framework, where the logic source code may specifically be a javascript (js) source code, and the template source code may specifically be a hypertext Markup Language (HTML) template source code.
The constructing device writes the template source code and the logic source code into a behavior logic file, and writes the pattern source code into a pattern file to complete the construction of the component.
It can be understood that the component library may include a plurality of components, for example, 35 components, each of which may be constructed according to the component construction method in the embodiment of the present invention, and components with different functions may be developed according to needs, so that the components in the component library can meet the development requirements of the front-end page of the background management system.
In the embodiment of the invention, after a component container with a preset name is added under a specified first code directory, the name of a behavior logic file to be added and the name of a style file are determined, the behavior logic file based on a VUE frame is added in the component container according to the name of the behavior logic file, the style file is added according to the name of the style file, a preset template source code and a preset logic source code based on the VUE frame are written into the behavior logic file, and the style source code is written into the style file. By using the VUE framework to construct the assembly, the VUE framework can be used as a bottom development framework, and the advantage of less code amount is achieved by constructing the assembly by using the VUE framework in the above mode, so that the packaging performance of the constructed assembly can be effectively improved, misoperation is reduced, and the overall performance of the system is improved.
Referring to fig. 5, another flow chart of an assembly construction method according to an embodiment of the present invention is shown, where the assembly construction method includes:
and 507, starting a test system, and testing the component by using the test behavior logic file through the test system.
In the embodiment of the present invention, steps 501 to 504 are similar to those described in the embodiment shown in fig. 4, and are not described herein again.
In embodiments of the present invention, the construction apparatus may also test the constructed assembly after constructing the assembly to verify the display effect of the constructed assembly.
Wherein the constructing means adds the test component container having the same name as the component container in the first code directory under the designated second code directory.
The second code directory may be demo.
The constructing device also adds a test behavior logic file which is based on the VUE framework and has the same name as the behavior logic file under the component container in the test component container, namely, if the component container added under src/component is A and the behavior logic file added under the component container A is B.vue, when the test is needed, the test component container named A needs to be added under demo, and the test behavior logic file named B.vue needs to be added in the test component container.
Further, the construction apparatus will start a test system, and the test system will test the component constructed under the first code directory by using the test behavior logic file. The test system belongs to a system in a component library architecture, and specifically may be dev-serve.
Specifically, the method comprises the following steps: the construction device generates a VUE instance by using the test system to quote a behavior logic file under the component container of the constructed component according to the test behavior logic file; and calling the VUE instance through the test system so as to display the VUE instance on a webpage, so that a manager can visually observe the VUE instance of the constructed component from a display screen and determine whether the VUE instance meets the requirement.
The behavior logic file under the reference component container may specifically include: when the construction device tests the constructed assembly, the assembly container with the same name is searched from the first code directory according to the name of the test assembly container through the test system, and after the assembly container with the same name is searched, whether the name of the behavior logic file under the assembly container is consistent with the name of the test behavior logic file or not is determined, if so, the searched behavior logic file under the assembly container is referred, and the VUE instance is generated.
It can be understood that, the behavior logic file and the style file under the component container under the first code directory have an association relationship, and the association relationship is embodied by the source code in the behavior logic file, and the source code of the behavior logic file contains the code for referring to the style file, so when the VUE is generated by referring to the behavior logic file, the style file is referred to by using the source code in the behavior logic file, and the UVE instance is generated by using the behavior logic file and the referred style file.
In the embodiment of the invention, after a component is constructed, a testing component container with the same name as that of a component container of the constructed component is added under a specified second code directory, a testing behavior logic file with the same name as that of a behavior logic file under the component container and based on a UVE frame is added in the testing component container, a testing system is started, and the testing of the constructed component is realized by the testing system by utilizing the testing component container and the testing behavior logic file, so that the constructed component can be displayed on a webpage of a display screen for testing.
In order to better understand the technical solution in the embodiment of the present invention, a method for using the component library obtained in the above manner in the system will be described below, and the specific method is as follows:
1) if the component library needs to be installed, the following code can be specifically executed by introducing npm:
npm install‘tbd-design’；
alternatively, dependences, "vucc" is configured in package. "Λ 1.2.0"
2) If the component library is required to be used integrally and the ccmd & & amd introduction method is supported, the execution codes are as follows:
Let components＝require(‘vucc’)；
alternatively, the first and second electrodes may be,
Import components from“vucc’；
in addition, a direct introduction method is supported, and the executed codes are as follows:
Require(‘vucc/style.css’)；
Import components from‘vucc/spilt’；
after the component library is introduced, the component library can be added into the VUE framework for use in the following way
Or;
by the method, the components in the component library can be easily introduced into the page, and the VUE instances of the components are displayed.
Please refer to fig. 6, which is a schematic diagram of an assembly structure apparatus according to an embodiment of the present invention, the structure apparatus includes:
a catalog adding module 601, configured to add a component container with a preset name under a specified first code catalog;
a file adding module 602, configured to add element files in the component container, where the element files include files based on a VUE framework;
a writing module 603, configured to write a preset source code into the element file, so as to complete the construction of the component.
In an embodiment of the present invention, the first code directory may specifically be src/component, and the first code directory is located in a source code library in a component library architecture.
Wherein the constructed component is realized based on the VUE framework by adding files based on the VUE framework in the component container.
The element generally refers to a behavior logic and a style of the component, where the behavior logic refers to a function that can be triggered by a behavior of a user operating the content of the component after the content of the component is displayed on a display screen, and for example, if the component is a button, the behavior logic of the component may be: and when the clicking operation on the button is detected, generating a triggering instruction related to the button so as to trigger the realization of the function. For another example, if the component is an account login component, the behavior logic of the component may be: and when the user is detected to click the confirmation button, acquiring data in an input box corresponding to the user name and an input box corresponding to the password, packaging the acquired data, and generating a login instruction. The style refers to the color, size, shape, and the like of the component when displayed on the display screen. For example, if a component is a button, the style of the component may be: the color is red, the size is 1cm by 1cm, and the shape is square.
In the embodiment of the invention, a component container with a preset name is added under a specified first code directory, an element file is added in the component container, the element file comprises a file based on a VUE framework, and a preset source code is written in the element file to complete the construction of the component. Compared with the prior art, when the element files of the components are constructed, the files based on the VUE framework exist, so that the components can be constructed by using the VUE framework as the bottom development framework, and the advantage of less code amount is achieved by constructing the components by using the VUE framework according to the method, therefore, the packaging performance of the constructed components can be effectively improved, the misoperation is reduced, and the system performance is improved.
Please refer to fig. 7, which is another schematic diagram of a device constructing apparatus according to an embodiment of the present invention, the device constructing apparatus includes a directory adding module 601, a file adding module 602, and a writing module 603 in the embodiment shown in fig. 6, and is similar to the content described in the embodiment shown in fig. 6, and is not repeated here.
In this embodiment of the present invention, the file adding module 602 includes:
a name determining module 701, configured to determine a name of a behavior logic file to be added and a name of a style file;
a first adding module 702, configured to add a behavior logic file based on the VUE framework in the component container according to the name of the behavior logic file, and add a style file according to the name of the style file.
Further, the source code includes: the system comprises a style source code, a template source code based on a VUE framework and a logic source code based on the VUE framework;
the writing module 603 is specifically configured to: writing the preset template source code and the preset logic source code into the behavior logic file, and writing the pattern source code into the pattern file.
In the embodiment of the present invention, the element file includes a file based on a VUE framework, and further, the element file includes a behavior logic file and a style file, where the behavior logic file is based on the VUE framework, and specifically may be: vue, the style file can be obtained through a pre-compiling system, and specifically, the style file may be: style.
The source code includes a style source code, a template source code based on a VUE framework, and a logic source code based on the VUE framework, where the logic source code may specifically be a javascript (js) source code, and the template source code may specifically be a hypertext Markup Language (HTML) template source code.
It can be understood that the component library may include a plurality of components, for example, 35 components, each of which may be constructed according to the component construction method in the embodiment of the present invention, and components with different functions may be developed according to needs, so that the components in the component library can meet the development requirements of the front-end page of the background management system.
In the embodiment of the invention, after a component container with a preset name is added under a specified first code directory, the name of a behavior logic file to be added and the name of a style file are determined, the behavior logic file based on a VUE frame is added in the component container according to the name of the behavior logic file, the style file is added according to the name of the style file, a preset template source code and a preset logic source code based on the VUE frame are written into the behavior logic file, and the style source code is written into the style file. By using the VUE framework to construct the assembly, the VUE framework can be used as a bottom development framework, and the advantage of less code amount is achieved by constructing the assembly by using the VUE framework in the above mode, so that the packaging performance of the constructed assembly can be effectively improved, misoperation is reduced, and the overall performance of the system is improved.
Please refer to fig. 8, which is another schematic diagram of an assembly configuration apparatus according to an embodiment of the present invention, the configuration apparatus includes a directory adding module 601, a file adding module 602, and a writing module 603 in the embodiment shown in fig. 7, and the file adding module 602 includes a name determining module 701 and a first adding module 702, and is similar to the content described in the embodiment shown in fig. 7, and is not repeated here.
In an embodiment of the invention, the construction apparatus further comprises:
a second adding module 801, configured to add, after the component is constructed, a test component container having the same name as the component container in a specified second code directory;
a third adding module 802, configured to add, in the test component container, a test behavior logic file that is the same in name as the behavior logic file and is based on a VUE framework;
the testing module 803 is configured to start a testing system, and test the component by using the testing component container and the testing behavior logic file through the testing system.
Further, the test module 803 includes:
an instance generation module 804, configured to refer to the behavior logic file under the component container according to the test component container and the test behavior logic file through the test system, and generate a VUE instance;
and the calling and displaying module 805 is used for calling the VUE instance through the test system and displaying the VUE instance on a webpage.
In an embodiment of the present invention, the second code directory may be demo.
The third adding module 802 adds a test behavior logic file which has the same name as the behavior logic file under the component container and is based on the VUE framework into the test component container, that is, if the component container added under src/component is a and the behavior logic file added under the component container a is b.vue, when a test is required, a test component container named a needs to be added under demo, and a test behavior logic file named b.vue needs to be added into the test component container.
The test system started by the test module 803 belongs to a system in a component library architecture, and may specifically be dev-service.
It can be understood that, the behavior logic file and the style file under the component container under the first code directory have an association relationship, and the association relationship is embodied by the source code in the behavior logic file, and the source code of the behavior logic file contains the code for referring to the style file, so when the VUE is generated by referring to the behavior logic file, the style file is referred to by using the source code in the behavior logic file, and the UVE instance is generated by using the behavior logic file and the referred style file.
In the embodiment of the invention, after a component is constructed, a testing component container with the same name as that of a component container of the constructed component is added under a specified second code directory, a testing behavior logic file with the same name as that of a behavior logic file under the component container and based on a UVE frame is added in the testing component container, a testing system is started, and the testing of the constructed component is realized by the testing system by utilizing the testing component container and the testing behavior logic file, so that the constructed component can be displayed on a webpage of a display screen for testing.
It will be appreciated that the modular construction apparatus described in relation to any of the embodiments of figures 6 to 8 is that of figures 1 and 2.
Also provided in an embodiment of the present invention is a computer-readable storage medium having computer-readable instructions stored thereon, which when executed by a processor implement the steps in the component construction method in any one of fig. 3 to 5.
In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is merely a logical division, and in actual implementation, there may be other divisions, for example, multiple modules or components may be combined or integrated into another system, or some features may be omitted, or not implemented. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or modules, and may be in an electrical, mechanical or other form.
The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical modules, may be located in one place, or may be distributed on a plurality of network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.
In addition, functional modules in the embodiments of the present invention may be integrated into one processing module, or each of the modules may exist alone physically, or two or more modules are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode.
The integrated module, if implemented in the form of a software functional module and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
It should be noted that, for the sake of simplicity, the above-mentioned method embodiments are described as a series of acts or combinations, but those skilled in the art should understand that the present invention is not limited by the described order of acts, as some steps may be performed in other orders or simultaneously according to the present invention. Further, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred and that no acts or modules are necessarily required of the invention.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
In view of the above description of the component constructing method and apparatus, the component library architecture and the computer readable storage medium provided by the present invention, those skilled in the art will recognize that there may be variations in the embodiments and applications of the concept of the present invention, and therefore the present disclosure should not be construed as limiting the present invention.
Claims (9)
1. A method of component construction, the method comprising:
adding a component container with a preset name under a specified first code directory;
determining the name of a behavior logic file to be added and the name of a style file;
adding behavior logic files based on a VUE framework in the component container according to the names of the behavior logic files, and adding style files according to the names of the style files;
wherein the behavior logic file and the style file have an association relationship;
and writing preset template source codes and logic source codes into the behavior logic file, and writing preset pattern source codes into the pattern file to complete the construction of the assembly.
2. The method of constructing as claimed in claim 1, wherein the method further comprises:
after the component is constructed, adding a test component container with the same name as the component container under a specified second code directory;
adding a test behavior logic file which has the same name as the behavior logic file and is based on a VUE framework into the test component container;
and starting a test system, and testing the component by using the test component container and the test behavior logic file through the test system.
3. The method of claim 2, wherein said testing the component with the test component container and the test behavior logic file by the test system comprises:
the test system refers to the behavior logic file under the component container according to the test component container and the test behavior logic file to generate a VUE instance;
and calling the VUE instance through the test system, and displaying the VUE instance on a webpage.
4. An assembly construction device, characterized in that the device comprises:
the catalog adding module is used for adding a component container with a preset name under the appointed first code catalog;
the name determining module is used for determining the name of the behavior logic file to be added and the name of the style file;
a first adding module, configured to add a behavior logic file based on a VUE framework in the component container according to the name of the behavior logic file, and add a style file according to the name of the style file;
wherein the behavior logic file and the style file have an association relationship;
and the writing module is used for writing preset template source codes and logic source codes into the behavior logic file and writing preset pattern source codes into the pattern file so as to complete the construction of the assembly.
5. A construction device according to claim 4, wherein said device further comprises:
the second adding module is used for adding a test component container with the same name as the component container under a specified second code directory after the component is constructed;
a third adding module, configured to add, in the test component container, a test behavior logic file that is the same in name as the behavior logic file and is based on a VUE framework;
and the test module is used for starting a test system and testing the component by using the test component container and the test behavior logic file through the test system.
6. Construction installation according to claim 5, wherein the test module comprises:
the example generation module is used for quoting the behavior logic file under the component container through the test system according to the test component container and the test behavior logic file to generate a VUE example;
and the calling display module is used for calling the VUE instance through the test system and displaying the VUE instance on a webpage.
7. A component library architecture, the component library architecture comprising: the system comprises an output port, a source code library, a service support system and a VUE framework;
the output port and the source code library are connected with the service support system, and the VUE framework is a bottom development framework of the component library framework;
the service support system comprises the component constructing device according to any one of claims 4 to 6, and the components constructed by the component constructing device are stored in the source code library.
8. A computer-readable storage medium having computer-readable instructions stored thereon, wherein the computer-readable instructions, when executed by a processor, implement the component construction method of any of claims 1-3.
9. An electronic device, comprising:
a memory for storing executable instructions;
a processor configured to implement the component construction method of any of claims 1-3 when executing the executable instructions.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710467879.4A CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710467879.4A CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109101225A CN109101225A (en) | 2018-12-28 |
| CN109101225B true CN109101225B (en) | 2021-08-06 |
Family
ID=64795620
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710467879.4A Active CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109101225B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111158684B (en) * | 2019-12-30 | 2023-07-04 | 北京天融信网络安全技术有限公司 | System creation method, device, electronic equipment and readable storage medium |
| CN113190299B (en) * | 2020-01-14 | 2022-08-09 | 成都鼎桥通信技术有限公司 | Method and equipment for displaying custom layer on map based on VUE |
| CN111324347B (en) * | 2020-02-06 | 2023-08-18 | 北京字节跳动网络技术有限公司 | Component construction method, device and system, page generation method, device and medium |
| CN113626067A (en) * | 2020-05-08 | 2021-11-09 | 腾讯科技（深圳）有限公司 | Component publishing method and device |
Family Cites Families (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| FR2810423A1 (en) * | 2000-06-16 | 2001-12-21 | Suntech | Method for developing computer projects, comprises functional analysis, computer creation of components to fulfill the functions,declaration of components on computer system and loading into computer |
| CN1956445A (en) * | 2005-10-28 | 2007-05-02 | 北京航空航天大学 | Implementing method faced to gate package of web service |
| CN104020990B (en) * | 2014-05-12 | 2017-08-01 | 小米科技有限责任公司 | Date selects control display methods and device |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN106302008B (en) * | 2016-08-05 | 2019-02-26 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN106569900B (en) * | 2016-10-28 | 2019-08-23 | 腾讯科技（深圳）有限公司 | Applied program processing method and device |
| CN106709288B (en) * | 2016-12-22 | 2018-07-24 | 腾讯科技（深圳）有限公司 | Application program review operations permission treating method and apparatus |
| CN106815016A (en) * | 2016-12-23 | 2017-06-09 | 四川大学 | A kind of MVVM based on Domain Driven Design designs a model |
| CN106560787A (en) * | 2016-12-29 | 2017-04-12 | 武汉斗鱼网络科技有限公司 | MVVM-framework-based view page displaying method and apparatus |
-
2017
- 2017-06-20 CN CN201710467879.4A patent/CN109101225B/en active Active
Non-Patent Citations (1)
| Title |
|---|
| MVVM，WPF，Vue.js，以及如何在企业中使用Vue.js;Raynor Chan;《https://www.jianshu.com/p/561389867260》;20170313;1-9 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109101225A (en) | 2018-12-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109101225B (en) | Component construction method and device, component library architecture and computer readable storage medium | |
| US10643023B2 (en) | Programmatic native rendering of structured content | |
| US9910833B2 (en) | Automatically rendering web and/or hybrid applications natively in parallel | |
| US20080127060A1 (en) | Dynamic mating of a modified user interface with pre-modified user interface code library | |
| CN110704783B (en) | Interaction method and device of H5 page and native APP based on custom protocol | |
| CN109960491A (en) | Application program generation method, generating means, electronic equipment and storage medium | |
| Pinto et al. | From native to cross-platform hybrid development | |
| CN103544024A (en) | Method and system for generating browser page and terminal device | |
| Arthorne et al. | Official Eclipse 3.0 Faq (Eclipse Series) | |
| CN108132954B (en) | Localized loading method and device for HTML (Hypertext markup language) page | |
| CN113918195A (en) | Application interface updating method and device, electronic equipment and readable storage medium | |
| US20140223414A1 (en) | Paige control for enterprise mobile applications | |
| CN114996619A (en) | Page display method and device, computer equipment and storage medium | |
| CN111045707B (en) | Method, apparatus, computer device and storage medium for updating applet | |
| US20130067314A1 (en) | Batch Document Formatting and Layout on Display Refresh | |
| CN111198738A (en) | Mobile terminal page display method and device and electronic equipment | |
| US9811448B2 (en) | Event-driven software testing | |
| CN110955473B (en) | Method and device for displaying loading prompt information | |
| CN114253536A (en) | Calling method of interface design component, terminal device and readable storage medium | |
| CN111782180A (en) | Page generation method and device, electronic equipment and storage medium | |
| CN109542447B (en) | OTX program file execution method and device | |
| CN111897728A (en) | Interface debugging method and related equipment | |
| Barker et al. | Pro data visualization using R and JavaScript | |
| CN115645905B (en) | Cursor display method and device, electronic equipment and storage medium | |
| KR101314098B1 (en) | Browser driving apparatus and method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |