WO2017050145A1

WO2017050145A1 - Method and device for executing web app under complete state mode

Info

Publication number: WO2017050145A1
Application number: PCT/CN2016/098813
Authority: WO
Inventors: 熊亮
Original assignee: 阿里巴巴集团控股有限公司; 熊亮
Priority date: 2015-09-21
Filing date: 2016-09-13
Publication date: 2017-03-30
Also published as: CN106547525A

Abstract

Provided are a method for executing a web app under a complete state mode, a device for executing a web app under a complete state mode and an APP under a complete state mode, which relate to the technical field of computers. The method comprises: pre-dividing a web app into various states according to attributes which determine the behaviour change of the web app, and setting corresponding state classes for the various states, wherein each of the state classes comprises a related behaviour of a corresponding state and a state transition logic for state class jumping; and when a web app object executes a certain state class, in the state of the state class, executing the related behaviour of the state, and according to the state transition logic of the state class, the web app object jumping from the current executed state class to another state class corresponding to the state transition logic for execution. In the present application, a web app can run under a complete state mode, conditional judgement blocks in codes of the web app are small, and are dispersed into specific state classes, and therefore the coupling is low.

Description

Method and device for executing web application of full state mode

Technical field

The present application relates to the field of computer technology, and in particular, to a method for executing a full state mode web app and a device for executing a full state mode web app.

Background technique

A web app is an application that is accessed through a network (such as the Internet or an intranet); it can also mean that the computer software is hosted in a browser-supported environment or uses a browser-supported language (such as JavaScript, scripts) and relies on a web browser. Rendered application. The popularity of web apps is due to the popularity of web browsers and the user experience of using this thin and light client. Updates and maintenance can be implemented without having to download and install. It has the intrinsic properties of supporting cross-platform, which is the key reason why web apps are popular. Typical web app products include web mailboxes, web stores, wikis, and more. To implement the web app, the following key conditions must be met:

(1) User interaction. The web app must provide an interface for the user to display data and user operations.

(2) Data interaction. The web app must be able to interact with web services via the Internet using the http protocol, such as data downloads and uploads.

(3) Security guarantee. The web app must have the ability to identify the user's identity and permissions.

However, in the prior art, for the web app, the business logic of each stage is implemented together, and there are a large number of conditional statements, and the huge conditional statements are unpopular, they form a large whole piece and make the code insufficient. Clear, which in turn makes them difficult to modify and expand, and has high coupling. For example, in the prior art, the web app is edited and saved in a class, in which it is not necessary to first determine which part of the keyboard event and mouse event is enabled, and which part of the keyboard event and the mouse event are disabled, and save it. The behavior also needs to first determine which part of the keyboard event and mouse event is enabled, and which part of the keyboard event and mouse event are disabled. The editing behavior and the saving behavior are coupled to the judgment of the keyboard and mouse events, and the code amount is large.

Summary of the invention

In view of the above problems, embodiments of the present application have been made in order to provide a method for executing a full state mode web app and a corresponding device for executing a full state mode web app that overcomes the above problems or at least partially solves the above problems. .

In order to solve the above problem, the present application discloses a method for executing a full state mode web app, which includes:

The web app is divided into states according to the attributes that determine the behavior change of the web app, and corresponding state classes are set for each state; wherein each state class includes related behaviors of the corresponding states, and states for state class jumps. Conversion logic

When the web app object executes a state class, in the state of the state class, the related behavior of the state is executed, and according to the state transition logic of the state class, the web app object is jumped from the currently executed state class. Another state class corresponding to the state transition logic is executed.

In order to solve the above problem, the present application also discloses an apparatus for executing a full state mode web app, including:

a preset module, configured to divide the web app into states according to attributes that determine changes in web app behavior, and set corresponding state classes for each state; wherein each state class includes related behaviors of corresponding states, and is used for State transition logic for state class jumps;

a state execution module, configured to: when a web app object executes a state class, perform a related behavior of the state in a state of the state class, and execute a web app object from the current state according to state transition logic of the state class The state class jumps to execute another state class corresponding to the state transition logic.

In order to solve the above problem, the present application also discloses a full state mode web app, including:

a state execution module, configured to: when a web app object executes a state class, perform a related behavior of the state in a state of the state class, and execute a web app object from the current state according to state transition logic of the state class a state class that jumps to execute another state class corresponding to the state transition logic; wherein each state class is set according to a state of the web app, and the state of the web app is divided according to an attribute that determines a change in web app behavior Where each state class includes The relevant behavior of the corresponding state, as well as the state transition logic used for state class jumps.

Embodiments of the present application include the following advantages:

The embodiment of the present application divides the web app into states according to the attributes that determine the behavior change of the web app, and sets corresponding state classes for each state, each state class includes related behaviors of the corresponding states, and is used for state class jumps. The state transition logic, each state class is parallel and independent of each other. When the web app is executed, each state class of the web app object is executed independently, and does not intersect with other states. Therefore, the embodiment of the present application can run in a full state mode for the web app, and the conditional judgment block in the code is small, that is, the number of conditional judgment statements is small, dispersed into a specific state class, and the coupling is low.

