CN114063998A

CN114063998A - Web end modular development method and system, and storage medium

Info

Publication number: CN114063998A
Application number: CN202010761851.3A
Authority: CN
Inventors: 翟雄峰
Original assignee: China Mobile Communications Group Co Ltd; China Mobile Suzhou Software Technology Co Ltd
Current assignee: China Mobile Communications Group Co Ltd; China Mobile Suzhou Software Technology Co Ltd
Priority date: 2020-07-31
Filing date: 2020-07-31
Publication date: 2022-02-18

Abstract

The embodiment of the application discloses a method and a system for modular development of a Web end and a storage medium, wherein the method comprises the following steps: configuring a basic component and a monitoring component of a Web end, and defining a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing the real-time data of the basic components; and deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end. The maintainability of the code can be effectively improved, so that the Web end test work is simplified, and the coupling degree between the modules is reduced.

Description

Web end modular development method and system, and storage medium

Technical Field

The invention relates to the technical field of computers, in particular to a method and a system for modular development of a Web end and a storage medium.

Background

Currently, a common mode of Web-side development is generally to construct a single-page Web application (SPA) application based on an MVVM (Model-View Model) framework. Compared with the traditional development of Java Server Pages (JSP), Hypertext preprocessors (PHP) and the like, the development efficiency can be greatly improved.

The MVVM framework provides modular packaging to a certain extent, is mainly realized by DOM building components and by component division modules, and gradually becomes the most common modular scheme of the SPA at the Web end. However, the development process of the modular system has the problems of low maintainability, high complexity of testing at the Web end and complex relation between modules.

Disclosure of Invention

The embodiment of the application provides a method and a system for modular development of a Web end and a storage medium, which can effectively improve the maintainability of codes, thereby simplifying the testing work of the Web end and reducing the coupling degree between modules.

The technical scheme of the embodiment of the application is realized as follows:

in a first aspect, an embodiment of the present application provides a Web end modular development method, where the method includes:

configuring a basic component and a monitoring component of a Web end, and defining a state parameter corresponding to the basic component; wherein the state parameter is used for predicting the interaction state of the basic component; the monitoring component is used for acquiring interactive data;

establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing real-time data of the basic components;

and deploying the basic component, the monitoring component, the state service module and the data hosting module to complete the development of the Web end.

In a second aspect, an embodiment of the present application provides a Web end modular development method, where the method includes:

after the Web end is started, initializing a first component in the basic components;

recording a real-time status of the first component;

when the real-time state is a finished state, storing the interactive data of the first assembly through a data management module, and simultaneously informing a monitoring assembly through a state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data;

after the completion state is notified through the state service module, controlling a second component to acquire the interaction data from the data hosting module; wherein the second component is the other component of the basic components that is subscribed to the first component.

In a third aspect, an embodiment of the present application provides a development system, where the development system includes: a configuration unit, a definition unit, a setup unit, a deployment unit,

the configuration unit is used for configuring a basic component and a monitoring component of the Web end;

the defining unit is used for defining the state parameters corresponding to the basic components; wherein the state parameter is used for predicting the interaction state of the basic component; the monitoring component is used for acquiring interactive data;

the establishing unit is used for establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing real-time data of the basic components;

the deployment unit is used for deploying the basic component, the monitoring component, the state service module and the data hosting module so as to complete the development of the Web end.

In a fourth aspect, an embodiment of the present application provides a development system, where the development system includes: an initialization unit, a recording unit, a storage unit, a notification unit, and an acquisition unit,

the initialization unit is used for initializing a first component in the basic components after the Web end is started;

the recording unit is used for recording the real-time state of the first component;

the storage unit is used for storing the interactive data of the first assembly through the data management module when the real-time state is a finished state;

the notification unit is used for notifying the monitoring component through the state service module when the real-time state is the completion state; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data;

the obtaining unit is used for controlling the second component to obtain the interactive data from the data hosting module after the completion state is notified by the state service module; wherein the second component is the other component of the basic components that is subscribed to the first component.

In a fifth aspect, the present application provides a development system, where the development system includes a processor and a memory storing instructions executable by the processor, and when the instructions are executed by the processor, the development system implements the Web-end modular development method as described above.

In a sixth aspect, the present application provides a computer-readable storage medium, which stores a program thereon, and is applied to a development system, where the program is executed by a processor to implement the Web-end modular development method as described above.

The embodiment of the application provides a Web end modular development method and system and a storage medium, wherein the development system configures a basic component and a monitoring component of a Web end and defines a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing the real-time data of the basic components; and deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end. After the Web end is started, initializing a first component in the basic components; recording a real-time state of the first component; when the real-time state is the completion state, storing the interactive data of the first assembly through the data management module, and simultaneously informing the monitoring assembly through the state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data; after the completion state is notified through the state service module, controlling the second component to acquire the interactive data from the data hosting module; and the second component is the other component in the basic component and subscribed to the first component. That is to say, the Web end modular development method provided by the application can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and therefore, when the application is maintained, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, the test work of the Web end is simplified, and the coupling degree between the modules is reduced.

Drawings

FIG. 1 is a diagram illustrating the functionality of a newly created rule module;

