CN103377059A - 基于jQuery框架的功能模块动态加载方法和装置 - Google Patents

Abstract

本申请公开了一种基于jQuery框架的功能模块动态加载方法和装置，其中，该方法包括：在网页上接收到请求加载功能模块的触发命令；向服务器请求加载功能模块所需的资源文件；在从服务器成功获取到资源文件后，调用与功能模块对应的回调函数来对资源文件进行加载操作，其中，回调函数指示了加载操作。本申请解决了相关技术中jQuery框架不支持模块的动态加载功能的问题，实现了jQuery框架下功能模块的动态注册和加载，进一步的，还实现了对数据的模块化管理。

Description

基于jQuery框架的功能模块动态加载方法和装置

技术领域

本申请涉及互联网领域，具体而言，涉及一种基于jQuery框架的功能模块动态加载方法和装置。

背景技术

JQuery作为一种优秀的Javascript框架被广泛使用，目前jQuery框架不支持模块的动态加载功能，当网页需要加载功能模块时，往往需要用户手动加载并刷新来实现。YUI3.X+、Ext4.X+、SeaJS等都可以实现动态加载功能模块，然而，YUI3.X+、Ext4.X+都只能为自己的框架服务而无法移植到其它框架；SeaJS则是需要对源文件进行侵入式的修改，以CommonJS的规范来进行重写；此外，目前上述的YUI3.X+、Ext4.X+、SeaJS这些框架都不支持数据模块的动态加载功能。

针对相关技术中jQuery框架不支持模块的动态加载功能，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种基于jQuery框架的功能模块动态加载方法和装置，以解决相关技术中jQuery框架不支持模块的动态加载功能的问题。

根据本申请的一个方面，提供了一种基于jQuery框架的功能模块动态加载方法，该方法包括：在网页上接收到请求加载功能模块的触发命令；向服务器请求加载功能模块所需的资源文件；在从服务器成功获取到资源文件后，调用与功能模块对应的回调函数来对资源文件进行加载操作，其中，回调函数指示了加载操作。

优选的，调用与功能模块对应的回调函数来对资源文件进行加载操作的步骤包括：在请求加载的功能模块为多个的情况下，判断功能模块之间的依赖关系；按照依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；按确定的顺序来加载回调函数。

优选的，按照依赖关系来确定调用回调函数的顺序的步骤包括：按照依赖关系对应的顺序将回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到回调函数队列中，依赖于其它回调函数的回调函数后缓存到回调函数队列中。

优选的，按确定的顺序来加载回调函数的步骤包括：若所请求记载的第一功能模块依赖于所请求记载的第二功能模块，则先调用与第一功能模块对应的回调函数来对加载第一功能模块所需的资源文件进行加载操作，然后调用与第二功能模块对应的回调函数来对加载第二功能模块所需的资源文件进行加载操作。

优选的，在网页上接收到请求加载功能模块的触发命令之前，还包括：为功能模块设置回调函数，其中，回调函数指示了在从服务器成功获取到资源文件后对资源文件所执行的加载操作。

优选的，加载操作包括：初始化操作。

根据本申请的另一方面，提供了一种基于jQuery框架的功能模块动态加载装置，该装置包括：接收单元，用于在网页上接收到请求加载功能模块的触发命令；请求单元，用于向服务器请求加载功能模块所需的资源文件；调用单元，用于在从服务器成功获取到资源文件后，调用与功能模块对应的回调函数来对资源文件进行加载操作，其中，回调函数指示了加载操作。

优选的，调用单元包括：判断模块，用于在请求加载的功能模块为多个的情况下，判断功能模块之间的依赖关系；确定模块，用于按照依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；加载模块，用于按确定模块确定的顺序来加载回调函数。

优选的，确定模块包括：缓存子模块，用于按照依赖关系对应的顺序将回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到回调函数队列中，依赖于其它回调函数的回调函数后缓存到回调函数队列中。

优选的，加载模块包括：调用子模块，用于在所请求记载的第一功能模块依赖于所请求记载的第二功能模块时，先调用与第一功能模块对应的回调函数来对加载第一功能模块所需的资源文件进行加载操作，然后调用与第二功能模块对应的回调函数来对加载第二功能模块所需的资源文件进行加载操作。

优选的，该装置还包括：设置单元，用于在网页上接收到请求加载功能模块的触发命令之前为功能模块设置回调函数，其中，回调函数指示了在从服务器成功获取到资源文件后对资源文件所执行的加载操作。