For example, to edit and save the web app, set the edit state class and the save state class respectively. In the edit state class, directly enable the keyboard events and mouse events it needs, disable its unwanted keyboard events and mouse events, and then enter After saving the state class, enable the keyboard and mouse events it needs directly in the save state class, disable its unwanted keyboard events and mouse events. Since the two states are independent, the logic between the save state and the edit state of the web app for the keyboard event and the mouse event is decoupled, and there is no large conditional judgment statement, and the condition of the chunking is The judgment statement is branched into each state class.

DRAWINGS

1 is a flow chart showing the steps of a method embodiment of a web app executing a full state mode of the present application;

2 is a flow chart showing the steps of another method embodiment of a web app executing a full state mode of the present application;

2A is a diagram showing relationship between a state class and a base class and an environment class related to an implementation state class according to an embodiment of the present application;

2B is a diagram showing a conversion relationship of each state class in the embodiment of FIG. 2 in the embodiment of the present application;

3 is a flow chart showing the steps of another method embodiment of a web app executing a full state mode of the present application;

FIG. 3A is a diagram showing a conversion relationship of each state class in the embodiment of FIG. 3 according to an embodiment of the present application; FIG.

FIG. 3B is an example of a pop-up window of the embodiment of FIG. 3 according to an embodiment of the present application; FIG.

4 is a structural block diagram of an apparatus embodiment of a web app executing a full state mode of the present application;

5 is a structural block diagram of another apparatus embodiment of a web app executing a full state mode of the present application;

6 is a structural block diagram of another apparatus embodiment of a web app executing a full state mode of the present application;

7 is a structural block diagram of an embodiment of a full state mode web app of the present application.

detailed description

The above described objects, features and advantages of the present application will become more apparent and understood.

One of the core concepts of the embodiments of the present application is that, based on the state mode, the web app is divided into states according to attributes that determine the behavior change of the web app, and corresponding state classes are set for each state, and each state class includes a corresponding state. Related behavior, as well as state transition logic for state class jumps. When the web app is executed, each state class of the web app object is executed independently and does not intersect with other states. Therefore, the embodiment of the present application can run in the full state mode for the web app, and the condition judgment block in the code is small, dispersed into a specific state class, and the coupling is low. Moreover, the new state can be easily added without a large amount of modification of the original code, and the scalability is high.

The state mode is described as follows: In many cases, the behavior of an object depends on one or more dynamically changing attributes, the attribute is called a state, the object is called a stateful object, and the object state is Taken from a set of values defined in advance. When a stateful object performs an action in the state class, it interacts with an external event, and then according to the state transition logic in that state, the object's internal state changes to another state, and the object performs the corresponding other The state class, so that the behavior of the object changes.

Referring to FIG. 1 , a flow chart of steps of a method for performing a full-state mode web app of the present application is shown, which may specifically include the following steps:

Step 110, pre-determining the web app according to the attribute that determines the behavior change of the web app Each state, and setting a corresponding state class for each state; wherein each state class includes a related behavior of the corresponding state, and state transition logic for the state class jump;

The state refers to an attribute value of an attribute of a web app object instance, and the behavior refers to a function of a web object, and the behavior can be understood as a method. For example, the method function activateKeyboard() is the behavior of enabling keyboard events.

In the embodiment of the present application, for a web app, it may be divided into a plurality of state classes according to its logic, each state class includes related behaviors of the corresponding states, and state transition logic for state class jumps.

It should be noted that the state class is, for example, an initial state class, a load state class, an edit state class, and a save state class. Of course, in the actual application, the state class may be divided according to actual needs, and may include any class, which is not limited in the embodiment of the present application.

Each state transition logic triggers a jump of the state class according to a specific behavior in the corresponding state.

Step 120: When the web app object executes a certain state class, in the state of the state class, the related behavior of the state is executed, and according to the state transition logic of the state class, the web app object is from the currently executed state class. The jump is to execute another state class corresponding to the state transition logic.

In a practical application, after the web app is launched, a web app object can be created, which can be understood as an instance of the web app. Then set a start state class for the web app object, then the web app object can first execute the initial set state class, and then execute the state class related behavior, in the execution process, according to the state class State transition logic that jumps the web app object to execute another state class. Then, after the jump, the web app object executes the related behavior of the other state class, and jumps to execute the next state class according to the state transition logic of the state class during execution. Other cases and so on.

In an actual application, step 110 may be preset offline, and step 120 is performed in a browser.

The embodiment of the present application divides the web app into states according to the attributes that determine the behavior change of the web app, and sets corresponding state classes for each state, each state class includes related behaviors of the corresponding states, and is used for state class jumps. State transition logic, each state class The two are parallel and independent of each other. When the web app is executed, each state class of the web app object is executed independently and does not intersect with other states. Therefore, the embodiment of the present application can run in a full state mode for the web app, and the conditional judgment block in the code is small, that is, the number of conditional judgment statements is small, dispersed into a specific state class, and the coupling is low.