FIG. 2 is a schematic diagram of a first implementation flow of a Web end modular development method;

FIG. 3 is a schematic diagram of a second implementation flow of the Web-end modular development method;

FIG. 4 is an external interaction diagram of a component;

FIG. 5 is a state transition diagram of an assembly;

FIG. 6 is a schematic state transition diagram of a composite assembly;

FIG. 7 is a first diagram illustrating the internal logic of the device;

FIG. 8 is a second schematic diagram of the internal logic of the device;

FIG. 9 is a first schematic diagram of the structure of the development system;

fig. 10 is a schematic diagram of a configuration structure of the development system.

Detailed Description

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. It is to be understood that the specific embodiments described herein are illustrative of the relevant application and are not limiting of the application. It should be noted that, for the convenience of description, only the parts related to the related applications are shown in the drawings.

The World Wide Web (Web), also known as the World Wide Web, is a hypertext and HTTP based, global, dynamically interactive, cross-platform, distributed graphical information system. The network service is built on the Internet, provides a graphical and easily accessible visual interface for a browser to search and browse information on the Internet, and documents and hyperlinks organize information nodes on the Internet into a mutually-associated mesh structure.

The web page is a page in a website, is a basic element constituting the website, and is a platform for bearing various website applications. In popular terms, a website is composed of web pages. A web site (Website) is a collection of related web pages that are created on the internet using a tool such as hypertext Markup Language (HTML) according to a predetermined rule to display specific content. In short, a website is a communication tool, just like a bulletin board, through which people can publish or collect information.

The text and the picture are two most basic elements forming a webpage. Can be simply understood as: the characters are the contents of the web pages, and the pictures are the beautiful appearance of the web pages. Elements of a web page include, among other things, animation, music, programs, and the like.

Generally, the web pages are all documents ending with htm or HTML suffix, which is commonly called HTML document. And different suffixes respectively represent different types of web page files.

The web pages have various classifications, the classification in the traditional sense is dynamic and static pages, in principle, static pages are redesigned and changed through website design software, the relative comparison is lagged, and certainly, a website management system can also generate static pages, which are called as static pages. The dynamic page automatically processes the automatically updated page through the web page script and language, such as a post, namely, the web server runs a program, automatically processes information, and updates the web page according to the flow.

Currently, a common mode of Web-side development is generally to construct a single-page Web application (SPA) application based on an MVVM (Model-View Model) framework. The most important advantage is that the template page rendering of the Web end is carried out in a user agent (generally a browser), and the service of the back end can be developed in a form of completely turning to a service provider. Compared with the traditional development of Java Server Pages (JSP), Hypertext preprocessors (PHP) and the like, the development efficiency can be greatly improved. Moreover, the Web end can be more concentrated on the new technical application of the Web end and the user interaction experience is improved, and the server end is concentrated on improving the service quality.

In this context, an increase in the service logic of the Web side is caused, and therefore, a series of MVVM frameworks represented by three major frameworks of angle. The functional core of this framework is the "data-view" mapping and provides a somewhat modular encapsulation. Gradually constitutes a whole set of solutions that are planned in the project as a subject. Different frameworks are explored in different ways on the way of modular development, for example, modularization realized by module + directive in the angular1.x version, a component in vue.js is a module basic unit, and a component system constructed by read.component + Class in read.js is realized to different degrees on modularization. But at the end of the root, the 'DOM- > component- > module' is still the construction idea. Among them, Document Object Model (DOM).

