应用于JavaScript的流程控制方法和装置与流程

本公开涉及互联网领域，尤其涉及一种应用于JavaScript的流程控制方法和一种应用于JavaScript的流程控制装置。

背景技术：

目前在JavaScript(简称JS)中，采用基于事件的触发机制，即事件触发业务，业务响应于事件，可利用回调函数执行业务逻辑。一个业务可能响应于多个事件，一个事件也可能触发多个业务，因此，在多个业务响应于多个事件的情况下，其控制逻辑往往非常复杂。此外，一些业务的执行，也可能引起某些事件状态的变化，进而触发其他业务，导致业务间彼此耦合相互控制，更加剧了流程控制的复杂度。这些因素可能导致在JS中最终实现的流程控制非常复杂而混乱，使得其实现难度增加，且非常容易出错，并导致代码的易读性和可维护性较差，在出错后难以调试。此外彼此耦合、错综复杂的流程控制牵一发动全身，使得技术人员难以对已实现的流程控制进行调整和升级。

技术实现要素：

有鉴于此，本公开要解决的技术问题是在JavsScript中实现逻辑清晰、更易实现和维护的流程控制。

为了解决上述技术问题，根据本公开的一个方面，提供了一种应用于JavaScript的流程控制方法，该方法包括：发起AJAX请求，获取数据并赋予一个或多个全局变量，其中，所述一个或多个全局变量是根据至少一个业务的触发事件所设置的；针对所述至少一个业务中的每个业务，监听根据该业务的触发事件所设置的全局变量，并且在根据该业务的触发事件所设置的全局变量发生变化时，触发该业务的执行。

根据本公开的另一个方面，还提供了一种应用于JavaScript的流程控制装置，该装置包括：全局变量赋值单元，被配置为发起AJAX请求，获取数据并赋予一个或多个全局变量，其中，所述一个或多个全局变量是根据至少一个业务的触发事件所设置的；监听触发单元，被配置为针对所述至少一个业务中的每个业务，监听根据该业务的触发事件所设置的全局变量，并且在根据该业务的触发事件所设置的全局变量发生变化时，触发该业务的执行。

本公开的各个方面，全局变量被设置作为事件和业务之间的间隔，业务只需监听全局变量是否变化而无需关心事件本身，改变了传统JS基于事件的触发机制，从事件直接触发业务改为事件间接触发业务，能够化简和解耦流程控制。而且，事件仅改变全局变量，而无需关心这些全局变量的变化将触发哪些业务，能够提高搬运数据的效率。根据本公开的应用于JS的流程控制，其控制逻辑清晰易读，便于实现和维护。

根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。

附图说明

包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本公开的示例性实施例、特征和方面，并且用于解释本公开的原理。

图1示出了根据本公开的一个实施例的应用于JavaScript的流程控制方法的流程图。

图2示出了根据本公开的一个实施例的应用于JavaScript的流程控制装置的结构框图。

图3示出了本公开的另一个实施例的一种应用于JavaScript的流程控制设备的结构框图。

图4示出了传统JS页面加载的流程控制示意图。

图5示出了传统JS页面加载中彼此耦合的业务的流程控制示意图。

图6示出了根据本公开的JS页面加载的流程控制示意图。

图7示出了根据本公开的加载播放页面的非核心模块的示意图。

图8示出了根据本公开的基于AJAX轮询的弹幕业务的流程控制示意图。

图9示出了传统JS中基于AJAX轮询的多业务的流程控制示意图。

图10示出了根据本公开的基于AJAX轮询的多业务的流程控制示意图。

具体实施方式

以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。

在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。

另外，为了更好的说明本公开，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本公开同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本公开的主旨。

此处，先对本公开的基本原理进行简单介绍。

设窗口中存在3个元素A、B、C，均呈现白色，当前需求是：当窗口变大且大于200px(pixel，像素)的时候，要求A变成红色，B变成绿色，C变成紫色；当窗口宽度小于200px时候，要求A、B、C均呈现白色。按照传统的基于事件的触发机制，实现上述需求的伪代码如下：