For example, to edit and save the web app, set the edit state class and the save state class respectively. In the edit state class, directly enable the keyboard events and mouse events it needs, disable its unwanted keyboard events and mouse events, and then enter the save. After the status class, enable the required keyboard events and mouse events, disable their unwanted keyboard events, and mouse events directly in the save state class. Since the two states are independent, the logic between the save state and the edit state of the web app for the keyboard event and the mouse event is decoupled, and there is no large conditional judgment statement, and the condition of the chunking is The judgment statement is branched into each state class.

On the basis of the embodiment of FIG. 1 , referring to FIG. 2 , the embodiment of the present application divides the state class into at least the following state classes: an initial state class, a load state class, an edit state class, and a save state class to perform the implementation of the present application. The process of the example.

Referring to FIG. 2, a flow chart of steps of a method for performing a full-state mode web app of the present application is shown. Specifically, the method may include the following steps:

Step 210: Pre-determine the web app into states according to the attributes that determine the behavior change of the web app, and set a corresponding state class for each state; the state class includes: an initial state class, a loading state class, an editing state class, and a save. a state class; wherein each state class includes a related behavior of the corresponding state, and state transition logic for the state class jump;

In the embodiment of the present application, for a web app, it may be divided into multiple state classes according to its logic, such as an initial state class, a load state class, an edit state class, a save state class, and each state class includes a corresponding state. Related behavior, as well as state transition logic for state class jumps.

Wherein each state transition logic triggers a state class according to a specific behavior in the corresponding state Jump.

For example, the related behavior of the initialization state class may include: allocating space for various variables of the web app, assigning initial values to various variables, initializing a mouse, a keyboard, a network, and other asynchronous processing events, initializing an interface, etc., the first state thereof The conversion logic can include jumping to the execution load state class after assigning an initial value to all variables.

The related behavior of the loading state class may include: loading various information, rendering a main interface of the web app, obtaining context data transmitted from the previous state, and the like, and the second state transition logic may include: a master in the web app After the interface is rendered, jump to the execution edit state class.

The related behaviors of the editing state class may include: enabling a keyboard event, enabling a mouse event, receiving an event of clicking a save button, obtaining context data transmitted from a previous state, closing a web app, and the like, and the third state thereof. The conversion logic may include jumping to the execution save state class after receiving a click event on the save button.

The related behavior of saving the state class may include: saving the content in the current web app to the storage area, canceling the save operation (eg, receiving the esc event), acquiring the context data transmitted from the previous state, and the fourth state transition. The logic may include jumping to the execution edit state class after the save is completed or after receiving the cancel save operation.

In practical applications, the embodiment of the present application can be set as shown in FIG. 2A:

Context: An interface that defines business logic, such as Request() in Figure 2A. Maintain an instance of a state class that generates a web app object.

State: Defines an interface such as Handle() in Figure 2A to encapsulate the behavior associated with a state class of the Context.

Various state classes (ConcreteState), such as ConcreteStateA, ConcreteStateB, etc., each state class inherits the above base class, that is, each state class is a subclass of the base class, and each state class implements a state with the Context. Related behavior. The state class includes an initial state class, a load state class, an edit state class, and a save state class.

Step 220: Set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and jump the web app object to execution according to the first state transition logic. Load state class;

In the embodiment of the present application, after the browser obtains the webpage document from the server side, such as a htlm (Hyper Text Markup Language) document, and executes the document, the generated web app object executes the initial state class. At this time, the properties of the web app are in the initial state.

In the web app object of the initial state, the related behaviors of various initial states encapsulated in the initial state class are executed, such as allocating space for various variables of the web app, assigning initial values to various variables, and the like. And after executing a specific behavior, jump to the execution load state class, as described above, after assigning an initial value to all variables, jump to the execution load state class.

2B, the state transition process of the embodiment of the present application is introduced.

Then, the properties of the web app object are changed to the loaded state.

Step 230: Perform a related behavior of the loading state in the web app object in the loading state, and jump the web app object to the execution editing state class according to the second state transition logic;

After the property of the web app is changed to the loaded state, the related behavior of the loaded state encapsulated in the loaded state class is executed. Load various information as described above, render the main interface of the web app, and so on. And after executing a specific behavior, jump to the execution edit state class, as described above, after the main interface of the web app is rendered, jump to the execution edit state class.

Then, the properties of the web app object are changed to the edit state.

Step 240, in the edit state of the web app object, perform the relevant behavior of the edit state, and jump the web app object to the execution save state class according to the third state transition logic;

After the property of the web app object is changed to the edit state, the related behavior of the edit state encapsulated in the load state class is executed. Such as the aforementioned enable keyboard events, enable mouse events, receive events that click the save button, web application shutdown and other business logic. And after executing a specific behavior, jump to the execution save state class, for example, after receiving the click event on the save button, jump to the execution save state class.

