CN106484459B

CN106484459B - Flow control method and device applied to JavaScript

Info

Publication number: CN106484459B
Application number: CN201610819490.7A
Authority: CN
Inventors: 史荣琦; 邢斐; 董京涛; 李明杰; 顾思斌; 潘柏宇; 谢菲
Original assignee: Unified Intelligent Technology (shenzhen) Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2016-09-12
Filing date: 2016-09-12
Publication date: 2019-12-31
Anticipated expiration: 2036-09-12
Also published as: CN106484459A

Abstract

The disclosure provides a flow control method and device applied to JavaScript. The method comprises the following steps: initiating an AJAX request, acquiring data and endowing one or more global variables, wherein the one or more global variables are set according to a triggering event of at least one service; and monitoring a global variable set according to the trigger event of the service aiming at each service in the at least one service, and triggering the execution of the service when the global variable set according to the trigger event of the service changes. By applying the method and the device, the event indirect trigger service can be realized, the simplification and decoupling of the JavaScript flow control are facilitated, the polling times are reduced under the condition that polling exists, and the burden of a memory is lightened.

Description

Flow control method and device applied to JavaScript

Technical Field

The present disclosure relates to the field of internet, and in particular, to a flow control method and a flow control device applied to JavaScript.

Background

Currently, in JavaScript (JS for short), an event-based trigger mechanism, that is, an event triggers a service, and the service responds to the event and may execute service logic by using a callback function. One service may respond to multiple events, and one event may trigger multiple services, so that in the case of multiple services responding to multiple events, the control logic thereof tends to be very complex. In addition, the execution of some services may also cause the change of the state of some events, and further trigger other services, resulting in mutual coupling and control between services, further aggravating the complexity of flow control. These factors may cause the flow control finally implemented in JS to be very complex and chaotic, making it difficult to implement, very error-prone, and poor legibility and maintainability of the code, and difficult to debug after an error occurs. In addition, the coupled and intricate process controls involve the whole body, making it difficult for the technician to adjust and upgrade the implemented process controls.

Disclosure of Invention

In view of the above, the technical problem to be solved by the present disclosure is to implement flow control in javscript, which is clear in logic, and easier to implement and maintain.

In order to solve the above technical problem, according to an aspect of the present disclosure, there is provided a flow control method applied to JavaScript, the method including: initiating an AJAX request, acquiring data and endowing one or more global variables, wherein the one or more global variables are set according to a triggering event of at least one service; and monitoring a global variable set according to the trigger event of the service aiming at each service in the at least one service, and triggering the execution of the service when the global variable set according to the trigger event of the service changes.

According to another aspect of the present disclosure, there is also provided a flow control apparatus applied to JavaScript, the apparatus including: the system comprises a global variable assignment unit, a data processing unit and a data processing unit, wherein the global variable assignment unit is configured to initiate an AJAX request, acquire data and assign one or more global variables, and the one or more global variables are set according to a trigger event of at least one service; and the monitoring triggering unit is configured to monitor a global variable set according to the triggering event of the service for each service in the at least one service, and trigger the execution of the service when the global variable set according to the triggering event of the service changes.

In various aspects of the disclosure, a global variable is set as an interval between an event and a service, the service only needs to monitor whether the global variable changes without concerning the event itself, a traditional JS event-based trigger mechanism is changed, the event direct trigger service is changed into the event indirect trigger service, and the flow control can be simplified and decoupled. Moreover, events only change global variables without concern about which services are triggered by changes of the global variables, and the efficiency of data carrying can be improved. According to the flow control applied to the JS, the control logic is clear and easy to read, and the realization and the maintenance are convenient.

Other features and aspects of the present disclosure will become apparent from the following detailed description of exemplary embodiments, which proceeds with reference to the accompanying drawings.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments, features, and aspects of the disclosure and, together with the description, serve to explain the principles of the disclosure.

Fig. 1 shows a flowchart of a flow control method applied to JavaScript according to one embodiment of the present disclosure.