目前，JS中基本都是通过上述方法实现的。在有些情况下，如果符合特定条件，还可以考虑将AitemChange、BitemChange、CitemChange捏合在一个函数中。

此时如果提出新的需求：要求D元素也能够随窗口大小的变化而变色，则可以参照使A、B、C元素变色的实现方式，新增函数DitemChange。

但要，如果新增的需求越来越多怎么办？对象越来越多越来越复杂，windowChange函数会变得越来越庞大，维护和管理windowChange函数的技术人员会发现：这个函数中包括多个事件和多个业务逻辑，在维护过程中需要深入每个事件和业务逻辑的内部，一一确定事件和业务间的响应关系，工作量和工作难度都很大，并且极易出错，出错后还难以调试。

甚至进一步地，提出需求：元素E，不但要求在窗口大于700px的时候变橘黄色，还要在A元素变色之后5秒钟后变色，按照上述的解决模式，不但要考虑windowChange函数，也要考虑AitemChange，因此需要把对E元素的控制写到两个函数里，使得控制逻辑更为复杂。

发明人发现，基于事件的触发机制的本质是事件改变某些状态，而业务(通常以回调函数的形式)响应于这些状态的变化被执行，因此，可以考虑将触发业务的这些状态设置为全局变量，全局变量成为事件和业务间的间隔。从而，事件仅改变全局变量，而不关心这些全局变量的变化会触发哪些业务；业务仅关心可触发该业务的全局变量是否发生变化，而不关心事件本身。

基于这一发明构思，实现上述需求的伪代码可被转换为：

基于上述思路，一旦窗口大小被改变了，全局变量GlobalWindowchangeFlag即发生变化；而GlobalWindowchangeFlag一旦发生变化，立刻通知AitemChange、BitemChange、CitemChange、EitemChange等一系列的函数，来做出相应的响应。

实施例1

图1示出了根据本公开的一个实施例的应用于JavaScript的流程控制方法的流程图。本实施例中，该方法包括：

步骤101，发起AJAX请求，获取数据并赋予一个或多个全局变量，其中，所述一个或多个全局变量是根据至少一个业务的触发事件所设置的；

步骤103，针对所述至少一个业务中的每个业务，监听根据该业务的触发事件所设置的全局变量，并且在根据该业务的触发事件所设置的全局变量发生变化时，触发该业务的执行。

本实施例中，全局变量被设置作为事件和业务之间的间隔，业务只需监听全局变量的变化而无需关心事件本身，改变了传统JS基于事件的触发机制，从事件直接触发业务改为事件间接触发业务，能够化简和解耦流程控制。而且，事件仅改变全局变量，而无需关心这些全局变量的变化将触发哪些业务，能够提高搬运数据的效率。根据实施例的应用于JS的流程控制，其控制逻辑清晰易读，便于实现和维护。

在一种可能的实施方式中，在上述步骤103中，监听根据该业务的触发事件所设置的全局变量可以包括：在浏览器支持原型函数Object.defineProperty的情况下，可以采用Object.defineProperty监听根据该业务的触发事件所设置的全局变量。

JS的数据类型可以分为基本数据类型和组合数据类型。组合数据类型又包括JSON类型和ARRAY(数组)类型，其中，ARRAY类型可以分为基础的ARRAY类型和非基础的ARRAY类型。基础的ARRAY类型指该ARRAY的每个元素都是基本数据类型；非基础的ARRAY类型指该ARRAY的某个元素是组合数据类型，例如，其某个元素自身也是ARRAY，这种情况也成为是嵌套的ARRAY，和/或其某个元素是JSON类型。

例如，针对基本数据类型，可以直接通过原型函数Object.defineProperty中的get方法和set方法进行监听。以下为根据本公开的监听基本数据类型的伪代码示例演示：