Then, the properties of the web app object are changed to the save state.

It can be understood that, in the embodiment of the present application, the editing status class can encapsulate various interactions with the outside world, and the behavior can be encapsulated according to actual needs, which is not limited in this application.

Step 250: Perform a related behavior of saving the state in the web app object in the saved state, and jump the web app object to the execution editing state class according to the fourth state transition logic.

After the property of the web app is changed to the save state, the related behavior of saving the state of the package encapsulated in the state class is executed. Save the contents of the current web app to the storage area as described above, cancel the save operation (eg, receive the esc event), and so on. And after executing a specific behavior, jump to the execution save state class, such as after the save is completed or after receiving the cancel save operation, jump to the execution edit state class.

In the state class mode, when the state of the web app is adjusted to another state, the information of the previous state is cleared, so that the latter state does not intersect with the previous state, and there is no coupling.

In an actual application, step 210 can be preset offline, while steps 220-250 are performed in the browser.

In the embodiment of the present application, the web app is divided into states according to attributes that determine the behavior change of the web app, and corresponding state classes are set for each state, that is, an initialization state class, a load state class, an edit state class, and a save state class. The state class includes the related behavior of the corresponding state, and the state transition logic for the state class jump. Each state class is parallel and independent of each other. When the web app is executed, each state class of the web app object is independent. Execution does not intersect with other states. Therefore, the embodiment of the present application can run in the full state mode for the web app, and the condition judgment block in the code is small, dispersed into a specific state class, and the coupling is low.

Based on the embodiment shown in FIG. 2, the present application also provides a preferred embodiment:

Referring to FIG. 3, a flow chart of steps of a method for performing a full-state mode web app of the present application is shown. Specifically, the method may include the following steps:

Step 310: pre-determine the web app into states according to the attributes that determine the behavior change of the web app, and set a corresponding state class for each state; the state class includes: an initial state class, a loading state class, an editing state class, and a save. a state class, at least one pop-up window state class; wherein each state class includes a related behavior of the corresponding state, and state transition logic for the state class jump;

Under normal circumstances, all external interactions or business logic are encapsulated in the editor. In the state class, but in fact, these behaviors are likely to have parallelism on the whole level. The so-called parallelism means that the behaviors of each state are at the same level, independent and unrelated. It is possible to decide which one of the parallel lines to go according to different states. Then, in the embodiment of the present application, the behavior of interacting with the outside can be split into multiple state classes according to the parallelism between the behaviors, for example, the behavior of interacting with the outside in the web app main page itself is retained in the editing state class. In the window popping up from the main page of the web app, a pop-up window state class is set separately from the behavior of the external interaction, and is executed independently of the edit state class.

Since there may be multiple windows popping up from the main page of the web app, the present application can separately set a pop-up window state class for each pop-up window.

Correspondingly, in the edit state class, for each popup window state class, a corresponding fifth state transition logic is set, and after receiving the corresponding operation in the main page, the web app object is jumped to execute the corresponding Popup window status class.

In a preferred embodiment of the embodiment of the present application, the embodiment of the present application further includes:

Step 302: Add a sticky attribute to the edit state class, and the sitcky attribute is used to edit the interface state corresponding to the edit state when the edit state class of the web app object is jumped to execute other state classes.

In practical applications, because the previous state is cleared after one state transitions to another state, if the edit state is cleared after the edit state transitions to the popup state, the main page does not exist. It may mislead the user that the web app has a problem and affect the visibility of the interface. It is not convenient for the user to view information other than the pop-up portion of the main page. Then the application adds a sticky attribute, which ensures that the editing state jumps to other state classes, and the UI interface of the main interface is still displayed.

It should be noted that the stickey attribute is implemented through the interface of the base class. If a state class has the value of the sticky attribute set to 1, the status class is not cleaned, and the interface element corresponding to the edit state is retained, such as a reserved map. 3B web app's pop-up window "new bucket" after the web app main page. In the embodiment of the present application, the sticky attribute is set to 1 when the editing state class is executed, and other state classes can set the value to null.

Of course, in the embodiment of the present application, the foregoing environment class (Context), base class (State), and each state class (ConcreteState) inheritance base class are also defined.

The base class is as follows:

Of course, in the embodiment of the present application, other state classes, such as a preview status bar, may be set according to the actual business logic, which is not limited in the embodiment of the present application.

Step 320: Set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and jump the web app object to execute according to the first state transition logic. Load state class;

The embodiment of the present application is described in conjunction with FIG. 3A.

This step is similar to step 220 of the embodiment of FIG. 2 and will not be described here.

Step 330: Perform a related behavior of the loading state in the web app object in the loading state, and jump the web app object to the execution editing state class according to the second state transition logic;

This step is similar to step 330 of the embodiment of FIG. 2 and will not be described here.

Step 340, in the edit state of the web app object, perform the relevant behavior of the edit state, and jump the web app object to execute the corresponding pop-up window state according to each fifth state transition logic, and the web app according to the third state transition logic The object jumps to the execution save state class;