Fig. 2 shows a block diagram of a flow control device applied to JavaScript according to an embodiment of the present disclosure.

Fig. 3 shows a block diagram of a flow control device applied to JavaScript according to another embodiment of the present disclosure.

Fig. 4 shows a flow control diagram of a conventional JS page load.

Fig. 5 shows a schematic flow control diagram of traffic coupled to each other in a conventional JS page load.

FIG. 6 illustrates a flow control diagram for a JS page load in accordance with the present disclosure.

FIG. 7 shows a schematic diagram of a non-core module loading a play page according to the present disclosure.

Fig. 8 shows a flow control diagram of an AJAX polling-based barrage service according to the present disclosure.

Fig. 9 shows a schematic flow control diagram of multi-service based on AJAX polling in conventional JS.

Fig. 10 shows a flow control diagram for AJAX polling based multi-traffic according to the present disclosure.

Detailed Description

Various exemplary embodiments, features and aspects of the present disclosure will be described in detail below with reference to the accompanying drawings. In the drawings, like reference numbers can indicate functionally identical or similar elements. While the various aspects of the embodiments are presented in drawings, the drawings are not necessarily drawn to scale unless specifically indicated.

The word "exemplary" is used exclusively herein to mean "serving as an example, embodiment, or illustration. Any embodiment described herein as "exemplary" is not necessarily to be construed as preferred or advantageous over other embodiments.

Furthermore, in the following detailed description, numerous specific details are set forth in order to provide a better understanding of the present disclosure. It will be understood by those skilled in the art that the present disclosure may be practiced without some of these specific details. In some instances, methods, means, elements and circuits that are well known to those skilled in the art have not been described in detail so as not to obscure the present disclosure.

Here, the basic principle of the present disclosure will be briefly described.

Assuming that there are 3 elements A, B, C in the window, all appearing white, the current requirement is: when the window becomes larger and larger than 200px, it is required that a becomes red, B becomes green, and C becomes purple; when the window width is less than 200px, A, B, C are required to appear white. According to a conventional event-based trigger mechanism, pseudo code for implementing the above requirements is as follows:

at present, JS is basically realized through the method. In some cases, it is also conceivable to knead AitemChange, bitemcchange, CitemChange in one function if certain conditions are met.

At this time if a new demand is made: if the D element is required to be discolorable according to the change of the window size, a function DitemChange may be added with reference to the implementation of discoloring the A, B, C element.

However, if the newly added requirements become more and more complicated and more? objects become more and more complex, the windowChange function becomes more and more huge, and technicians maintaining and managing the windowChange function find that the function includes a plurality of events and a plurality of service logics, the function needs to go deep into each event and each service logic in the maintenance process, the response relationship between the events and the services needs to be determined one by one, the workload and the working difficulty are high, errors are easy to occur, and debugging is difficult after the errors occur.

Even further, a need arises for: the element E is required to change orange when the window is larger than 700px, and also change color after 5 seconds after the element a changes color, according to the above solution mode, not only the windowChange function but also the AitemChange is considered, so that the control of the element E needs to be written into two functions, which makes the control logic more complex.

The inventors have found that the essence of an event-based triggering mechanism is that events change certain states, and services (typically in the form of callback functions) are executed in response to these state changes, so it can be considered to set these states that trigger services as global variables, which become the intervals between events and services. Thus, events only change global variables, and do not care which services are triggered by changes in these global variables; a service only concerns whether a global variable that can trigger the service changes, not the event itself.

Based on this inventive concept, pseudo code that fulfills the above requirements can be converted into:

based on the above idea, once the window size is changed, the global variable globalpindowchangeflag changes; once the globalpindowchangeflag changes, a series of functions such as AitemChange, bitemcchange, CitemChange and EitemChange are immediately notified to make corresponding responses.

Example 1

Fig. 1 shows a flowchart of a flow control method applied to JavaScript according to one embodiment of the present disclosure. In this embodiment, the method includes:

step 101, initiating an AJAX request, acquiring data and giving one or more global variables, wherein the one or more global variables are set according to a trigger event of at least one service;

step 103, for each service in the at least one service, monitoring a global variable set according to a trigger event of the service, and triggering execution of the service when the global variable set according to the trigger event of the service changes.

In the embodiment, the global variable is set as the interval between the event and the service, the service only needs to monitor the change of the global variable without concerning the event, the traditional JS event-based trigger mechanism is changed, the event direct trigger service is changed into the event indirect trigger service, and the control of the flow can be simplified and decoupled. Moreover, events only change global variables without concern about which services are triggered by changes of the global variables, and the efficiency of data carrying can be improved. According to the embodiment, the flow control applied to the JS has clear and readable control logic and is convenient to realize and maintain.

In a possible implementation manner, in step 103, the monitoring a global variable set according to the triggering event of the service may include: in the case that the browser supports the prototype function object.

The data type of the JS can be classified into a basic data type and a combined data type. The combined data type includes a JSON type and an ARRAY (ARRAY) type, wherein the ARRAY type can be divided into a basic ARRAY type and a non-basic ARRAY type. The basic ARRAY type means that each element of the ARRAY is a basic data type; a non-essential ARRAY type means that an element of the ARRAY is a composite data type, e.g., an element itself is also ARRAY, which is also a nested ARRAY, and/or an element is a JSON type.

For example, for basic data types, listening can be directly performed through the get method and the set method in the prototype function object. The following is an example demonstration of pseudo code listening for basic data types according to the present disclosure:

the test code in the browser's console is as follows:

obj.name；

undefined

name ═ Hello World! '/at this time the window pops up the alert box

obj.name

Hello World！

For the underlying ARRAY type in the composite data type, there are prototype functions in JS that can be modified, and the prototype functions that are often used to modify ARRAY type data are shown in the following table:

prototype function for modifying ARRAY type values in Table 1JS

However, the modification of the ARRAY type data element by the prototype function cannot be heard, and if the function for modifying the ARRAY type data is rewritten, the execution efficiency thereof hardly reaches the level of the prototype function.

For this case, the inventors considered that, for the basic ARRAY type in the combined data type, snooping may be performed by a value method in the prototype function object. The following is an example demonstration of pseudocode of ARRAY type based on snooping according to the present disclosure:

for the JSON type and the non-basic ARRAY type in the combined data type, recursive decomposition may be performed layer by layer first until all elements obtained by decomposition are basic data types or basic ARRAY types in the combined data type, and some or all of the elements are brought into a monitoring range for monitoring, and only some or all of the elements are monitored, which may be set as required. For snooping of the basic data type and the basic ARRAY type, reference may be made to the method described above. The following is an example demonstration of pseudo code listening for all elements of JSON type according to the present disclosure:

for the sake of brief description, in the above example demonstration, it is assumed that the elements obtained by the final decomposition are all basic data types, and the case of the ARRAY type based on the elements obtained by the final decomposition is not considered, and it can be understood by those skilled in the art that the implementation is similar for the case of the ARRAY type based on the elements obtained by the final decomposition. Likewise, a similar approach can be used to implement recursive listening to non-basic ARRAY types.

Snooping for the various data types described above may be encapsulated within the same function. For example, a function may be defined: dataListener (_ var, callBack (newData, oldDate), KeyList), where: var represents the name of the variable being monitored; callback represents a Callback function, wherein newData and oldDate represent placeholders of new data and old data, and can be used in the Callback function; the KeyList represents a global variable to listen to, and in particular, for data of a combined data type, which elements in the data to listen to can be set by the KeyList. For example, for JSON type data a as shown below:

if only the elements "B, C" and "E" need to be listened to, but not the element "B, D", KeyList may be set to "B, C | D". The rule of Keylist here is to divide the different data blocks by "|" with the data levels indicated by the english subscript ',' number.

In one possible implementation, in the case that the browser does not support the prototype function object. As will be appreciated by those skilled in the art, the prototype function object. Thus, for this case, timed polling may be employed to obtain the variable value. The following is an example demonstration of pseudo code for global variable snooping by timed polling according to the present disclosure:

if the time interval of the timing polling is too short, the load of the CPU is overlarge; if the interval is too long, data changes cannot be discovered in time, and some data changes may even be missed. Therefore, the time interval of the timed polling can be reasonably set according to needs. The use of timed polling takes up more memory than the prototype function object, but it can solve the problem of browser compatibility.

Example 2

Fig. 2 is a block diagram illustrating a flow control apparatus 500 applied to JavaScript according to an embodiment of the present invention. The apparatus 200 includes a global variable assignment unit 201 and a snoop trigger unit 203. The global variable assignment unit 201 is configured to initiate an AJAX request, obtain data, and assign one or more global variables, where the one or more global variables are set according to a trigger event of at least one service. The interception triggering unit 203 is configured to intercept, for each service of the at least one service, a global variable set according to a triggering event of the service, and trigger execution of the service when the global variable set according to the triggering event of the service changes.

In a possible embodiment, the snoop triggering unit 203 may further include a first snoop subunit (not shown). The first listening subunit may be configured to listen to a global variable set according to a trigger event of the service using the object.

For example, the first listening subunit may be configured to perform at least one of:

directly monitoring a get method and a set method in a prototype function object.

For the basic ARRAY type in the combined data type, monitoring through a value method in a prototype function object.

Aiming at a JSON type and a non-basic ARRAY type in a combined data type, recursively decomposing layer by layer to the ARRAY type of which all elements are basic data types or basic in the combined data type, and monitoring part or all of the elements, wherein aiming at the basic data type, monitoring is directly carried out through a get method and a set method in a prototype function object. For the basic ARRAY type in the combined data type, listening is performed by a value method in the prototype function object.

In a possible embodiment, the snoop triggering unit 203 may further include a second snoop subunit (not shown). The second listening subunit may be configured to periodically poll a global variable set according to a trigger event of the service for listening, in a case where the browser does not support the prototype function object.

Example 3

Fig. 3 shows a block diagram of a flow control device 300 applied to JavaScript according to another embodiment of the present disclosure. The device 300 may be a host server with computing capabilities, a personal computer PC, or a portable computer or terminal that is portable, etc. The specific embodiments of the present disclosure do not limit the specific implementation of the compute node.

Device 300 includes a processor (processor)310, a communication Interface (Communications Interface)320, a memory 330, and a bus 340. The processor 310, the communication interface 320, and the memory 330 communicate with each other via a bus 340.

The communication interface 320 is used to communicate with network devices, including, for example, virtual machine management centers, shared storage, and the like.

The processor 310 is used to execute programs. The processor 310 may be a central processing unit CPU or an application Specific Integrated circuit asic or one or more Integrated circuits configured to implement embodiments of the present disclosure.

The memory 330 is used for storing files. Memory 330 may comprise high-speed RAM memory and may also include non-volatile memory (non-volatile memory), such as at least one disk memory. Memory 330 may also be a memory array. The storage 330 may also be partitioned and the blocks may be combined into virtual volumes according to certain rules.

In one possible embodiment, the program may be a program code including computer operation instructions. The program is specifically applicable to executing the flow control method applied to JavaScript as described in embodiment 1.

Examples of the applications

Page loading

Fig. 4 shows a flow control diagram of a conventional JS page load. As shown in the figure, for the service 1, an AJAX request is sent to acquire data from a server and endow a function internal variable d11, a function internal variable d12, … …, and the service 1 is executed in response to the change of the function internal variable d11, the function internal variable d12 and other function internal variables; for the service 2, an AJAX request is sent to acquire data from the server and give the function internal variable d21, the function internal variables d22 and … …, and the service 2 is executed in response to changes of the function internal variables such as the function internal variable d21 and the function internal variable d22, and so on. As shown in fig. 4, the event directly triggers the service, which results in complex control logic and difficult maintenance in case of multiple events triggering multiple services.