在浏览器的控制台中测试代码如下：

obj.name；

undefined

obj.name＝’Hello World！’//此时窗口弹出alert弹框

obj.name

Hello World！

针对组合数据类型中的基础的ARRAY类型，JS中已存在可对其进行修改的原型函数，常用于修改ARRAY类型数据的原型函数如下表所示：

表1JS中用于修改ARRAY类型数值的原型函数

但通过上述原型函数对ARRAY类型数据元素进行的修改无法被监听到，而如果重新编写修改ARRAY类型数据的函数，其执行效率很难达到原型函数的水平。

针对这种情况，发明人考虑，对于组合数据类型中的基础的ARRAY类型，可通过原型函数Object.defineProperty中的value方法进行监听，并且，可在value方法中调用用于改变ARRAY数据类型数据值的原型函数(可参见表1)，以在保证执行效率的同时实现监听。以下为根据本公开的监听基础的ARRAY类型的伪代码示例演示：

针对组合数据类型中的JSON类型和非基础的ARRAY类型，可以先通过逐层递归分解，直至分解得到的所有元素均为基本数据类型或者组合数据类型中的基础的ARRAY类型，并将这些元素中的部分或全部纳入监听范围进行监听，仅监听部分还是对全部进行监听，是可以根据需要设置的。对基本数据类型和基础的ARRAY类型的监听，可参照上文描述的方法。以下为根据本公开的对JSON类型的全部元素进行监听的伪代码示例演示：

为描述简要，上述示例演示中假设最终分解得到的元素均为基本数据类型，未考虑最终分解得到的元素为基础的ARRAY类型的情况，本领域技术人员可以理解的是，对于最终分解得到的元素中存在基础的ARRAY类型的情况，其实现是类似的。同样地，可采用类似方法实现对非基础的ARRAY类型的递归监听。

可以将对上述各种数据类型的监听封装在同一个函数里。例如，可以定义函数：dataListener(_var,callBack(newData,oldDate),KeyList)，其中：_var表示被监听的变量名；Callback表示回调函数，其中的newData,oldDate表示新数据和旧数据的占位符，可以在回调函数中使用；KeyList表示要监听的全局变量，特别地，对于组合数据类型的数据，可通过KeyList设置要监听该数据中的哪些元素。例如，针对如下所示的JSON类型数据A：

如果仅需要监听元素“B,C”以及“E”，而不需要监听元素“B,D”，则可以将KeyList设置为“B,C|D”。此处Keylist的规则是用“|”分割不同数据块，用英文下标‘,’号表示数据层级。

在一种可能的实施方式中，在浏览器不支持原型函数Object.defineProperty的情况下，可以定时轮询根据该业务的触发事件所设置的全局变量以进行监听。如本领域技术人员所了解的，原型函数Object.defineProperty是ECS5属性，所以不支持IE8以及低于IE8的其他IE版本。因此，针对这种情况，可采用定时轮询来获取变量值。以下为根据本公开的通过定时轮询进行全局变量监听的伪代码示例演示：

定时轮询的时间间隔如果太短，则CPU负荷过大；间隔如果太长，则无法及时发现数据变化，甚至可能遗漏某些数据变化。因此，可根据需要合理设置定时轮询的时间间隔。相比于原型函数Object.defineProperty，采用定时轮询会占用更多内存，但其能够解决浏览器兼容的问题。

实施例2

图2示出了根据本发明的一个实施例的应用于JavaScript的流程控制装置500的结构框图。装置200包括全局变量赋值单元201和监听触发单元203。全局变量赋值单元201被配置为发起AJAX请求，获取数据并赋予一个或多个全局变量，其中，所述一个或多个全局变量是根据至少一个业务的触发事件所设置的。监听触发单元203被配置为针对所述至少一个业务中的每个业务，监听根据该业务的触发事件所设置的全局变量，并且在根据该业务的触发事件所设置的全局变量发生变化时，触发该业务的执行。