在本申请中，当网页上接收到请求加载功能模块的触发命令后，用户无需手动操作，系统根据该请求命令向服务器请求加载功能模块所需的资源文件，在获取到资源文件后，调用与功能模块对应的回调函数即可实现对资源文件进行加载操作，这种动态加载方式无需用户手动刷新即可完成网页上功能模块的加载，解决了相关技术中jQuery框架不支持模块的动态加载功能的问题，实现了jQuery框架下功能模块的动态注册和加载，进一步的，还实现了对数据的模块化管理。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的基于jQuery框架的功能模块动态加载系统的一种优选的结构图；

图2是根据本申请实施例的基于jQuery框架的功能模块动态加载方法的一种优选的流程图；

图3是根据本申请实施例的基于jQuery框架的功能模块动态加载装置的一种优选的结构图；

图4是根据本申请实施例的基于jQuery框架的功能模块动态加载装置的另一种优选的结构图；

图5是根据本申请实施例的基于jQuery框架的功能模块动态加载装置的又一种优选的结构图；

图6是根据本申请实施例的基于jQuery框架的功能模块动态加载装置的又一种优选的结构图；

图7是根据本申请实施例的基于jQuery框架的功能模块动态加载装置的又一种优选的结构图；以及

图8是基于本申请实施例的基于jQuery框架的功能模块动态加载装置的一种优选的流程图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

在描述本申请的各实施例的进一步细节之前，将参考图1来描述可用于实现本申请的原理的一个合适的计算体系结构。在以下描述中，除非另外指明，否则将参考由一个或多个计算机执行的动作和操作的符号表示来描述本申请的各实施例。由此，可以理解，有时被称为计算机执行的这类动作和操作包括计算机的处理单元对以结构化形式表示数据的电信号的操纵。这一操纵转换了数据或在计算机的存储器系统中的位置上维护它，这以本领域的技术人员都理解的方式重配置或改变了计算机的操作。维护数据的数据结构是具有数据的格式所定义的特定属性的存储器的物理位置。然而，尽管在上述上下文中描述本申请，但它并不意味着限制性的，如本领域的技术人员所理解的，后文所描述的动作和操作的各方面也可用硬件来实现。

转向附图，其中相同的参考标号指代相同的元素，本申请的原理被示为在一个合适的计算环境中实现。以下描述基于的本申请的实施例，并且不应认为是关于此处未明确描述的替换实施例而限制本申请。

图1示出了可用于这些设备的一个示例计算机体系结构的示意图。出于描述的目的，所绘的体系结构仅为合适环境的一个示例，并非对本申请的使用范围或功能提出任何局限。也不应将该计算系统解释为对图1所示的任一组件或其组合具有任何依赖或需求。

本申请的原理可以使用其它通用或专用计算或通信环境或配置来操作。适用于本申请的众所周知的计算系统、环境和配置的示例包括但不限于，个人计算机、服务器，多处理器系统、基于微处理的系统、小型机、大型计算机、以及包括任一上述系统或设备的分布式计算环境。

在其最基本的配置中，图1中的基于jQuery框架的功能模块动态加载系统100至少包括：一个网站的服务器102以及一个或多个客户端104。服务器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置、用于存储数据的存储装置以及与客户端通信的传输装置；客户端104可以包括：微处理器MCU、与服务器通信的传输装置、与用户交互的显示装置。在本说明书和权利要求书中，“基于jQuery框架的功能模块动态加载系统”也可以被定义为能够执行软件、固件或微码来实现功能的任何硬件组件或硬件组件的组合。基于jQuery框架的功能模块动态加载系统100甚至可以是分布式的，以实现分布式功能。

如本申请所使用的，术语“模块”、“组件”或“单元”可以指在基于jQuery框架的功能模块动态加载系统100上执行的软件对象或例程。此处所描述的不同组件、模块、单元、引擎和服务可被实现为在基于jQuery框架的功能模块动态加载系统100上执行(例如，作为单独的线程)的对象或进程。尽管此处所描述的系统和方法较佳地以软件来实现，但是硬件或软件和硬件的组合的实现也是可能并被构想的。

实施例1

本申请提供了一种基于jQuery框架的功能模块动态加载方法，以解决相关技术中jQuery框架不支持模块的动态加载功能的问题。具体来说，如图2所示，该方法包括：

S202，在网页上接收到请求加载功能模块的触发命令；例如，在运行过程中，网页上的业务逻辑进行到某个组件功能时，需要进行动态加载组件所需的资源文件，此时会发出请求加载功能模块的触发命令，以便成功加载并使用该组件。