From a formal commonality, the most common modular idea today is to "build modules by splitting html/css/js". Js technology stack, for example, can be used to build a vue component (vue extension-based SPA using the vue-cli scaffold program. Each vue component is composed of three parts of style, template and script. The three frames are slightly different in segmentation mode and have small essential difference.

The method is a modular scheme of the most common Web-side SPA nowadays, and comprises the steps of segmenting the associated html/css/js, constructing components by DOM and dividing the modules by the components. The components, or modules, may be more broadly said. Among the individual components, the main functions are: the styles are defined by css, the DOM structure is defined by html, and the event response behaviors of the DOM are defined by js scripts. Thus, it can be seen that the main focus in js script code under this scheme is on the rendering of the DOM in the build page, event response processing.

In the existing Web end modularization scheme, the key points of modularization are as follows: 1. packaging of DOM programming; 2. functional partitioning of html/css/js. In the long-term practice process, the mode focuses on isolating complexity and compatibility of DOM programming, improving development and execution efficiency, and has gaps from building an easily understood application program structure which is closely interacted.

In this way, the center of gravity of the developer is not in consideration of whether the divided modules are reasonable or not, whether the rationality of the service is reflected or not, whether the change of the page can be clearly expressed or not, and even whether the maintainability of the code can be well paid attention to. Therefore, the quality and maintainability of code development are completely determined by the development ability and occupational literacy of developers. Further, as the system scale increases, problems of complicated modules, serious coupling, complicated relationships between modules, and reduced reusability may be encountered.

Moreover, unlike the development of a server such as Java, the testing work of the application at the Web end has been a troublesome problem, mainly because the modularization of the development code is directed to a pure technical level, not to a business level, more specifically to an interaction level. During the development of existing modular systems, the developed modules are often inconsistent with the expected test cells. Fig. 1 is a schematic diagram of functions of a newly created rule module, as shown in fig. 1, when a function test needs to be performed on a part in a frame during a development process, since a "newly created rule" in a code is embedded in the entire system as an entire module, it is not possible to perform a test only on a part of functions, and further, it is not possible to determine whether an operation result of an embedded component meets an expectation during a process of testing the entire module, i.e., the "newly created rule".

That is to say, the development process of the existing modular system has the problems of low maintainability, high complexity of the Web end test and complex relation between modules.

In order to solve the above problems, in the embodiment of the present application, the development system can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and thus when maintaining the application, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, thereby simplifying the test work of the Web end, and reducing the coupling degree between the modules.

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application.

It should be noted that, in the embodiment of the present application, the Web-side modular development method may include two parts, a development part of code and a calling part of code.

An embodiment of the present application provides a Web-side modular development method, and fig. 2 is a schematic view illustrating an implementation flow of the Web-side modular development method, as shown in fig. 2, in an embodiment of the present application, a method for a development system to perform Web-side modular development for a development part of a code may include the following steps:

step 101, configuring a basic component and a monitoring component of a Web end, and defining a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring the interactive data.

102, establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing real-time data of the basic components.

And 103, deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end.

In the embodiment of the application, the core of the development system for Web-side modular development lies in that the system is constructed by using the idea of driving module design based on the states of the attachment service and the interaction.

Specifically, in the embodiment of the present application, when configuring the basic component of the Web end, the development system may use vue component as a basic component unit, and specifically, may configure and use various service constructs in the vue technology stack.

Js is a set of progressive frameworks that build user interfaces. Unlike other heavyweight frames, Vue employs a design developed in bottom-up increments. Vue focus only on the viewing layer and are very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed using single-file components and libraries supported by Vue ecosystems.

Js is a view component that implements data binding and composition of responses through Application Programming Interfaces (APIs) that are as simple as possible.

Js, which provides an abstraction that can use independently reusable gadgets to build large applications, any type of application interface can be abstracted as a component tree.

The Component (Component) is one of the strongest functions of vue. js, and can extend HTML elements, encapsulating reusable code. At a higher level, a component is a custom element for which special functionality is added by the compiler of vue. In some cases, the components may also appear as native HTML elements extended with the is property. All Vue components are also Vue instances at the same time, so the same option objects (except some root level specific options) can be accepted and the same lifecycle hooks provided.

Further, in the embodiments of the present application, the basic component may be a single component unit, or may be a composite component, that is, the basic component may be a composite component formed by a plurality of sub-components.

It is understood that in the embodiments of the present application, the communication between the components may be performed by status broadcasting, and broadcasting, multicasting, etc. may be implemented by self-selection.

It should be noted that in the embodiments of the present application, another implementation of communication between components is organized using vue the characteristics of the components themselves.

Further, in the embodiment of the application, after the development system configures the basic component on the Web side, the state parameter of the basic component may also be defined. Wherein the state parameter is used for predicting the interaction state of the basic component.

That is, in embodiments of the present application, for a base component, the development system may define the states that the base component may experience, i.e., define state parameters that are in close proximity to the business or interaction of the base component.

It is understood that, in the embodiments of the present application, the states that a basic component may experience when developing a page may include an initialization state, an in-input state, a format check error state, a check pass state, a completion state, and various specific states. Accordingly, for each base component, the development system may define the state parameters corresponding to the component based on the prediction of the state corresponding to the base component.

For example, in the present application, if the states that the basic component may be predicted to experience include an initialization state, an input state, and a check-passing state, the development system may define the state parameters corresponding to the basic component as an input parameter, and a pass parameter.

Further, in the embodiment of the present application, the development system may further establish a state service module and a data hosting module.

Specifically, in the present application, the status service module is configured to store and notify a real-time status of the basic component; the data hosting module is used for managing real-time data of the basic components.

It can be understood that, in the embodiment of the present application, the establishment of the data hosting module may enable all the components to register and host the externally shared data in a unified manner, and the access is separated.

Further, in the embodiment of the present application, the establishment of the state service module may enable the component to use the change of the state driving system externally, and at the same time, may also enable the component to migrate the internally used state as the internal code logic main line. In particular, the state service module may be used for storage of states and notification of states. The component may store its own state to the state service module and then, once the state of the component changes, may notify other listening components of the change.

That is, in the present application, the development system uses the vue.js technology stack to implement the development of Web-side modularization, and for one basic component, the main logic is divided into two parts, namely, internal logic and external interaction.

It can be understood that, in the embodiment of the present application, when writing a page application, besides module division and design, the development system can conform to the states of services and interactions, and plan basic components according to pages, wherein, for a single component, a state that can be experienced is well defined, and the state is in close contact with the services or interactions.

It should be noted that, in the embodiments of the present application, the implementation of the SPA module at the Web end may be referred to as a component, and therefore, in the embodiments of the present application, the component and the module have equivalent meanings.

Further, in the embodiment of the present application, when the basic component is a composite component, the basic component may include a plurality of sub-components, and then, when the development system defines the state parameter corresponding to the basic component, the state parameter defining the basic component may be determined by a plurality of states corresponding to the plurality of sub-components. That is, the plurality of state parameters of the plurality of sub-components of the base component may control the state parameters of the base component.

Specifically, in the present application, when the state parameter defining the basic component is determined by a plurality of states corresponding to a plurality of sub-components, if at least one state parameter of the plurality of state parameters is indicated as an input state, the state parameter defining the basic component may be indicated as the input state; if multiple status parameters are all indicated as pass status, then the status parameters of the base component may be defined to indicate pass status.

Further, in the embodiment of the present application, after defining the state parameters corresponding to the basic component, the development system may further determine, based on the state parameters of the basic component, the internal logic mainline corresponding to the basic component; script code may then be generated according to the internal logical mainline.

Further, in the embodiment of the application, after the development system completes configuration of the basic component, establishment of the state service module and the data hosting module, the basic component, the monitoring component, the state service module and the data hosting module can be deployed to complete development of the Web end.

It can be understood that, in the embodiment of the present application, the Web-side modular development method proposed in the above step 101 to step 103 is a method in which a set of module definitions and combinations are designed by taking a state as a driver. In the method, the state is the core of a module internal construction logic system and an external view. And the communication and mutual driving between the modules also take the state as the main driving factor.

Further, the Web end modular development method provided by the application defines a method for cooperation among modules. In the method, a component data service, namely a data hosting module, for sharing data among processing modules and a status notification service, namely a status service module, for communicating among the processing modules are defined, the two services are used as a common service, are open to all components, and can be shared in a mode such as injection-dependent mode.

That is to say, in the present application, a modular development system is constructed according to the design idea of the present solution, so that the partition design of modules can be realized, and the test writing work of the Web side can be easily performed. Moreover, in the development process, the existing components can be more easily compounded to form a new component. Moreover, all components are easy to understand, and the written module code has semantic and interactive characteristics naturally, so that business logic is more directly embodied.

Furthermore, the Web end modular development method provided by the application can improve maintainability, so that the development efficiency and the development quality can be improved, and the cost is reduced; accordingly, development experience can be improved, and maintenance difficulty can be reduced; the bug testing rate is reduced to a great extent; the method can directly reduce the bug hidden by unclear Web end service logic division, and improve the experience in the using process.

It should be noted that the Web end modular development method provided by the present application may be established on the basis of an MVVM framework, such as an vue technology stack system in the present application. Of course, other similar frameworks such as React and Angular can be selected, so that the module system is lower in cost and rapid and standard development is really realized.

Moreover, in the process of agile development, the requirements of frequent updating and quick iteration of the demand are often met, and the advantages of the development mode can be reflected to the maximum extent along with the accumulation of business scale and the change of development teams.

The embodiment of the application provides a Web end modular development method, wherein a development system configures a basic component and a monitoring component of a Web end and defines a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing the real-time data of the basic components; and deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end. That is to say, the Web end modular development method provided by the application can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and therefore, when the application is maintained, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, the test work of the Web end is simplified, and the coupling degree between the modules is reduced.

Based on the foregoing embodiment, another embodiment of the present application provides a Web-end modular development method, fig. 3 is a schematic diagram of an implementation flow of the Web-end modular development method, and as shown in fig. 3, in an embodiment of the present application, a method for a development system to perform Web-end modular development for a calling part of a code may include the following steps:

step 201, after the Web end is started, a first component in the basic components is initialized.

Step 202, recording the real-time state of the first component.

Step 203, after the real-time state is changed from the preparation state to the completion state, acquiring interactive data of the first assembly through the data hosting module, and simultaneously informing the monitoring assembly through the state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring the interactive data.

Step 204, after the completion state is notified through the state service module, controlling the second component to acquire the interactive data from the data hosting module; and the second component is the other component in the basic component and subscribed to the first component.

In the embodiment of the application, the development system can first out the first component in the real-language basic components after starting the Web end. The first component is one of the configured basic components.

For example, in the present application, the first component may be a login component login.

Further, in the embodiment of the present application, the internal state of the first component starts from initialization, and after the initialization is completed, the first component may enter a preparation state to wait for interaction, and after the interaction and data collection with the user are completed, the first component may transition to a completion state.

It is understood that, in the embodiment of the present application, the development system may record the state of the first component in real time, so that the real-time state of the first component may be obtained.

It should be noted that, in the embodiment of the present application, when the first component is a composite component, the first component may include a plurality of sub-components, and then the development system may record a plurality of real-time states of the plurality of sub-components when recording a real-time state of the first component; the real-time status of the first component is then determined based on the plurality of real-time statuses of the plurality of sub-components.

Specifically, in the present application, when determining the real-time status of the first component based on a plurality of real-time statuses of a plurality of sub-components, the development system may determine that the real-time status of the first component is an input status if at least one real-time status of the plurality of real-time statuses is an input status; if the plurality of real-time states are all pass states, the real-time state of the first component may be determined to be a pass state.

It should be noted that, in the embodiment of the present application, in the process of gradually converting the real-time state of the first component from the preparation state to the completion state, the development system may collect the interaction data corresponding to the first component, so that the interaction data of the first component may be stored by the data hosting module after the implementation state is the completion state.

That is, in the embodiment of the present application, after initializing the first component in the basic components, the development system may collect data generated during interaction when the first component interacts with the user, that is, collect interaction data during interaction of the first component.

Further, in the embodiment of the application, the development system records the real-time state of the first component, and if the real-time state of the first component is the completion state, the development system may store the interaction data of the first component through the data hosting module. In particular, the development system may store interaction data of the first component obtained by implementing the acquisition into the data hosting module.

It can be understood that, in the embodiment of the present application, after the development system records the real-time state of the first component, when the real-time state is the completion state, the development system may notify the listening component in the basic component through the state service module, so that the listening component enters the preparation state; the listening component can then be controlled to obtain the interaction data via the data hosting module and enter the listening component into a completed state.

It should be noted that, in the embodiment of the present application, after the real-time state of the first component is converted into the complete state, the development system may notify a component in monitoring of the state change of the first component, such as a VisitControl control component, and after receiving the notification, the component may enter a preparation state, and then may acquire the interaction data of the first component through the data hosting module in the preparation state, so as to enable the component to enter the complete state.

That is, in the present application, after the development system notifies the monitoring component through the status service module, the development system may first control the monitoring component to enter a preparation state; then, the monitoring component can be controlled to acquire interactive data through the data pipe supporting module; finally, the listening component can be controlled to enter a completion state.

Further, in the embodiment of the application, after controlling the second component to acquire the interaction data from the data hosting module, the development system may control the second component to replace the first component, and at the same time, may switch the display interface of the first component to the display interface of the second component.

It should be noted that, in the embodiment of the present application, the second component may be another component different from the first component in the configured basic component. Exemplarily, the second component may be a welome.

It is to be appreciated that in embodiments of the present application, the development system may notify the routing component after broadcasting the completion status of the first component through the status service module, so that the second component may obtain the interaction data of the first component. Further, the development system can also control the display interface of the first component to be switched into the display interface of the second component.

It should be noted that, in the present application, after the peripheral service component completes startup and initialization, the components are loaded, parsed, and initialized, actually, the structures between the components are nested layer by layer, and the state and data that need to be shared between the components can be hosted in the peripheral service.

That is, in the present application, first the first component has changed state, then the state service module is notified, and the updated data is synchronized to the data hosting module. The state service module then notifies the other components that subscribe to the change in the component, such as the second component, which receives the notification and can obtain the data in the data hosting module.

That is, in embodiments of the present application, all flow executions are based on state migration of components, i.e., a component will propagate state changes out and cause changes to components only if it reaches a specified state, e.g., state migration of VisitControl component and replacement of weicom.

It can be understood that, in the embodiment of the present application, the Web-side modular development method proposed in the above step 201 to step 204 is a method in which a set of module definitions and combinations are designed by taking a state as a driver. In the method, the state is the core of a module internal construction logic system and an external view. And the communication and mutual driving between the modules also take the state as the main driving factor.

Furthermore, the Web end modular development method provided by the application can improve maintainability, thereby improving development efficiency and development quality and reducing cost; accordingly, development experience can be improved, and maintenance difficulty can be reduced; the bug testing rate is reduced to a great extent; the method can directly reduce the bug hidden by unclear Web end service logic division, and improve the experience in the using process.

The embodiment of the application provides a Web end modularization development method, after a Web end is started, a development system initializes a first component in basic components; recording a real-time state of the first component; when the real-time state is the completion state, storing the interactive data of the first assembly through the data management module, and simultaneously informing the monitoring assembly through the state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data; after the completion state is notified through the state service module, controlling the second component to acquire the interactive data from the data hosting module; and the second component is the other component in the basic component and subscribed to the first component. That is to say, the Web end modular development method provided by the application can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and therefore, when the application is maintained, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, the test work of the Web end is simplified, and the coupling degree between the modules is reduced.

Based on the foregoing embodiment, in yet another embodiment of the present application, the Web end modular development method provided by the present application is based on a Web end, and can be regarded as executing a built application code in a browser.

Further, in the embodiment of the present application, the development system may drive the module design based on the state of the fit service and the interaction, thereby implementing the construction of the system.

Specifically, in the present application, the principle of the Web-side modular development mainly includes the following parts:

1. using vue components as basic component units, configuring various service constructs in a vue technology stack;

2. the communication between the modules is completed by state broadcasting, and broadcasting, multicasting and the like can be realized by self-selection;

3. the modules register and host the data shared by the modules in a unified way, and the access is separated;

4. the module is external, and the using state drives the change of the system;

5. in the module pair, state transition is used as an internal code logic main line;

it should be noted that, in the embodiments of the present application, since the implementation of the SPA module on the Web side can be generally referred to as a component nowadays, the component and the module have equivalent meanings in the following description.

It is understood that in the embodiments of the present application, generally, when writing a page application, the module division and design are started, and the "state of conforming to the service and interaction" refers to that a module component is planned according to a page, and a state that can be experienced by a single component is defined, and the state is close to the service or interaction. We use the vue. For a component, the main logic is divided into two parts: internal logic and external interaction.

Fig. 4 is an external interaction diagram of a component, and as shown in fig. 4, for the outside, vue components are used as basic component units in the scheme, which can be seen in an overall view of cooperation between components. Vue is the root component. The routing component has the vue official implementation vue-router, although other similar plug-ins or self-implementations may be used. Vue is the login component and welcome component. The VisitControl component realizes the whole access control function, can use a navigation guard in the routing component, and can also use a third-party plug-in or realize the function by itself. The status notification service is a service function module implemented by itself based on the event propagation mechanism of vue. The function is as a state distribution center, which receives the state change of the component in a centralized way and selects broadcast, multicast and unicast, and the scheme is realized by self. And the data hosting service manages data based on vuex. The data access and fetching are separate steps, and the data dependency between the components is not embodied in the module.

Further, in embodiments of the present application, the app. And registering the internal state of the component by the Login. And data are acquired and verified through interaction with a user, and finally the done state is entered after the submission is finished. At this time, the login.vue component informs the state subscription service to log in the done state and stores the log-in information into the data hosting service. The state service then notifies the listening component, such as the VisitControl control component, of the change to that component. After receiving the notification, the visitControl acquires the login data hosted by the Login.vue component in a ready waiting state through the data hosting service, enters a done state, and notifies the routing component of jumping through the state service, namely, the Login.vue component is replaced by the Welcome.vue component. At which point the user can see that the component in the interface has cut to the welcome page.

It can be seen that in the embodiments of the present application, all events are driven by the state transitions of the components throughout the process. A component will propagate out state changes and cause component changes only to the specified state, such as state migration of VisitControl components and replacement of welcom. While the data generated by the component is stored for use by the remaining components.

Fig. 5 is a schematic diagram of state transition of a component, and as shown in fig. 5, for the inside, the input box input of the user name username in the login page can be regarded as a component that does not need to be packaged by vue, but a vue packaging component may be used, and the component may be defined in a similar manner. All nodes are in a state, wherein init is an initial state, input is an in-input state, err-pattern is a state of a format check error, and pass is a check pass. Otherwise, determining the remote check of the condition means that the backend check remote check stage is completed. The transition between the states is mainly driven by interaction events.

Further, in the embodiment of the present application, it can be seen that the component has the state sets [ "init", "input", "err-pattern", "remote-checking", "err-repeat", "pass", "committing" ], and the component writes vue the input script code under the framework with the transition between these states as a logic main line.

It is understood that in the embodiment of the present application, the basic component unit may also be a composite component, for example, the username and passcode in the login. Specifically, fig. 6 is a schematic diagram of state transition of a composite component, and as shown in fig. 6, the composite component is composed of a subassembly a and a subassembly B, and the state of the composite component is influenced by a and B together. And when any one of the components A or B enters an input state, the composite component can be judged to enter the input state. And only when the two components, namely the username and the password, pass, the composite component Login.

Further, in the embodiment of the present application, for the internal logic code definition of the component, fig. 7 is a schematic diagram of the internal logic of the component, as shown in fig. 7, a state, data, and error information set is defined for each field inside the component. The key in the error message set is an error status for each field. And the initial state of each field in view is defined as init. And err _ empty err _ repeat, etc. are all error states. FIG. 8 is a second schematic diagram of the internal logic of the device, as shown in FIG. 8, the logic in the code is all centered around the state switch.

In summary, the logic main line of the Web end modular development method provided by the present application all uses a state as a core, and includes interaction between components and services and logic inside the components, which are all in a close-fitting state. The state is related to interaction and service logic, for example, the input focus of the user is obtained, the user name needs to be subjected to duplicate name verification, the login needs to be subjected to verification of a verification code, and the like, and the interaction and the service are directly embodied. Therefore, when the application is maintained, the structure of the program can be understood by taking the service and interaction as the entry point more directly, and the method is extremely favorable for modification, expansion, extraction and multiplexing.

The embodiment of the application provides a Web end modular development method, wherein a development system configures a basic component and a monitoring component of a Web end and defines a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing the real-time data of the basic components; and deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end. After the Web end is started, initializing a first component in the basic components; recording a real-time state of the first component; when the real-time state is the completion state, storing the interactive data of the first assembly through the data management module, and simultaneously informing the monitoring assembly through the state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data; after the completion state is notified through the state service module, controlling the second component to acquire the interactive data from the data hosting module; and the second component is the other component in the basic component and subscribed to the first component. That is to say, the Web end modular development method provided by the application can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and therefore, when the application is maintained, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, the test work of the Web end is simplified, and the coupling degree between the modules is reduced.

Based on the foregoing embodiment, in another embodiment of the present application, fig. 9 is a schematic structural diagram of a development system, and as shown in fig. 9, a development system 10 provided in the embodiment of the present application may include a configuration unit 11, a definition unit 12, an establishment unit 13, a deployment unit 14, a determination unit 15, and a generation unit 16.

The configuration unit 11 is configured to configure a basic component and a monitoring component of the Web end;

the defining unit 12 is configured to define a state parameter corresponding to the basic component; wherein the state parameter is used for predicting the interaction state of the basic component; the monitoring component is used for acquiring interactive data;

the establishing unit 13 is used for establishing a state service module and a data hosting module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing real-time data of the basic components;

the deployment unit 14 is configured to deploy the basic component, the monitoring component, the state service module, and the data hosting module to complete development of the Web end.

Further, in the embodiment of the present application, the configuration unit 11 is specifically configured to construct the basic component by using services in the vue technology stack.

Further, in the embodiment of the present application, when the basic component is a composite component, the basic component includes a plurality of sub-components, and the defining unit 12 is specifically configured to define the state parameter of the basic component to be determined by a plurality of states corresponding to the plurality of sub-components.

The defining unit 12 is further specifically configured to define the state parameter indication of the basic component as an input state when at least one state parameter of the plurality of state parameters indicates an input state; when the plurality of state parameters are all indicated as the pass state, the state parameters of the basic component are defined to be indicated as the pass state.

Further, in an embodiment of the present application, the determining unit 15 is configured to determine, based on the state parameter of the basic component, an internal logic main line corresponding to the basic component;

the generating unit 16 is configured to generate a script code according to the internal logic main line.

Further, in the embodiment of the present application, the communication between the basic components is performed by broadcasting.

In the embodiment of the present application, further, the development system 10 may further include an initialization unit 17, a recording unit 18, a storage unit 19, a notification unit 110, an acquisition unit 111, an acquisition unit 112, and a control unit 113.

The initialization unit 17 is configured to initialize a first component in the basic components after the Web end is started;

the recording unit 18 is configured to record a real-time status of the first component;

the storage unit 19 is configured to store the interaction data of the first component through a data hosting module when the real-time status is a completion status;

the notifying unit 110 is configured to notify the monitoring component through the status service module when the real-time status is the completion status; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data;

the obtaining unit 111 is configured to control the second component to obtain the interaction data from the data hosting module after the completion status is notified by the status service module; wherein the second component is the other component of the basic components that is subscribed to the first component.

Further, in an embodiment of the present application, the acquiring unit 112 is configured to, after the initialization of the first component in the basic components, acquire the interaction data during the interaction of the first component.

Further, in an embodiment of the present application, the control unit 113 is configured to control the listening component to enter a preparation state after the listening component is notified by the status service module; controlling the monitoring component to acquire the interactive data through the data hosting module; and controlling the monitoring component to enter a finished state.

Further, in an embodiment of the present application, the control unit 113 is further configured to control the second component to replace the first component after the second component acquires the interaction data from the data hosting module, and simultaneously switch a display interface of the first component to a display interface of the second component.

Further, in the embodiment of the present application, when the first component is a composite component, the first component includes a plurality of sub-components, and the recording unit 18 is specifically configured to record a plurality of real-time statuses of the plurality of sub-components; determining a real-time status of the first component based on a plurality of real-time statuses of a plurality of subcomponents.

Further, in an embodiment of the present application, the recording unit 18 is further specifically configured to determine that the real-time status of the first component is an input status when at least one real-time status of the plurality of real-time statuses is an input status; and when the plurality of real-time states are all the passing states, determining that the real-time state of the first assembly is the passing state.

In an embodiment of the present application, further, fig. 10 is a schematic diagram of a composition structure of a development system, and as shown in fig. 10, the development system 10 according to the embodiment of the present application may further include a processor 114, a memory 115 storing executable instructions of the processor 114, and further, the development system 10 may further include a communication interface 116, and a bus 117 for connecting the processor 114, the memory 115, and the communication interface 116.

In an embodiment of the present Application, the Processor 114 may be at least one of 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 Central Processing Unit (CPU), a controller, a microcontroller, and a microprocessor. It is understood that the electronic devices for implementing the above processor functions may be other devices, and the embodiments of the present application are not limited in particular. Development system 10 may also include a memory 115, which memory 115 may be coupled to processor 114, wherein memory 115 is configured to store executable program code comprising computer operating instructions, and wherein memory 115 may comprise high speed RAM memory and may also include non-volatile memory, such as at least two disk memories.

In the embodiment of the present application, the bus 117 is used to connect the communication interface 116, the processor 114, and the memory 115 and to communicate among these devices.

In an embodiment of the present application, the memory 115 is used for storing instructions and data.

Further, in an embodiment of the present application, the processor 114 is configured to configure a basic component and a monitoring component of a Web end, and define a state parameter corresponding to the basic component; wherein the state parameter is used for predicting the interaction state of the basic component; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing real-time data of the basic components; and deploying the basic component, the monitoring component, the state service module and the data hosting module to complete the development of the Web end.

Further, in an embodiment of the present application, the processor 114 is further configured to initialize a first component in the basic components after the Web end is started; recording a real-time status of the first component; when the real-time state is a finished state, storing the interactive data of the first assembly through a data management module, and simultaneously informing a monitoring assembly through a state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data; after the completion state is notified through the state service module, controlling a second component to acquire the interaction data from the data hosting module; wherein the second component is the other component in the basic component except the first component.

In practical applications, the Memory 115 may be a volatile Memory (volatile Memory), such as a Random-Access Memory (RAM); or a non-volatile Memory (non-volatile Memory), such as a Read-Only Memory (ROM), a flash Memory (flash Memory), a Hard Disk (Hard Disk Drive, HDD) or a Solid-State Drive (SSD); or a combination of the above types of memories and provides instructions and data to the processor 114.

In addition, each functional module in this embodiment may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware or a form of a software functional module.

Based on the understanding that the technical solution of the present embodiment essentially or a part contributing to the prior art, or all or part of the technical solution, may be embodied in the form of a software product stored in a storage medium, and include several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to execute all or part of the steps of the method of the present embodiment. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

The embodiment of the application provides a development system, which is used for configuring a basic component and a monitoring component of a Web end and defining a state parameter corresponding to the basic component; the state parameters are used for predicting the interaction state of the basic components; the monitoring component is used for acquiring interactive data; establishing a state service module and a data management module; the state service module is used for storing and notifying the real-time state of the basic component; the data hosting module is used for managing the real-time data of the basic components; and deploying a basic component, a monitoring component, a state service module and a data hosting module to complete the development of the Web end. After the Web end is started, initializing a first component in the basic components; recording a real-time state of the first component; when the real-time state is the completion state, storing the interactive data of the first assembly through the data management module, and simultaneously informing the monitoring assembly through the state service module; wherein, the monitoring component is other than the basic component; the monitoring component is used for acquiring interactive data; after the completion state is notified through the state service module, controlling the second component to acquire the interactive data from the data hosting module; and the second component is the other component in the basic component and subscribed to the first component. That is to say, the Web end modular development method provided by the application can use the component state as a core, so that the interaction between the component and the service and the logic inside the component can be tightly attached to the state of the component, and therefore, when the application is maintained, the structure of the program can be understood more directly by using the service and the interaction as an entry point, and further, the maintainability of the code can be effectively improved, the test work of the Web end is simplified, and the coupling degree between the modules is reduced.

An embodiment of the present application provides a computer-readable storage medium, on which a program is stored, and when the program is executed by a processor, the method for modular development of a Web end is implemented.

Specifically, the program instructions corresponding to a Web-side modular development method in this embodiment may be stored on a storage medium such as an optical disc, a hard disc, or a usb disk, and when the program instructions corresponding to a Web-side modular development method in the storage medium are read or executed by an electronic device, the method includes the following steps:

When the program instruction corresponding to a Web end modularization development method in the storage medium is read or executed by an electronic device, the method further comprises the following steps:

recording a real-time status of the first component;

after the completion state is notified through the state service module, controlling a second component to acquire the interaction data from the data hosting module; wherein the second component is the other component in the basic component except the first component.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of a hardware embodiment, a software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, optical storage, and the like) having computer-usable program code embodied therein.