As in the previous example, there are two pop-up window states after the edit state, namely windowPopup1State and windowPopup1State.

For windowPopup1State, as shown in FIG. 3B, if it corresponds to the bucket management column, the fifth state transition logic may be: when receiving the user's click operation on the bucket management bar, a new bucket window pops up, and the property of the web app object becomes a popup window. The state windowPopup1State. If it is corresponding to the resource monitoring report column, the fifth state transition logic may be: when the user clicks on the resource monitoring report column, the property of the web app object of the resource monitoring report window is changed to the popup window state windowPopup1State.

Of course, in the case that the sticky attribute is added to the edit status class, the step 340 further includes:

After the state of the web app object jumps to other states, the interface element corresponding to the edit state class is retained.

This interface element can be understood as the main page of the web app.

In step 342, in the edit state class, it is determined whether the web app object is jumped from the edit state class to the popup window state class; if it is jumped to the popup window state, the interface element corresponding to the edit state is retained.

In the embodiment of the present application, when jumping to other states in the editing state class, the object of the jump may also be determined. If the object to be jumped is not the state of the popup window, the editing state is cleared. For example, if the object to be jumped is saved, the sticky is set to null, and then the state of the web app is changed to the saved state, and the edit state is cleared.

If the jumped object is in the popup state, the interface element corresponding to the edit state is retained. For example, if the object of the jump is saved, the sticky is set to 1, and then the state of the web app is changed to the saved state, the edit state will not be completely cleaned, and the main page of the web app will be retained.

Step 350, in the pop-up window state class, performs a related behavior of the pop-up window state class, and jumps the web app object to the execution edit state class according to the seventh state transition logic.

After the property of the web app object is changed to the state of the popup window, the related behavior of the popup window state encapsulated in the popup window state class is executed. As in the windowPopup1State extends State of FIG. 3B, the mask is covered by the mask, and the user is not allowed. The act of performing an action that allows the user to perform actions such as inputting, submitting, canceling, and the like.

Of course, in the pop-up window state class, a seventh state transition logic is also provided for jumping the state of the web app object from the pop-up window state to the edit state to perform various operations of the edit state class. As shown in FIG. 3B, the popup window state windowPopup1State extends State, the seventh logic may be that when a click operation on the submit button is received or a click operation on the cancel button is received, the web app object is jumped to the execution edit state class. .

Step 360: Perform a related behavior of saving the state in the web app object in the saved state, and jump the web app object to the execution editing state class according to the fourth state transition logic.

This step is similar to step 250 of the embodiment of FIG. 2 and will not be described here.

In a practical application, step 310 can be preset offline without being executed in the browser at 320-360.

The embodiment of the present application divides the web app into states according to the attributes that determine the behavior change of the web app, and sets corresponding state classes for each state, each state class includes related behaviors of the corresponding states, and is used for state class jumps. The state transition logic, each state class is parallel and independent of each other. When the web app is executed, each state class of the web app object is executed independently, and does not intersect with other states. Therefore, the embodiment of the present application can run in the full state mode for the web app, and the condition judgment block in the code is small, dispersed into a specific state class, and the coupling is low. For example, for the editing and saving of the web app, set the editing state class and the saving state class respectively, and directly enable the keyboard events and rats needed in the editing state class. Mark events, disable their unwanted keyboard events and mouse events, and then enter the save state class, enable their required keyboard and mouse events directly in the save state class, disable their unwanted keyboard events and mouse events. Since the two states are independent, the logic between the save state and the edit state of the web app for the keyboard event and the mouse event is decoupled, and there is no large conditional judgment statement, and the condition of the chunking is The judgment statement is branched into each state class.

In particular, the embodiment of the present application separates the pop-up window state from the edit state, and further decouples the web app. The following is a code example to discuss the principle that the extracted pop-up window state can be further decoupled:

1. The pseudo code that puts the behavior of each popup in an edit state class is as follows:

Under normal circumstances, the pop-up window and other business logic are placed together in the edit state, the mask will be used to cover the content area at the bottom, and the user is not allowed to operate (as described in 2 of Figure 3B), but the user can actually pass The tab navigation shortcuts operate, and the web app cannot distinguish whether the operation is legal. And as in the example above, there are two pop-up windows, and both windows have to disable certain keyboard and mouse events, and then enable some keyboard and mouse events, and there is a coupling between the two and the external code. In particular, the window needs to be processed asynchronously, so there will be a lot of asynchronous processing code in the code, which increases the code coupling and increases the development difficulty.

In the embodiment of the present application, corresponding to the pseudo code, each pop-up window is independently a pop-up window state class, and the pseudo-codes of the edit state class, the pop-up window state class 1 and the pop-up window state class 2 are as follows:

In the edit state class of (1), in the method of processing the popup window windowPopup1, only the state of the wep app object is switched to the popup window state 1 of (2); in the method of processing the popup window windowPopup2, only The state of the wep app object switches to the popup of (3) Window state 2. In the edit state, the specific behavior of the popup window is not executed.