S204，向服务器请求加载功能模块所需的资源文件；优选的，当接收到请求加载功能模块的触发命令以后，响应该触发命令并向服务器请求加载功能模块所需的资源文件，优选的，可以通过JSONP方式请求资源文件，优选的，该资源文件包括JS资源文件和CSS资源文件。

S206，在从服务器成功获取到资源文件后，调用与功能模块对应的回调函数来对资源文件进行加载操作，其中，回调函数指示了加载操作。优选的，若上述请求加载的功能模块为多个时，首先判断各个功能模块之间的依赖关系；然后根据判断出的依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；最后按确定的顺序来加载回调函数。

在上述优选的实施方式中，当网页上接收到请求加载功能模块的触发命令后，用户无需手动操作，系统根据该请求命令向服务器请求加载功能模块所需的资源文件，在获取到资源文件后，调用与功能模块对应的回调函数即可实现对资源文件进行加载操作，这种动态加载方式无需用户手动刷新即可完成网页上功能模块的加载，上述技术方案的实施，解决了相关技术中jQuery框架不支持模块的动态加载功能的问题，实现了jQuery框架下功能模块动态注册和加载，进一步的，还实现了对数据的模块化管理。

本申请还提供了一种优选的调用与功能模块对应的回调函数来对资源文件进行加载操作方案，具体来说，该方案包括如下步骤：在请求加载的功能模块为多个的情况下，判断功能模块之间的依赖关系；按照依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；按确定的顺序来加载回调函数。上述优选的实施方式中，在请求加载功能模块为多个时，通过判断各个功能模块的依赖关系来确定最终调用回调函数的顺序，保证了调用所需加载功能模块的连续性与准确性。

本申请还提供了一种优选的按照依赖关系来确定调用回调函数的顺序的方案，具体来说，该方案包括如下步骤：按照依赖关系对应的顺序将回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到回调函数队列中，依赖于其它回调函数的回调函数后缓存到回调函数队列中。上述优选的实施方式中，通过回调函数的依赖关系来回调函数的顺序，进一步保证调用所需加载功能模块的连续性与准确性，进而实现了jQuery框架下功能模块的动态注册和加载。

本申请还提供了按确定的顺序来加载回调函数的一种优选的实施方式，具体来说，包括：若所请求记载的第一功能模块依赖于所请求记载的第二功能模块，则先调用与第一功能模块对应的回调函数来对加载第一功能模块所需的资源文件进行加载操作，然后调用与第二功能模块对应的回调函数来对加载第二功能模块所需的资源文件进行加载操作。在上述优选的实施方式中，在存在相互依赖的功能模块的情况下，根据依赖关系来判断调用回调函数的顺序，进而加载第二功能模块所需的资源文件进行加载操作，进一步保证了调用所需加载功能模块的连续性与准确性。

本申请还对上述基于jQuery框架的功能模块动态加载方法进行了优化，具体来说，在网页上接收到请求加载功能模块的触发命令之前，还包括：为功能模块设置回调函数，其中，回调函数指示了在从服务器成功获取到资源文件后对资源文件所执行的加载操作。通过为功能模块设置回调函数，保证在jQuery框架下功能模块的动态注册和加载。

优选的，上述加载操作包括：初始化操作。此处需要说明的是，初始化操作仅仅作为加载操作的一种优选的实施方式，并不对本申请中的加载操作构成不当的限定，本申请的加载操作还可以是实现本申请技术效果的其它方案。

实施例2

在图1和图2的基础上，本申请还提供了一种基于jQuery框架的功能模块动态加载装置，具体的，如图3所示，该装置包括：接收单元302，用于在网页上接收到请求加载功能模块的触发命令；例如，在运行过程中，网页上的业务逻辑进行到某个组件功能时，需要进行动态加载组件所需的资源文件，此时会发出请求加载功能模块的触发命令，以便成功加载并使用该组件。请求单元304，用于向服务器请求加载功能模块所需的资源文件；优选的，当接收到请求加载功能模块的触发命令以后，响应该触发命令并向服务器请求加载功能模块所需的资源文件，优选的，可以通过JSONP方式请求资源文件，优选的，该资源文件包括JS资源文件和CSS资源文件。调用单元306，用于在从服务器成功获取到资源文件后，调用与功能模块对应的回调函数来对资源文件进行加载操作，其中，回调函数指示了加载操作。优选的，若上述请求加载的功能模块为多个时，首先判断各个功能模块之间的依赖关系；然后根据判断出的依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；最后按确定的顺序来加载回调函数。