Particularly, if the data required by two services are very similar, if it is not desirable to waste multiple AJAX requests, the two services are often merged into the same callback function, as shown in fig. 5, the services are closely coupled to each other, which often results in reconstruction, and further increases the difficulty of flow control.

FIG. 6 illustrates a flow control diagram for a JS page load in accordance with the present disclosure. As shown in fig. 6, an AJAX request is sent to acquire data from a server and give global variable 1, global variable 2, global variable 3, and global variable … …, and each service listens for a global variable related to its own trigger event and is triggered in response to a change in the listened global variable. As shown in fig. 6, global variables serve as events and intervals between services, and the events indirectly trigger services, thereby simplifying and decoupling flow control. In addition, each global variable can be monitored by a plurality of businesses, and repeated AJAX requests can be prevented from being initiated.

Here, a certain playback page is taken as an example for explanation.

The play page includes the following global variables:

video lists (videolists);

comments (comment);

video retrieval (viewsearch);

the advertisement part is divided into 3 big blocks: ad 1(ad1), ad 2(ad2), and ad 3(ad3), which may be loaded separately, with ad2 not being shown when ad1 appears;

an index ranking list (Statrank);

interaction (Active), whose presentation is based on data of "interaction", "video list" and "comment".

The global variable described above may be encapsulated in a variable named PlayerPage. Here, "post-loading" and "uncore" hereinafter are both with respect to the core content that is loaded most prior to the purpose of playing the page.

The pseudo code for implementing the post-load module of the page according to the present disclosure is as follows:

FIG. 7 shows a page loading diagram according to the above pseudo-code. According to the present example, AJAX focuses only on data handling. Once partial data filling in the PlayerPage is completed by using the AJAX request, the change of the monitored data is automatically discovered, so that page loading behavior is triggered, and non-core module loading of the page is realized. At this point, the traffic is no longer dependent on the ajax request, but directly on the values of the various variables.

In this example, in the case of one-to-one control, such as a "video list" module, when data (videoList) of the video list module is obtained and assigned by ajax, it is monitored by its monitor function, and thus triggers a service that loads the video list module (dovideelist ()).

In this example, in the case of many-to-one control, for example, the data of the "interaction" module is based on data of "interaction" (Active), "video list" (video list) and "comment" (comment), and the listening function of the service monitors data of three parts, namely "interaction" (Active), "video list" (video list) and "comment" (comment), and when the data of the three parts all arrive, the service loading the interaction module is triggered.

Real-time update application of data

The page has a type of application, and the interface needs to be polled in real time to obtain data, for example, the payment interface needs to continuously inquire whether a current order is successful or not to the background, the barrage application needs to continuously poll the barrage data of the next time period to the background, and the like. These services often have complicated polling conditions, and in the traditional JS flow control, the services and the polling conditions are often interspersed together, which is difficult to maintain.

The pseudo code of the barrage service in the traditional JS flow control is as follows:

the pseudo code example of the bullet screen service according to the present disclosure may be:

fig. 8 shows a flow control diagram of the bullet screen service according to the present disclosure with reference to the above pseudo code. As shown in fig. 8, on one hand, AJAX focuses on obtaining the latest data and giving global variables, and meanwhile determines whether to continue polling, and does not process the service logic after the data is successfully obtained; and once the change of the global variable is monitored, triggering the callback function to execute corresponding service. Even if a certain AJAX request triggers more new services, other services related to the AJAX request do not need to be checked, and only the callback function of the new service needs to be bound and executed on the global variable carried by the AJAX request.

Furthermore, when there are several real-time services in a page based on AJAX polling, such as barrage, user viewing records, etc., only one or a few polls may be used according to the present disclosure, without using a separate AJAX poll for each real-time service. Fig. 9 is a schematic diagram illustrating the flow control of multiple services based on AJAX polling in a conventional JS, and it can be seen that, for a user viewing a recording service and a barrage service, each AJAX polling is used; fig. 10 shows a flow control diagram of multi-service based on AJAX polling according to the present disclosure, and it can be seen that only one AJAX polling is used for a user viewing record service and a barrage service. This is advantageous in saving memory.

Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Those skilled in the art may select different ways to implement the described functionality for specific applications, but such implementation decisions should not be interpreted as causing a departure from the scope of the present disclosure.