在一种可能的实施方式中，监听触发单元203还可以包括第一监听子单元(未示出)。所述第一监听子单元可以被配置为在浏览器支持原型函数Object.defineProperty的情况下，采用Object.defineProperty监听根据该业务的触发事件所设置的全局变量。

例如，所述第一监听子单元可以被配置为执行下列中的至少一者：

针对基本数据类型，直接通过原型函数Object.defineProperty中的get方法和set方法进行监听；

针对组合数据类型中的基础的ARRAY类型，通过原型函数Object.defineProperty中的value方法进行监听，其中，在value方法中调用用于改变ARRAY数据类型数据值的原型函数；

针对组合数据类型中的JSON类型和非基础的ARRAY类型，通过逐层递归分解至所有元素均为基本数据类型或者组合数据类型中的基础的ARRAY类型，并对所述所有元素中的部分或全部进行监听，其中，针对基本数据类型，直接通过原型函数Object.defineProperty中的get方法和set方法进行监听；针对组合数据类型中的基础的ARRAY类型，通过原型函数Object.defineProperty中的value方法进行监听，其中，在value方法中调用用于改变ARRAY数据类型数据值的原型函数。

在一种可能的实施方式中，监听触发单元203还可以包括第二监听子单元(未示出)。第二监听子单元可以被配置为在浏览器不支持原型函数Object.defineProperty的情况下，定时轮询根据该业务的触发事件所设置的全局变量以进行监听。

实施例3

图3示出了本公开的另一个实施例的一种应用于JavaScript的流程控制设备300的结构框图。设备300可以是具备计算能力的主机服务器、个人计算机PC、或者可携带的便携式计算机或终端等。本公开具体实施例并不对计算节点的具体实现做限定。

设备300包括处理器(processor)310、通信接口(Communications Interface)320、存储器(memory)330和总线340。其中，处理器310、通信接口320、以及存储器330通过总线340完成相互间的通信。

通信接口320用于与网络设备通信，其中网络设备包括例如虚拟机管理中心、共享存储等。

处理器310用于执行程序。处理器310可能是一个中央处理器CPU，或者是专用集成电路ASIC(Application Specific Integrated Circuit)，或者是被配置成实施本公开实施例的一个或多个集成电路。

存储器330用于存放文件。存储器330可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器330也可以是存储器阵列。存储器330还可能被分块，并且所述块可按一定的规则组合成虚拟卷。

在一种可能的实施方式中，上述程序可为包括计算机操作指令的程序代码。该程序具体可用于执行如实施例1所述的应用于JavaScript的流程控制方法。

应用实例

页面加载

图4示出了传统JS页面加载的流程控制示意图。如图所示，针对业务1，发送AJAX请求从服务器获取数据并赋予函数内部变量d11、函数内部变量d12、……，业务1响应于函数内部变量d11、函数内部变量d12等函数内部变量的变化而被执行；针对业务2，发送AJAX请求从服务器获取数据并赋予函数内部变量d21、函数内部变量d22、……，业务2响应于函数内部变量d21、函数内部变量d22等函数内部变量的变化而被执行，以此类推。如图4所示，事件直接触发业务，在多事件触发多业务的情况下，导致控制逻辑复杂且难以维护。

特别地，如果两个业务需要的数据非常相似，如果不想浪费多次AJAX请求，往往会将两个业务捏合在同一个回调函数中，如图5所示，业务彼此紧密耦合，往往导致重构，进一步增加了流程控制的难度。

图6示出了根据本公开的JS页面加载的流程控制示意图。如图6所示，发送AJAX请求从服务器获取数据并赋予全局变量1、全局变量2、全局变量3、……，各个业务监听与自身的触发事件相关的全局变量，并响应于被监听的全局变量的变化而被触发。如图6所示，全局变量作为事件和业务间的间隔，事件间接触发业务，能够化简和解耦流程控制。此外，每个全局变量可以被多个业务监听，能够避免发起重复的AJAX请求。