在上述优选的实施方式中，当网页上接收到请求加载功能模块的触发命令后，用户无需手动操作，系统根据该请求命令向服务器请求加载功能模块所需的资源文件，在获取到资源文件后，调用与功能模块对应的回调函数即可实现对资源文件进行加载操作，这种动态加载方式无需用户手动刷新即可完成网页上功能模块的加载，上述技术方案的实施，解决了相关技术中jQuery框架不支持模块的动态加载功能的问题，实现了jQuery框架下功能模块动态注册和加载，进一步的，还实现了对数据的模块化管理。

本申请还对上述调用单元306进行了改进，以实现调用与功能模块对应的回调函数来对资源文件进行加载操作，具体来说，如图4所示，调用单元306包括：判断模块402，用于在请求加载的功能模块为多个的情况下，判断功能模块之间的依赖关系；确定模块404，用于按照依赖关系来确定调用回调函数的顺序，其中，每个回调函数对应于一个功能模块；加载模块406，用于按确定模块404确定的顺序来加载回调函数。上述优选的实施方式中，在请求加载功能模块为多个时，通过判断各个功能模块的依赖关系来确定最终调用回调函数的顺序，保证了调用所需加载功能模块的连续性与准确性。

本申请还对上述确定模块404进行了改进，以实现按照依赖关系来确定调用回调函数的顺序，具体来说，确定模块404包括：缓存子模块502，用于按照依赖关系对应的顺序将回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到回调函数队列中，依赖于其它回调函数的回调函数后缓存到回调函数队列中。上述优选的实施方式中，通过回调函数的依赖关系来回调函数的顺序，进一步保证调用所需加载功能模块的连续性与准确性，进而实现了jQuery框架下功能模块的动态注册和加载。

本申请还对上述加载模块406进行了改进，以保证按确定的顺序来加载回调函数，具体地，如图6所示，加载模块406包括：调用子模块602，用于在所请求记载的第一功能模块依赖于所请求记载的第二功能模块时，先调用与第一功能模块对应的回调函数来对加载第一功能模块所需的资源文件进行加载操作，然后调用与第二功能模块对应的回调函数来对加载第二功能模块所需的资源文件进行加载操作。在上述优选的实施方式中，在存在相互依赖的功能模块的情况下，根据依赖关系来判断调用回调函数的顺序，进而加载第二功能模块所需的资源文件进行加载操作，进一步保证了调用所需加载功能模块的连续性与准确性。

本申请还对上述基于jQuery框架的功能模块动态加载装置进行了优化，具体来说，该装置还包括：设置单元702，用于在网页上接收到请求加载功能模块的触发命令之前为功能模块设置回调函数，其中，回调函数指示了在从服务器成功获取到资源文件后对资源文件所执行的加载操作。通过为功能模块设置回调函数，保证在jQuery框架下功能模块的动态注册和加载。

优选的，上述加载操作包括：初始化操作。此处需要说明的是，初始化操作仅仅作为加载操作的一种优选的实施方式，并不对本申请中的加载操作构成不当的限定，本申请的加载操作还可以是实现本申请技术效果的其它方案。

实施例3

在上述实施例1和2的基础上，本申请还提供了一种优选的基于jQuery框架的功能模块动态加载装置，具体来说，该装置工作的优选的流程图如图8所示，包括：

S802，当网页需要使用某个功能模块时，检查网页上是否已经存在具有相应功能的功能模块(若为数据模块，则判断对应的数据模块是否已经存在)；如果存在，执行步骤S804，如果不存在，则执行步骤S806。

S804，执行回调函数；

S806，在网页上不存在具有相应功能的功能模块(或不存在对应的数据模块)时，保存回调函数；并执行步骤S808和S810。

S808，在相应的模块未就绪的情况下，需要将“使用模块功能”的方法暂存在回调函数队列中，当模块载入成功后将统一对这些回调函数进行调用处理。

S810，判断是否正在获取模块资源，若是，则当前逻辑会话结束(由于已经保存了回调函数，后续逻辑会统一在模块加载结束后依次执行队列中的回调函数)，否则，执行步骤S812。

S812，根据模块配置数据获取模块信息；优选的，功能模块是通过JSONP方式请求JS和CSS资源，数据模块则支持AJAX和JSONP两种协议；优选的，模块配置数据是以Object的形式保存，每个属性的名称对应模块的名称，每个值对应模块的配置。