Due to the various states, it is easy to shield the user from the operation of the bottom content area. Moreover, the logic between the pop-up window state class (2) and the pop-up window state class (3) and the edit state class (1) is decoupled, and the code for the mouse and keyboard events is also decoupled, which greatly reduces the development difficulty. .

It should be noted that, for the method embodiments, for the sake of simple description, they are all expressed as a series of action combinations, but those skilled in the art should understand that the embodiments of the present application are not limited by the described action sequence, because In accordance with embodiments of the present application, certain steps may be performed in other sequences or concurrently. In the following, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required in the embodiments of the present application.

Referring to FIG. 4, a structural block diagram of an apparatus embodiment of a web app executing a full state mode of the present application is shown, which may specifically include the following modules:

The preset module 410 is configured to divide the web app into states according to the attributes that determine the behavior change of the web app, and set corresponding state classes for each state; wherein each state class includes related behaviors of the corresponding states, and State transition logic for state class jumps;

The state execution module 420 is adapted to perform a related behavior of the state in a state of the state class when the web app object executes a certain state class, and according to the state transition logic of the state class, the web app object is from the current state The executed state class jumps to execute another state class corresponding to the state transition logic.

Referring to FIG. 5, there is shown a device for executing a full state mode web app of the present application. The structural block diagram of the embodiment may specifically include the following modules:

The preset module 510 is configured to divide the web app into states according to the attributes that determine the behavior change of the web app, and set a corresponding state class for each state; the state class includes: an initial state class, a loading state class, and an editing State class, save state class; wherein each state class includes related behaviors of the corresponding state, and state transition logic for state class jumps;

The state execution module 520 specifically includes:

An initialization state module 521, configured to set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and convert the web app object according to the first state transition logic Jump to execute the load state class;

The loading status module 522 is configured to execute a related behavior of the loading state in the web app object in the loading state, and jump the web app object to the execution editing state class according to the second state transition logic;

The editing state module 523 is configured to execute a related behavior of the editing state in the web app object in the editing state, and jump the web app object to the execution saving state class according to the third state transition logic;

The save state module 524 is configured to execute a related behavior of saving the state in the web app object in the saved state, and jump the web app object to execute the edit state class according to the fourth state transition logic.

Referring to FIG. 6, there is shown another apparatus for executing a full state mode web app of the present application. The structural block diagram of the embodiment may specifically include the following modules:

The preset module 610 is configured to divide the web app into states according to the attributes that determine the behavior change of the web app, and set a corresponding state class for each state; the state class includes: an initial state class, a loading state class, and an editing a state class, a save state class, and at least one popup window state class; wherein each state class includes a related behavior of the corresponding state, and state transition logic for the state class jump;

In another preferred embodiment of the present application, the preset module 410 is further configured to: add a sticky attribute to the edit state class, where the sitcky attribute is used to edit the state of the web app object to perform other state classes. When you save the interface element corresponding to the editing state.

The state transition logic triggers a jump of the state class according to one or more specific behaviors in the corresponding state.

The status execution module 620 specifically includes:

An initialization state module 621, configured to set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and convert the web app object according to the first state transition logic Jump to execute the load state class;

The loading status module 622 is configured to execute a related behavior of the loading state in the web app object in the loading state, and jump the web app object to perform a corresponding pop-up window state according to each fifth state transition logic, and convert according to the second state Logic jumps the web app object to execute the edit state class;

The editing status module 623 is configured to execute a related behavior of the editing state in the web app object in the editing state, and jump the web app object to the execution saving state class according to the third state transition logic;

In another preferred embodiment of the present application, the edit status module 440 is further configured to:

Determining whether the web app object is jumped from the edit state class to the popup window state class; if it is jumping to the popup window state, the interface element corresponding to the edit state is retained;

If not, clean up the edit state class.

a pop-up window status module 624, configured to execute a related behavior of the pop-up window state class in the pop-up window state class, and jump the web app object to execute the edit state according to the seventh state transition logic State class.

The save state module 625 is configured to execute a related behavior of saving the state in the web app object in the saved state, and jump the web app object to execute the edit state class according to the fourth state transition logic.

The embodiment of the present application divides the web app into states according to the attributes that determine the behavior change of the web app, and sets corresponding state classes for each state, each state class includes related behaviors of the corresponding states, and is used for state class jumps. The state transition logic, each state class is parallel and independent of each other. When the web app is executed, each state class of the web app object is executed independently, and does not intersect with other states. Therefore, the embodiment of the present application can run in the full state mode for the web app, and the condition judgment block in the code is small, dispersed into a specific state class, and the coupling is low.

In particular, the embodiment of the present application separates the state of each pop-up window from the editing state, further decouples the web app, and can easily shield the user from operating on the bottom content area in the pop-up window state, thereby greatly reducing development. Difficulty.