此处以某播放页面为例进行说明。

该播放页面包括如下的全局变量：

视频列表(videoList)；

评论(comment)；

视频检索(viewsearch)；

广告部分分为3个大块：广告1(ad1)、广告2(ad2)和广告3(ad3)，可分别加载，其中，广告2在广告1出现时不展现；

指数排行榜(Statrank)；

互动(Active)，其呈现是基于“互动”、“视频列表”和“评论”的数据。

上述全局变量可被封装在名为PlayerPage的变量中。此处的“后加载”和下文中“非核心”均是相对于播放页面的目的播放内容这一最优先加载的核心内容而言的。

根据本公开的实现该页面的后加载模块的伪代码如下所示：

图7示出了根据上述伪代码的页面加载示意图。根据本示例，AJAX仅关注于数据搬运。一旦利用AJAX请求完成了PlayerPage中的部分数据填充，被监控的数据的变化会被自动发现，从而触发页面加载行为，实现页面的非核心模块加载。此时，业务不再依赖于ajax请求，而直接依赖于各个变量的值。

本示例中，在一对一控制的情况下，比如“视频列表”模块，当视频列表模块的数据(videoList)通过ajax被获取和赋值，则会被其监听函数监听到，从而触发加载视频列表模块(dovideoList())的业务。

本示例中，在多对一控制的情况下，比如“互动”模块的数据是基于“互动”(Active)、“视频列表”(videoList)和“评论”(comment)的数据，其业务的监听函数会监听“互动”(Active)，“视频列表”(videoList)和“评论”(comment)三部分的数据，当三个部分的数据都到达，触发加载互动模块的业务。

数据的实时更新应用

页面上有一类应用，需要实时轮询接口获取数据，比如支付接口要不断的向后台询问当前订单是否成功，弹幕应用要不断的向后台轮询下个时间段的弹幕数据等等。这些业务往往有复杂的轮询条件，而在传统JS流程控制中，业务和轮询条件往往穿插在一起，难以维护。

下面是传统JS流程控制中弹幕业务的伪代码：

根据本公开的弹幕业务的伪代码示例可以是：

图8示出了参照上述伪代码的根据本公开的弹幕业务的流程控制示意图。如图8所示，一方面，AJAX专注于获取最新数据并赋予全局变量，同时判断是否需要继续轮询，不再处理成功获取数据后的业务逻辑；而一旦全局变量的变化被监听到，则触发回调函数执行相应业务。即便某个AJAX请求将触发更多新业务，也无需查看与该AJAX请求相关的其他业务，只需在该AJAX请求所搬运的全局变量上绑定执行该新业务的回调函数即可。

此外，当页面中有若干个基于AJAX轮询的实时业务时，比如弹幕，用户观看记录等，根据本公开可仅使用一个或较少的轮询，而不需针对每个实时业务使用独立的AJAX轮询。图9示出了传统JS中基于AJAX轮询的多业务的流程控制示意图，可以看出，针对用户观看记录业务和弹幕业务，各使用一个AJAX轮询；图10示出了根据本公开的基于AJAX轮询的多业务的流程控制示意图，可以看出，针对用户观看记录业务和弹幕业务，仅使用一个AJAX轮询。这有利于节省内存。

本领域普通技术人员可以意识到，本文所描述的实施例中的各示例性单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件形式来实现，取决于技术方案的特定应用和设计约束条件。专业技术人员可以针对特定的应用选择不同的方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

如果以计算机软件的形式来实现所述功能并作为独立的产品销售或使用时，则在一定程度上可认为本公开的技术方案的全部或部分(例如对现有技术做出贡献的部分)是以计算机软件产品的形式体现的。该计算机软件产品通常存储在计算机可读取的非易失性存储介质中，包括若干指令用以使得计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本公开各实施例方法的全部或部分步骤。而前述的存储介质包括U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以所述权利要求的保护范围为准。