S814，加载模块资源；

S816，执行回调函数。

从上述描述中，可以看出，在本申请中，当网页上接收到请求加载功能模块的触发命令后，用户无需手动操作，系统根据该请求命令向服务器请求加载功能模块所需的资源文件，在获取到资源文件后，调用与功能模块对应的回调函数即可实现对资源文件进行加载操作，这种动态加载方式无需用户手动刷新即可完成网页上功能模块的加载，上述技术方案的实施，解决了相关技术中jQuery框架不支持模块的动态加载功能的问题，实现了jQuery框架下功能模块动态注册和加载，进一步的，还实现了对数据的模块化管理。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (11)

1.一种基于jQuery框架的功能模块动态加载方法，其特征在于，包括：

在网页上接收到请求加载功能模块的触发命令；

向服务器请求加载所述功能模块所需的资源文件；

在从所述服务器成功获取到所述资源文件后，调用与所述功能模块对应的回调函数来对所述资源文件进行加载操作，其中，所述回调函数指示了所述加载操作。

2.根据权利要求1所述的方法，其特征在于，所述调用与所述功能模块对应的回调函数来对所述资源文件进行加载操作的步骤包括：

在所述请求加载的功能模块为多个的情况下，判断所述功能模块之间的依赖关系；

按照所述依赖关系来确定调用所述回调函数的顺序，其中，每个所述回调函数对应于一个所述功能模块；

按确定的顺序来加载所述回调函数。

3.根据权利要求2所述的方法，其特征在于，按照所述依赖关系来确定调用所述回调函数的顺序的步骤包括：

按照所述依赖关系对应的顺序将所述回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到所述回调函数队列中，依赖于其它回调函数的回调函数后缓存到所述回调函数队列中。

4.根据权利要求2所述的方法，其特征在于，按确定的顺序来加载所述回调函数的步骤包括：

若所请求记载的第一功能模块依赖于所请求记载的第二功能模块，则先调用与所述第一功能模块对应的回调函数来对加载所述第一功能模块所需的资源文件进行加载操作，然后调用与所述第二功能模块对应的回调函数来对加载所述第二功能模块所需的资源文件进行加载操作。

5.根据权利要求1所述的方法，其特征在于，在网页上接收到请求加载功能模块的触发命令之前，还包括：

为所述功能模块设置回调函数，其中，所述回调函数指示了在从所述服务器成功获取到所述资源文件后对所述资源文件所执行的加载操作。

6.根据权利要求1所述的方法，其特征在于，所述加载操作包括：初始化操作。

7.一种基于jQuery框架的功能模块动态加载装置，其特征在于，包括：

接收单元，用于在网页上接收到请求加载功能模块的触发命令；

请求单元，用于向服务器请求加载所述功能模块所需的资源文件；

调用单元，用于在从所述服务器成功获取到所述资源文件后，调用与所述功能模块对应的回调函数来对所述资源文件进行加载操作，其中，所述回调函数指示了所述加载操作。

8.根据权利要求7所述的装置，其特征在于，所述调用单元包括：

判断模块，用于在所述请求加载的功能模块为多个的情况下，判断所述功能模块之间的依赖关系；

确定模块，用于按照所述依赖关系来确定调用所述回调函数的顺序，其中，每个所述回调函数对应于一个所述功能模块；

加载模块，用于按所述确定模块确定的顺序来加载所述回调函数。

9.根据权利要求8所述的装置，其特征在于，所述确定模块包括：

缓存子模块，用于按照所述依赖关系对应的顺序将所述回调函数缓存到回调函数队列中，其中，被其它回调函数依赖的回调函数先缓存到所述回调函数队列中，依赖于其它回调函数的回调函数后缓存到所述回调函数队列中。

10.根据权利要求8所述的装置，其特征在于，所述加载模块包括：

调用子模块，用于在所请求记载的第一功能模块依赖于所请求记载的第二功能模块时，先调用与所述第一功能模块对应的回调函数来对加载所述第一功能模块所需的资源文件进行加载操作，然后调用与所述第二功能模块对应的回调函数来对加载所述第二功能模块所需的资源文件进行加载操作。

11.根据权利要求7所述的装置，其特征在于，还包括：

设置单元，用于在网页上接收到请求加载功能模块的触发命令之前为所述功能模块设置回调函数，其中，所述回调函数指示了在从所述服务器成功获取到所述资源文件后对所述资源文件所执行的加载操作。

Images