Referring to FIG. 7, a structural block diagram of an embodiment of a full state mode web app of the present application is shown, which may specifically include the following modules:

The state execution module 710 is adapted to perform a related behavior of the state in a state of the state class when the web app object executes a certain state class, and according to the state transition logic of the state class, the web app object is from the current state Executing a state class, jumping to perform another state class corresponding to the state transition logic; wherein each state class is set according to a state of the web app, and the state of the web app is performed according to an attribute determining a behavior change of the web app Division; where each state class includes the associated behavior of the corresponding state, and state transition logic for state class jumps.

Of course, in the embodiment of the present invention, the web app may be divided into states according to attributes that determine the behavior change of the web app, and corresponding state classes are set for each state, where each state class includes related behaviors of the corresponding states. And state transition logic for state class jumps so that you can build a web app. The state execution module 710 can then be obtained.

Of course, in the state execution module 710, a web app object creation module may also be included for Create a web app object when you move the web app.

A start state assignment module can also be included for assigning a web application object to the initial state class.

In another preferred embodiment of the present application, the state class includes: an initial state class, a load state class, an edit state class, and a save state class;

The state execution module 710 includes:

An initialization state module, configured to set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and jump the web app object according to the first state transition logic Go to the execution load state class;

a loading state module, configured to execute a related behavior of the loading state in the web app object in the loading state, and jump the web app object to an execution editing state class according to the second state transition logic;

Editing a state module, configured to perform an edit state related behavior in a web app object in an edit state, and jump the web app object to an execution save state class according to the third state transition logic;

The save state module is configured to execute a related behavior of saving the state in the web app object in the saved state, and jump the web app object to execute the edit state class according to the fourth state transition logic.

In another preferred embodiment of the present application, the status class further includes: at least one popup window status class;

The edit status module is further configured to:

The web app object is jumped to execute the corresponding popup state according to each fifth state transition logic.

In another preferred embodiment of the present application, the method further includes:

A pop-up window status module is configured to execute a related behavior of the pop-up window state class in the pop-up window state class, and jump the web app object to an execution edit state class according to the seventh state transition logic.

In another preferred embodiment of the present application, the edit state class further includes a sticky attribute, and the sitcky attribute is used to edit the edit state class of the web app object to retain the edit state when executing other state classes. Interface elements.

In another preferred embodiment of the present application, the edit status module is further configured to:

If not, clean up the edit state class.

For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.

The various embodiments in the present specification are described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same similar parts between the various embodiments can be referred to each other.

Those skilled in the art will appreciate that embodiments of the embodiments of the present application can be provided as a method, apparatus, or computer program product. Therefore, the embodiments of the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Moreover, embodiments of the present application may employ computer usable storage media in one or more of the computer usable program code embodied therein. A form of computer program product implemented on a quality (including but not limited to disk storage, CD-ROM, optical storage, etc.).

In a typical configuration, the computer device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory. The memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory. Memory is an example of a computer readable medium. Computer readable media includes both permanent and non-persistent, removable and non-removable media. Information storage can be implemented by any method or technology. The information can be computer readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-persistent computer readable media, such as modulated data signals and carrier waves.

Embodiments of the present application are described with reference to flowcharts and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the present application. It will be understood that each flow and/or block of the flowchart illustrations and/or FIG. These computer program instructions can be provided to a processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing terminal device to produce a machine such that instructions are executed by a processor of a computer or other programmable data processing terminal device Means are provided for implementing the functions specified in one or more of the flow or in one or more blocks of the flow chart.

The computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device. Instruction device implemented in a flowchart A function specified in a block or blocks of a process or multiple processes and/or block diagrams.

These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device such that a series of operational steps are performed on the computer or other programmable terminal device to produce computer-implemented processing, such that the computer or other programmable terminal device The instructions executed above provide steps for implementing the functions specified in one or more blocks of the flowchart or in a block or blocks of the flowchart.

While a preferred embodiment of the embodiments of the present application has been described, those skilled in the art can make further changes and modifications to the embodiments once they are aware of the basic inventive concept. Therefore, the appended claims are intended to be interpreted as including all the modifications and the modifications

Finally, it should also be noted that in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply these entities. There is any such actual relationship or order between operations. Furthermore, the terms "comprises" or "comprising" or "comprising" or any other variations are intended to encompass a non-exclusive inclusion, such that a process, method, article, or terminal device that includes a plurality of elements includes not only those elements but also Other elements that are included, or include elements inherent to such a process, method, article, or terminal device. An element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or terminal device that comprises the element, without further limitation.

The method for executing the full-state mode web app provided by the present application, the device for executing the full state mode web app, and the full state mode APP are described in detail. In this paper, the specific examples are applied to the principle of the present application. The embodiments are described, and the description of the above embodiments is only for helping to understand the method of the present application and its core ideas; at the same time, for those skilled in the art, according to the idea of the present application, in the specific embodiments and application scopes In the above, the contents of this specification should not be construed as limiting the present application.

Claims

A method for executing a full state mode web app, comprising:

The web app is divided into states according to the attributes that determine the behavior change of the web app, and corresponding state classes are set for each state; wherein each state class includes related behaviors of the corresponding states, and states for state class jumps. Conversion logic

When the web app object executes a state class, in the state of the state class, the related behavior of the state is executed, and according to the state transition logic of the state class, the web app object is jumped from the currently executed state class. Another state class corresponding to the state transition logic is executed.
The method according to claim 1, wherein the state class comprises: an initial state class, a load state class, an edit state class, and a save state class;

When the web app object executes a certain state class, in the state of the state class, the related behavior of the state is executed, and according to the state transition logic of the state class, the web app object is from the currently executed state class, The step of jumping to another state class corresponding to the state transition logic includes:

Setting the web app object to an initialization state according to the initial state class, performing an initialization state related behavior in a web app object in an initialization state, and jumping the web app object to an execution loading state class according to the first state transition logic ;

In the loaded state web app object, performing a related behavior of the loading state, and jumping the web app object to an execution editing state class according to the second state transition logic;

In the edited state web app object, executing the relevant behavior of the edit state, and jumping the web app object to the execution save state class according to the third state transition logic;

In the saved web app object, the related behavior of saving the state is executed, and the web app object is jumped to the execution editing state class according to the fourth state transition logic.
The method of claim 2 wherein:

The state class further includes: at least one popup window state class;

In the edit state of the web app object, it also includes:

The web app object is jumped to execute the corresponding popup state according to each fifth state transition logic.
The method of claim 3, further comprising:

In the pop-up window state class, the related behavior of the pop-up window state class is executed, and the web app object is jumped to the execution edit state class according to the seventh state transition logic.
The method according to claim 3 or 4, further comprising:

The sticky attribute is added to the edit state class, and the sitcky attribute is used to edit the edit state of the web app object to retain the interface element corresponding to the edit state when executing other state classes.
The method according to claim 4, wherein in the editing state, the method further comprises:

Determining whether the web app object is jumped from the edit state class to the popup window state class; if it is jumping to the popup window state, the interface element corresponding to the edit state is retained;

If not, clean up the edit state class.
The method of claim 1 wherein each of said state transition logic triggers a jump of a state class based on one or more specific behaviors in respective states.
An apparatus for executing a full state mode web app, comprising:

a preset module, configured to divide the web app into states according to attributes that determine changes in web app behavior, and set corresponding state classes for each state; wherein each state class includes related behaviors of corresponding states, and is used for State transition logic for state class jumps;

a state execution module, configured to: when a web app object executes a state class, perform a related behavior of the state in a state of the state class, and execute a web app object from the current state according to state transition logic of the state class The state class jumps to execute another state class corresponding to the state transition logic.
The apparatus according to claim 8, wherein the state class comprises: an initial state class, a load state class, an edit state class, and a save state class;

The state execution module includes:

An initialization state module, configured to set the web app object to an initialization state according to the initial state class, perform an initialization state related behavior in a web app object in an initialization state, and jump the web app object according to the first state transition logic Go to the execution load state class;

a loading state module, configured to execute a related behavior of the loading state in the web app object in the loading state, and jump the web app object to an execution editing state class according to the second state transition logic;

Editing a state module, configured to perform an edit state related behavior in a web app object in an edit state, and jump the web app object to an execution save state class according to the third state transition logic;

The save state module is configured to execute a related behavior of saving the state in the web app object in the saved state, and jump the web app object to execute the edit state class according to the fourth state transition logic.
The device of claim 8 wherein:

The state class further includes: at least one popup window state class;

The edit status module is further configured to:

The web app object is jumped to execute the corresponding popup state according to each fifth state transition logic.
The apparatus according to claim 10, wherein the state execution module further comprises:

A pop-up window status module is configured to execute a related behavior of the pop-up window state class in the pop-up window state class, and jump the web app object to an execution edit state class according to the seventh state transition logic.
The device according to claim 10 or 11, wherein the preset module is further configured to:

The sticky attribute is added to the edit state class, and the sitcky attribute is used to edit the edit state of the web app object to retain the interface element corresponding to the edit state when executing other state classes.
The apparatus according to claim 11, wherein the editing status module is further configured to:

Determining whether the web app object is jumped from the edit state class to the popup window state class; if it is jumping to the popup window state, the interface element corresponding to the edit state is retained;

If not, clean up the edit state class.
The apparatus of claim 8 wherein each of said state transition logic triggers a jump of a state class based on one or more specific behaviors in respective states.
A full state mode web app, comprising:

a state execution module, configured to: when a web app object executes a state class, perform a related behavior of the state in a state of the state class, and execute a web app object from the current state according to state transition logic of the state class State class, jumps to execute corresponding to the state transition logic Another state class; wherein the respective state classes are set according to a state of the web app, and the state of the web app is divided according to an attribute that determines a behavior change of the web app; wherein each state class includes a related behavior of the corresponding state, and State transition logic for state class jumps.