If the described functionality is implemented in the form of computer software and sold or used as a stand-alone product, all or part (e.g., a part contributing to the prior art) of the technical solution of the present disclosure may be considered to be embodied in the form of a computer software product to some extent. The computer software product is typically stored in a non-volatile storage medium readable by a computer and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to perform all or part of the steps of the methods of the embodiments of the disclosure. The 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 above description is only for the specific embodiments of the present disclosure, but the scope of the present disclosure is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present disclosure, and all the changes or substitutions should be covered within the scope of the present disclosure. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims

1. A flow control method applied to JavaScript, the method comprising:

initiating an AJAX request, acquiring data and endowing one or more global variables, wherein the one or more global variables are set according to a triggering event of at least one service;

and monitoring a global variable set according to the trigger event of the service aiming at each service in the at least one service, and triggering the execution of the service when the global variable set according to the trigger event of the service changes.

2. The flow control method applied to JavaScript according to claim 1, wherein the monitoring a global variable set according to a trigger event of the service includes:

and in the case that the browser supports the prototype function object.

3. The flow control method applied to JavaScript according to claim 2, wherein the listening to the global variable set according to the trigger event of the service by object.

Listening directly through get method and set method in prototype function object.

4. The flow control method applied to JavaScript according to claim 2, wherein the listening to the global variable set according to the trigger event of the service by object.

Listening by a value method in a prototype function object, defineProperty for an underlying ARRAY type in the combined data type, and calling the prototype function for changing the data value of the ARRAY data type in the value method.

5. The flow control method applied to JavaScript according to claim 2, wherein the listening to the global variable set according to the trigger event of the service by object.

Aiming at a JSON type and a non-basic ARRAY type in a combined data type, carrying out layer-by-layer recursive decomposition on the JSON type and the non-basic ARRAY type until all elements are basic data types or basic ARRAY types in the combined data type, and monitoring part or all of the elements;

wherein, for the basic data type, directly monitoring through a get method and a set method in a prototype function object. For the basic ARRAY type in the combined data type, listening is performed by a value method in the prototype function object.

6. The flow control method applied to JavaScript according to claim 1, wherein the monitoring a global variable set according to a trigger event of the service includes:

and in the case that the browser does not support the prototype function object, periodically polling the global variable set according to the trigger event of the service to monitor.

7. A flow control device applied to JavaScript, the device comprising:

the system comprises a global variable assignment unit, a data processing unit and a data processing unit, wherein the global variable assignment unit is configured to initiate an AJAX request, acquire data and assign one or more global variables, and the one or more global variables are set according to a trigger event of at least one service;

and the monitoring triggering unit is configured to monitor a global variable set according to the triggering event of the service for each service in the at least one service, and trigger the execution of the service when the global variable set according to the triggering event of the service changes.

8. The flow control device applied to JavaScript of claim 7, wherein the listening triggering unit further comprises a first listening subunit,

the first listening subunit is configured to listen to a global variable set according to a trigger event of the service using the object.

9. The flow control device applied to JavaScript of claim 8, wherein the first listening subunit is configured to:

10. The flow control device applied to JavaScript of claim 8, wherein the first listening subunit is configured to:

11. The flow control device applied to JavaScript of claim 8, wherein the first listening subunit is configured to:

aiming at JSON type and non-basic ARRAY type in the combined data type, recursively decomposing layer by layer to the ARRAY type of which all elements are basic data type or basic in the combined data type, monitoring part or all of the elements,

12. The flow control device applied to JavaScript of claim 7, wherein the listening triggering unit further comprises a second listening subunit,

the second listening subunit is configured to periodically poll a global variable set according to a trigger event of the service for listening, in a case where the browser does not support the prototype function object.