The present application is described with reference to flowchart illustrations and/or block diagrams of implementations of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart block or blocks and/or flowchart block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart block or blocks in the flowchart and/or block diagram block or blocks.

The above description is only a preferred embodiment of the present application, and is not intended to limit the scope of the present application.

Claims

1. A Web end modularization development method is characterized by comprising the following steps:

2. The method of claim 1, wherein configuring the base component comprises:

the basic components are built using services in the vue technology stack.

3. The method of claim 1, wherein when the base component is a composite component, the base component comprises a plurality of sub-components, and the defining the corresponding state parameters of the base component comprises:

when at least one state parameter in the plurality of state parameters is indicated as an input state, defining the state parameter indication of the basic component as the input state;

when the plurality of state parameters are all indicated as the pass state, the state parameters of the basic component are defined to be indicated as the pass state.

4. The method of claim 1, wherein the state parameters are further used for predicting internal logic of the base component, and wherein after the defining the corresponding state parameters of the base component, the method further comprises:

determining an internal logic main line corresponding to the basic component based on the state parameter of the basic component;

and generating script codes according to the internal logic main line.

5. A Web end modularization development method is characterized by comprising the following steps:

recording a real-time status of the first component;

6. The method of claim 5, wherein after initializing the first one of the base components, the method further comprises:

and acquiring the interaction data in the interaction process of the first component.

7. The method of claim 5, wherein after notifying, by the status service module, the listening component, the method further comprises:

controlling the listening component to enter a ready state;

controlling the monitoring component to acquire the interactive data through the data hosting module;

and controlling the monitoring component to enter a finished state.

8. The method of claim 5, wherein after the controlling the second component obtains the interaction data from the data hosting module, the method further comprises:

and controlling the second assembly to replace the first assembly, and simultaneously switching the display interface of the first assembly to the display interface of the second assembly.

9. The method of claim 5, wherein when the first component is a composite component, the first component includes a plurality of sub-components, and wherein recording the real-time status of the first component comprises:

recording a plurality of real-time statuses of the plurality of subcomponents;

when at least one real-time state in the plurality of real-time states is an input state, determining that the real-time state of the first component is the input state;

and when the plurality of real-time states are all the passing states, determining that the real-time state of the first assembly is the passing state.

10. A development system, characterized in that the development system comprises: a configuration unit, a definition unit, a setup unit, a deployment unit,

11. A development system, characterized in that the development system comprises: an initialization unit, a recording unit, a storage unit, a notification unit, and an acquisition unit,

12. A development system comprising a processor, a memory storing instructions executable by the processor, the instructions when executed by the processor implementing the method of any one of claims 1-9.

13. A computer-readable storage medium, on which a program is stored, for use in a development system, wherein the program, when executed by a processor, implements the method of any one of claims 1-9.