CN110858240A - Front-end module loading method and device - Google Patents
Front-end module loading method and device Download PDFInfo
- Publication number
- CN110858240A CN110858240A CN201810923025.7A CN201810923025A CN110858240A CN 110858240 A CN110858240 A CN 110858240A CN 201810923025 A CN201810923025 A CN 201810923025A CN 110858240 A CN110858240 A CN 110858240A
- Authority
- CN
- China
- Prior art keywords
- module
- loaded
- dependent
- resources
- modules
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Description
技术领域technical field
本发明涉及计算机技术领域,尤其涉及一种前端模块加载方法和装置。The present invention relates to the technical field of computers, and in particular, to a method and device for loading a front-end module.
背景技术Background technique
目前,界面开发工程在开发一个页面时,往往采取以下方式进行JS(Javascript,一种脚本语言,主要用于网页的特效、功能的脚本编程)资源和CSS(Cascading StyleSheet,层叠样式表单,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言)资源的引入:At present, when developing a page, interface development projects often use the following methods to carry out JS (Javascript, a scripting language, mainly used for special effects and functional scripting of web pages) resources and CSS (Cascading StyleSheet, cascading style sheets, which are used A markup language that controls the style of web pages and allows the separation of style information from web content) resources:
方式一:在页面中,使用标签形式引入所需资源;Method 1: In the page, import the required resources in the form of tags;
方式二:将所有用到的资源放在一个页面模板中,页面需引入该模板;Method 2: Put all the resources used in a page template, and the page needs to import the template;
方式三:利用Sea(一种TCP协议框架)或Requirejs(一种JavaScript模块载入框架)等模块引擎框架引入所需的模块化脚本。Method 3: Use a module engine framework such as Sea (a TCP protocol framework) or Requirejs (a JavaScript module loading framework) to introduce the required modular scripts.
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:In the process of realizing the present invention, the inventor found that there are at least the following problems in the prior art:
针对方式一:在当版本迭代一段时间后,后期维护人员不得不面庞大的引入资源,而且还要熟悉各个引入资源所影响的功能范围,导致维护成本高、效率低下;Aiming at method 1: After a period of iteration of the version, the later maintainers have to deal with a huge amount of imported resources, and they must also be familiar with the functional scope affected by each imported resource, resulting in high maintenance costs and low efficiency;
针对方式二:大多数页面都会引入了一些与当前界面无关的资源,加大网络开销;For method 2: Most pages will introduce some resources unrelated to the current interface, increasing network overhead;
针对方式三:需要在开发各个模块的同时手工在页面上引入依赖的CSS资源。而不再使用该模块时,还需要手工删除这个CSS资源文件,增加维护成本。For method 3: You need to manually introduce dependent CSS resources on the page while developing each module. When the module is no longer used, the CSS resource file needs to be deleted manually, which increases the maintenance cost.
发明内容SUMMARY OF THE INVENTION
有鉴于此,本发明实施例提供一种前端模块加载方法和装置,使用模块的配置属性信息来分析其依赖资源,从而自动加载所需资源,实现减少维护成本及界面模块化开发的目的,网络开销小、效率高。In view of this, embodiments of the present invention provide a front-end module loading method and device, which uses the configuration attribute information of the module to analyze its dependent resources, so as to automatically load the required resources, and achieve the purpose of reducing maintenance costs and modularized development of interfaces. Low overhead and high efficiency.
根据本发明实施例的一个方面,提供了一种前端模块加载方法。According to an aspect of the embodiments of the present invention, a front-end module loading method is provided.
根据本发明实施例的前端模块加载方法包括:The front-end module loading method according to the embodiment of the present invention includes:
获取待加载模块的模块标识和配置属性信息;Obtain the module identifier and configuration attribute information of the module to be loaded;
根据模块标识确定待加载模块的模块资源,根据配置属性信息确定待加载模块的依赖资源;Determine the module resources of the module to be loaded according to the module identifier, and determine the dependent resources of the module to be loaded according to the configuration attribute information;
加载待加载模块的模块资源和依赖资源;Load the module resources and dependent resources of the module to be loaded;
其中,模块资源是指:脚本资源,或者,脚本资源和层叠样式表资源;待加载模块的依赖资源是指待加载模块的依赖模块和依赖待加载模块的扩展模块。The module resources refer to: script resources, or script resources and cascading style sheet resources; the dependent resources of the module to be loaded refer to the dependent modules of the to-be-loaded module and the extension modules that depend on the to-be-loaded module.
可选地,配置属性信息包括:待加载模块的依赖模块标识、待加载模块的扩展模块标识;Optionally, the configuration attribute information includes: a dependent module identifier of the module to be loaded, and an extension module identifier of the module to be loaded;
根据配置属性信息确定所述待加载模块的依赖资源,包括:根据待加载模块的依赖模块标识确定待加载模块的依赖模块,根据待加载模块的扩展模块标识确定待加载模块的扩展模块。Determining the dependent resources of the module to be loaded according to the configuration attribute information includes: determining the dependent module of the module to be loaded according to the dependent module identifier of the module to be loaded, and determining the extension module of the module to be loaded according to the extension module ID of the module to be loaded.
可选地,按照如下步骤加载待加载模块的依赖资源:Optionally, load the dependent resources of the module to be loaded according to the following steps:
首先获取待加载模块的依赖模块,待待加载模块的所有依赖模块获取完毕之后获取待加载模块的扩展模块;依次将获取的依赖模块和扩展模块作为一个元素,确认该元素是否存在于依赖资源集中;若存在,将依赖资源集中的该元素移动至依赖资源集的首位,否则,将该元素放入依赖资源集的首位;其中,初始时依赖资源集为空集。First obtain the dependent modules of the module to be loaded, and after all dependent modules of the module to be loaded are obtained, obtain the extension modules of the module to be loaded; take the obtained dependent modules and extension modules as an element in turn to confirm whether the element exists in the set of dependent resources ; If it exists, move the element in the dependent resource set to the first position of the dependent resource set, otherwise, put the element in the first position of the dependent resource set; wherein, the dependent resource set is an empty set initially.
可选地,加载待加载模块的模块资源和依赖资源之后,还包括:合并和压缩待加载模块的模块资源和依赖资源。Optionally, after loading the module resources and dependent resources of the module to be loaded, the method further includes: merging and compressing the module resources and dependent resources of the module to be loaded.
根据本发明实施例的一个方面,提供了一种前端模块加载装置。According to an aspect of the embodiments of the present invention, a front-end module loading apparatus is provided.
根据本发明实施例的前端模块加载装置包括:The front-end module loading apparatus according to the embodiment of the present invention includes:
模块管理单元,获取待加载模块的模块标识和配置属性信息;根据模块标识确定待加载模块的模块资源,根据配置属性信息确定待加载模块的依赖资源;The module management unit obtains the module identification and configuration attribute information of the module to be loaded; determines the module resources of the module to be loaded according to the module identification, and determines the dependent resources of the module to be loaded according to the configuration attribute information;
资源管理单元,加载待加载模块的模块资源和依赖资源;The resource management unit loads the module resources and dependent resources of the module to be loaded;
其中,模块资源是指:脚本资源,或者,脚本资源和层叠样式表资源;待加载模块的依赖资源是指待加载模块的依赖模块和依赖待加载模块的扩展模块。The module resources refer to: script resources, or script resources and cascading style sheet resources; the dependent resources of the module to be loaded refer to the dependent modules of the to-be-loaded module and the extension modules that depend on the to-be-loaded module.
可选地,配置属性信息包括:待加载模块的依赖模块标识、待加载模块的扩展模块标识;Optionally, the configuration attribute information includes: a dependent module identifier of the module to be loaded, and an extension module identifier of the module to be loaded;
模块管理单元根据述配置属性信息确定待加载模块的依赖资源,包括:根据待加载模块的依赖模块标识确定待加载模块的依赖模块,根据待加载模块的扩展模块标识确定待加载模块的扩展模块。The module management unit determines the dependent resources of the module to be loaded according to the configuration attribute information, including: determining the dependent module of the module to be loaded according to the dependent module identifier of the module to be loaded, and determining the extension module of the module to be loaded according to the extension module ID of the module to be loaded.
可选地,资源管理单元按照如下步骤加载待加载模块的依赖资源:Optionally, the resource management unit loads the dependent resources of the module to be loaded according to the following steps:
首先获取待加载模块的依赖模块,待待加载模块的所有依赖模块获取完毕之后获取待加载模块的扩展模块;依次将获取的依赖模块和扩展模块作为一个元素,确认该元素是否存在于依赖资源集中;若存在,将依赖资源集中的该元素移动至依赖资源集的首位,否则,将该元素放入依赖资源集的首位;其中,初始时依赖资源集为空集。First obtain the dependent modules of the module to be loaded, and after all dependent modules of the module to be loaded are obtained, obtain the extension modules of the module to be loaded; take the obtained dependent modules and extension modules as an element in turn to confirm whether the element exists in the set of dependent resources ; If it exists, move the element in the dependent resource set to the first position of the dependent resource set, otherwise, put the element in the first position of the dependent resource set; wherein, the dependent resource set is an empty set initially.
可选地,本发明实施例的前端模块加载装置还包括:打包单元,用于在资源管理单元加载待加载模块的模块资源和依赖资源之后,合并和压缩待加载模块的模块资源和依赖资源。Optionally, the front-end module loading apparatus in the embodiment of the present invention further includes: a packaging unit, configured to combine and compress the module resources and dependent resources of the module to be loaded after the resource management unit loads the module resources and dependent resources of the module to be loaded.
根据本发明实施例的另一个方面,提供了一种前端模块加载电子设备。According to another aspect of the embodiments of the present invention, a front-end module loading electronic device is provided.
根据本发明实施例的前端模块加载电子设备,包括:The front-end module loading electronic device according to the embodiment of the present invention includes:
一个或多个处理器;one or more processors;
存储装置,用于存储一个或多个程序,storage means for storing one or more programs,
当该一个或多个程序被该一个或多个处理器执行,使得该一个或多个处理器实现本发明实施例第一方面提供的前端模块加载方法。When the one or more programs are executed by the one or more processors, the one or more processors implement the front-end module loading method provided by the first aspect of the embodiments of the present invention.
根据本发明实施例的还一个方面,提供了一种计算机可读介质。According to yet another aspect of the embodiments of the present invention, a computer-readable medium is provided.
根据本发明实施例的计算机可读介质,其上存储有计算机程序,该程序被处理器执行时实现本发明实施例第一方面提供的前端模块加载方法。According to the computer-readable medium of the embodiment of the present invention, a computer program is stored thereon, and when the program is executed by the processor, the front-end module loading method provided by the first aspect of the embodiment of the present invention is implemented.
上述发明中的一个实施例具有如下优点或有益效果:使用模块的配置属性信息来分析其依赖资源,从而自动加载所需资源,实现减少维护成本及界面模块化开发的目的,网络开销小、效率高。An embodiment of the above invention has the following advantages or beneficial effects: using the configuration attribute information of the module to analyze its dependent resources, thereby automatically loading the required resources, realizing the purpose of reducing maintenance costs and modular development of interfaces, with low network overhead and high efficiency high.
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。Further effects of the above non-conventional alternatives will be described below in conjunction with specific embodiments.
附图说明Description of drawings
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:The accompanying drawings are used for better understanding of the present invention and do not constitute an improper limitation of the present invention. in:
图1是根据本发明实施例的前端模块加载方法的主要流程的示意图;1 is a schematic diagram of a main process of a front-end module loading method according to an embodiment of the present invention;
图2是根据本发明可选实施例的前端模块加载方法的主要流程的示意图;2 is a schematic diagram of the main flow of a front-end module loading method according to an optional embodiment of the present invention;
图3是根据本发明实施例的前端模块加载装置的主要模块的示意图;3 is a schematic diagram of main modules of a front-end module loading device according to an embodiment of the present invention;
图4是本发明实施例可以应用于其中的示例性系统架构图;4 is an exemplary system architecture diagram to which an embodiment of the present invention may be applied;
图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。FIG. 5 is a schematic structural diagram of a computer system suitable for implementing a terminal device or a server according to an embodiment of the present invention.
具体实施方式Detailed ways
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, which include various details of the embodiments of the present invention to facilitate understanding and should be considered as exemplary only. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted from the following description for clarity and conciseness.
根据本发明实施例的一个方面,提供了一种前端模块加载方法。According to an aspect of the embodiments of the present invention, a front-end module loading method is provided.
图1是根据本发明实施例的前端模块加载方法的主要流程的示意图。如图1所示,前端模块加载方法包括:步骤S101、步骤S102和步骤S103。FIG. 1 is a schematic diagram of a main flow of a front-end module loading method according to an embodiment of the present invention. As shown in FIG. 1 , the front-end module loading method includes: step S101 , step S102 and step S103 .
步骤S101、获取待加载模块的模块标识和配置属性信息。模块标识用于唯一标识一个模块。配置属性信息是模块注册时配置的信息。Step S101 , acquiring the module identifier and configuration attribute information of the module to be loaded. The module ID is used to uniquely identify a module. The configuration attribute information is the information configured when the module is registered.
步骤S102、根据模块标识确定待加载模块的模块资源,根据配置属性信息确定待加载模块的依赖资源。其中,模块资源是指:脚本资源,或者,脚本资源和层叠样式表资源;待加载模块的依赖资源是指待加载模块的依赖模块和依赖待加载模块的扩展模块。Step S102: Determine the module resources of the module to be loaded according to the module identifier, and determine the dependent resources of the module to be loaded according to the configuration attribute information. The module resources refer to: script resources, or script resources and cascading style sheet resources; the dependent resources of the module to be loaded refer to the dependent modules of the to-be-loaded module and the extension modules that depend on the to-be-loaded module.
前端模块往往都分成模块本身JS文件、模块本身依赖CSS文件和模块依赖这三种资源。JS是Javascript的缩写,是一种脚本语言。JS文件主要用于网页的特效、功能的脚本编程。CSS是Cascading Style Sheet的缩写,即层叠样式表单,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS文件不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。模块依赖资源设置依赖该模块的资源,以及该模块依赖的资源。例如,模块A加载过程中调用了模块B的接口,则模块A依赖模块B,模块A是模块B的扩展模块,模块B是模块A的依赖模块。如果模块A依赖模块B,而模块B需要依赖模块C和D,则在加载模块A时需要将模块B、C、D同时加载。Front-end modules are often divided into three types of resources: the JS file of the module itself, the CSS file that the module itself depends on, and the module dependency. JS, short for Javascript, is a scripting language. JS files are mainly used for script programming of special effects and functions of web pages. CSS, short for Cascading Style Sheet, is a markup language used to control web page styles and allow the separation of style information from web page content. CSS files can not only modify web pages statically, but also dynamically format various elements of web pages with various scripting languages. A module-dependent resource setting depends on the resources of this module, and the resources that this module depends on. For example, if the interface of module B is called during the loading process of module A, then module A depends on module B, module A is an extension module of module B, and module B is a dependent module of module A. If module A depends on module B, and module B needs to depend on modules C and D, then when module A is loaded, modules B, C, and D need to be loaded at the same time.
步骤S103、加载待加载模块的模块资源和依赖资源。Step S103: Load module resources and dependent resources of the module to be loaded.
使用模块的配置属性信息来分析其依赖资源,从而自动加载所需资源,实现减少维护成本及界面模块化开发的目的。本发明实施例仅加载所需资源,不会引入与当前界面无关的资源,因此网络开销小。各个所需资源可以自动加载,无需维护人员过多参与,维护效率高。Use the configuration attribute information of the module to analyze its dependent resources, so as to automatically load the required resources, reduce maintenance costs and achieve the purpose of modular development of the interface. In the embodiment of the present invention, only required resources are loaded, and resources irrelevant to the current interface are not introduced, so the network overhead is small. All required resources can be loaded automatically, without the need for maintenance personnel to participate too much, and the maintenance efficiency is high.
在一些实施例中,配置属性信息包括:待加载模块的依赖模块标识、待加载模块的扩展模块标识;根据配置属性信息确定所述待加载模块的依赖资源,包括:根据待加载模块的依赖模块标识确定待加载模块的依赖模块,根据待加载模块的扩展模块标识确定待加载模块的扩展模块。采用标识识别确定对应的模块,效率高,操作简单。In some embodiments, the configuration attribute information includes: a dependent module identifier of the module to be loaded and an extension module identifier of the module to be loaded; determining the dependent resources of the module to be loaded according to the configuration attribute information includes: according to the dependent module of the module to be loaded The identifier determines the dependent module of the module to be loaded, and determines the extension module of the module to be loaded according to the extension module identifier of the module to be loaded. The identification identification is used to determine the corresponding module, which has high efficiency and simple operation.
待加载模块与依赖模块的依赖强度大于其与扩展模块之间的依赖强度。基于此,可以按照如下步骤加载待加载模块的依赖资源:首先获取待加载模块的依赖模块,待待加载模块的所有依赖模块获取完毕之后获取待加载模块的扩展模块;依次将获取的依赖模块和扩展模块作为一个元素,确认该元素是否存在于依赖资源集中;若存在,将依赖资源集中的该元素移动至依赖资源集的首位,否则,将该元素放入依赖资源集的首位;其中,初始时依赖资源集为空集。The dependency strength between the to-be-loaded module and the dependent module is greater than the dependency strength between the module to be loaded and the extension module. Based on this, the dependent resources of the module to be loaded can be loaded according to the following steps: first, the dependent modules of the module to be loaded are obtained, and after all the dependent modules of the module to be loaded are obtained, the extension modules of the module to be loaded are obtained; the obtained dependent modules and The extension module is used as an element to confirm whether the element exists in the dependent resource set; if it exists, move the element in the dependent resource set to the top of the dependent resource set, otherwise, put the element in the top of the dependent resource set; among them, the initial When the dependent resource set is an empty set.
例如,初始时依赖资源集为空集,获取第一个依赖模块C1之后,将依赖模块放入依赖资源集中,得到集合{依赖模块C1};获取到第二个依赖模块C2之后,由于依赖模块C2不存在于依赖资源集{依赖模块C1}中,因此将依赖模块C2放入依赖资源集的首位,得到集合{依赖模块C2,依赖模块C1};获取到第三个依赖模块C3之后,由于依赖模块C3不存在于依赖资源集{依赖模块C2,依赖模块C1}中,因此将依赖模块C3放入依赖资源集的首位,得到集合{依赖模块C3,依赖模块C2,依赖模块C1};假设获取到的第四个依赖模块为C1,由于依赖模块C1存在于依赖资源集{依赖模块C3,依赖模块C2,依赖模块C1}中,因此将依赖资源集中的元素依赖模块C1放入依赖资源集的首位,得到集合{依赖模块C1,依赖模块C3,依赖模块C2};以此类推,直至将所有的依赖资源都放入依赖资源集中。For example, initially, the set of dependent resources is an empty set. After obtaining the first dependent module C1, put the dependent modules into the set of dependent resources to obtain the set {dependency module C1}; after obtaining the second dependent module C2, due to the dependency module C2 does not exist in the dependent resource set {dependent module C1}, so put the dependent module C2 in the first place of the dependent resource set, and get the set {dependent module C2, dependent module C1}; after obtaining the third dependent module C3, because The dependent module C3 does not exist in the dependent resource set {dependent module C2, dependent module C1}, so put the dependent module C3 in the first place of the dependent resource set, and get the set {dependent module C3, dependent module C2, dependent module C1}; suppose The obtained fourth dependency module is C1. Since the dependency module C1 exists in the dependency resource set {dependency module C3, dependency module C2, dependency module C1}, the element dependency module C1 in the dependency resource set is put into the dependency resource set First, get the set {dependent module C1, dependent module C3, dependent module C2}; and so on, until all dependent resources are put into the dependent resource set.
根据模块之间的依赖关系的强度来决定合并时候的顺序,便于后续加载和提高用户体验。The order of merging is determined according to the strength of the dependencies between modules, which facilitates subsequent loading and improves user experience.
加载待加载模块的模块资源和依赖资源之后,还可以包括:合并和压缩待加载模块的模块资源和依赖资源。例如将多个相同类型的资源文件(如:JS文件)合并为一个文件。如此能够减少网络连接次数,降低网络开销。After loading the module resources and dependent resources of the module to be loaded, the method may further include: merging and compressing the module resources and dependent resources of the module to be loaded. For example, combine multiple resource files of the same type (eg, JS files) into one file. This can reduce the number of network connections and reduce network overhead.
图2是根据本发明可选实施例的前端模块加载方法的主要流程的示意图。以下结合图2对前端模块加载方法进行示例性说明。FIG. 2 is a schematic diagram of a main flow of a front-end module loading method according to an optional embodiment of the present invention. The front-end module loading method will be exemplarily described below with reference to FIG. 2 .
图2中,“页面上下文”负责保存模块创建时的页面地址,以及模块的配置属性信息等;“模块管理器”负责接收模块请求,确定待加载模块所需的资源。“资源管理器”负责从服务器加载指定资源,当发现所要加载资源已经被加载过时,不会进行二次加载。“模块打包工具”负责根据模块依赖关系强度,将这个模块所需的所有文件进行合并和压缩。具体流程包括:In Figure 2, the "page context" is responsible for saving the page address when the module is created, as well as the configuration attribute information of the module, etc.; the "module manager" is responsible for receiving module requests and determining the resources required by the module to be loaded. The "Resource Manager" is responsible for loading the specified resource from the server. When it is found that the resource to be loaded has already been loaded, it will not be loaded again. The "module bundler" is responsible for merging and compressing all files required by this module according to the strength of the module's dependencies. The specific process includes:
1.当前端请求一个模块时,调用“模块管理器”。“模块管理器”判断待加载模块是否已经加载,若已经加载则“资源管理器”直接返回已经加载的资源,流程结束;否则“资源管理器”加载该待加载模块的脚本资源;1. When the front end requests a module, the "module manager" is called. The "Module Manager" judges whether the module to be loaded has been loaded. If it has been loaded, the "Resource Manager" directly returns the loaded resource, and the process ends; otherwise, the "Resource Manager" loads the script resource of the module to be loaded;
2.“模块管理器”判断是否需要加载该待加载模块的层叠样式表资源,若需要则“资源管理器”加载层叠样式表资源,否则进入下一步;2. The "Module Manager" judges whether it is necessary to load the Cascading Style Sheet resources of the module to be loaded, if necessary, the "Resource Manager" loads the Cascading Style Sheet resources, otherwise, go to the next step;
3.“模块管理器”根据模块的配置属性信息分析其依赖资源,若有则“资源管理器”加载依赖资源,然后结束流程;否则直接结束流程;3. The "Module Manager" analyzes its dependent resources according to the configuration attribute information of the module. If there is, the "Resource Manager" loads the dependent resources, and then ends the process; otherwise, the process ends directly;
4.“模块打包工具”负责根据模块依赖关系强度,将这个模块所需的所有文件进行合并和压缩,然后返回至前端。4. The "module packaging tool" is responsible for merging and compressing all the files required by this module according to the strength of the module's dependencies, and then returning it to the front end.
根据本发明实施例的一个方面,提供了一种前端模块加载装置。According to an aspect of the embodiments of the present invention, a front-end module loading apparatus is provided.
图3是根据本发明实施例的前端模块加载装置的主要模块的示意图。如图3所示,根据本发明实施例的前端模块加载装置300包括:FIG. 3 is a schematic diagram of main modules of a front-end module loading apparatus according to an embodiment of the present invention. As shown in FIG. 3 , a front-end
模块管理单元301,获取待加载模块的模块标识和配置属性信息;根据模块标识确定待加载模块的模块资源,根据配置属性信息确定待加载模块的依赖资源;The
资源管理单元302,加载待加载模块的模块资源和依赖资源;
其中,模块资源是指:脚本资源,或者,脚本资源和层叠样式表资源;待加载模块的依赖资源是指待加载模块的依赖模块和依赖待加载模块的扩展模块。The module resources refer to: script resources, or script resources and cascading style sheet resources; the dependent resources of the module to be loaded refer to the dependent modules of the to-be-loaded module and the extension modules that depend on the to-be-loaded module.
可选地,配置属性信息包括:待加载模块的依赖模块标识、待加载模块的扩展模块标识;Optionally, the configuration attribute information includes: a dependent module identifier of the module to be loaded, and an extension module identifier of the module to be loaded;
模块管理单元根据述配置属性信息确定待加载模块的依赖资源,包括:根据待加载模块的依赖模块标识确定待加载模块的依赖模块,根据待加载模块的扩展模块标识确定待加载模块的扩展模块。The module management unit determines the dependent resources of the module to be loaded according to the configuration attribute information, including: determining the dependent module of the module to be loaded according to the dependent module identifier of the module to be loaded, and determining the extension module of the module to be loaded according to the extension module ID of the module to be loaded.
可选地,资源管理单元按照如下步骤加载待加载模块的依赖资源:Optionally, the resource management unit loads the dependent resources of the module to be loaded according to the following steps:
首先获取待加载模块的依赖模块,待待加载模块的所有依赖模块获取完毕之后获取待加载模块的扩展模块;依次将获取的依赖模块和扩展模块作为一个元素,确认该元素是否存在于依赖资源集中;若存在,将依赖资源集中的该元素移动至依赖资源集的首位,否则,将该元素放入依赖资源集的首位;其中,初始时依赖资源集为空集。First obtain the dependent modules of the module to be loaded, and after all dependent modules of the module to be loaded are obtained, obtain the extension modules of the module to be loaded; take the obtained dependent modules and extension modules as an element in turn to confirm whether the element exists in the set of dependent resources ; If it exists, move the element in the dependent resource set to the first position of the dependent resource set, otherwise, put the element in the first position of the dependent resource set; wherein, the dependent resource set is an empty set initially.
可选地,本发明实施例的前端模块加载装置还包括:打包单元(图中未示出),用于在资源管理单元加载待加载模块的模块资源和依赖资源之后,合并和压缩待加载模块的模块资源和依赖资源。Optionally, the front-end module loading apparatus according to the embodiment of the present invention further includes: a packaging unit (not shown in the figure), configured to combine and compress the module to be loaded after the resource management unit loads the module resources and dependent resources of the module to be loaded. module resources and dependent resources.
根据本发明实施例的另一个方面,提供了一种前端模块加载电子设备。According to another aspect of the embodiments of the present invention, a front-end module loading electronic device is provided.
根据本发明实施例的前端模块加载电子设备,包括:The front-end module loading electronic device according to the embodiment of the present invention includes:
一个或多个处理器;one or more processors;
存储装置,用于存储一个或多个程序,storage means for storing one or more programs,
当该一个或多个程序被该一个或多个处理器执行,使得该一个或多个处理器实现本发明实施例第一方面提供的前端模块加载方法。When the one or more programs are executed by the one or more processors, the one or more processors implement the front-end module loading method provided by the first aspect of the embodiments of the present invention.
图4示出了可以应用本发明实施例的前端模块加载方法或前端模块加载装置的示例性系统架构400。FIG. 4 shows an exemplary system architecture 400 to which a front-end module loading method or a front-end module loading apparatus according to an embodiment of the present invention can be applied.
如图4所示,系统架构400可以包括终端设备401、402、403,网络404和服务器305。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。As shown in FIG. 4 , the system architecture 400 may include terminal devices 401 , 402 , and 403 , a network 404 and a server 305 . The network 404 is a medium used to provide a communication link between the terminal devices 401 , 402 , 403 and the server 405 . The network 404 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
用户可以使用终端设备401、402、403通过网络404与服务器405交互,以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用,例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。The user can use the terminal devices 401, 402, 403 to interact with the server 405 through the network 404 to receive or send messages and the like. Various communication client applications may be installed on the terminal devices 401 , 402 and 403 , such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only examples).
终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。The terminal devices 401, 402, 403 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, desktop computers, and the like.
服务器405可以是提供各种服务的服务器,例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理,并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。The server 405 may be a server that provides various services, for example, a background management server that provides support for shopping websites browsed by the terminal devices 401 , 402 , and 403 (just an example). The background management server can analyze and process the received product information query request and other data, and feed back the processing results (such as target push information, product information—just an example) to the terminal device.
需要说明的是,本发明实施例所提供的前端模块加载方法一般由服务器405执行,相应地,前端模块加载装置一般设置于服务器405中。It should be noted that the front-end module loading method provided in the embodiment of the present invention is generally executed by the server 405 , and accordingly, the front-end module loading apparatus is generally set in the server 405 .
应该理解,图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。It should be understood that the numbers of terminal devices, networks and servers in FIG. 4 are merely illustrative. There can be any number of terminal devices, networks and servers according to implementation needs.
下面参考图5,其示出了适于用来实现本发明实施例的终端设备的计算机系统500的结构示意图。图5示出的终端设备仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。Referring to FIG. 5 below, it shows a schematic structural diagram of a
如图5所示,计算机系统500包括中央处理单元(CPU)501,其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中,还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。As shown in FIG. 5, a
以下部件连接至I/O接口505:包括键盘、鼠标等的输入部分506;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507;包括硬盘等的存储部分508;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器510上,以便于从其上读出的计算机程序根据需要被安装入存储部分508。The following components are connected to the I/O interface 505: an
特别地,根据本发明公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分509从网络上被下载和安装,和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时,执行本发明的系统中限定的上述功能。In particular, the processes described above with reference to the flowcharts may be implemented as computer software programs in accordance with the disclosed embodiments of the present invention. For example, embodiments disclosed herein include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart. In such an embodiment, the computer program may be downloaded and installed from the network via the
需要说明的是,本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or a combination of any of the above. More specific examples of computer readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read only memory (ROM), erasable Programmable read only memory (EPROM or flash memory), fiber optics, portable compact disk read only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing. In the present invention, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, however, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device . Program code embodied on a computer readable medium may be transmitted using any suitable medium including, but not limited to, wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
附图中的流程图和框图,图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个单元、程序段、或代码的一部分,上述单元、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。The flowchart and block diagrams in the Figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a unit, segment, or portion of code that contains one or more functions for implementing the specified logical function(s) executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams or flowchart illustrations, and combinations of blocks in the block diagrams or flowchart illustrations, can be implemented in special purpose hardware-based systems that perform the specified functions or operations, or can be implemented using A combination of dedicated hardware and computer instructions is implemented.
描述于本发明实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括:模块管理单元,获取待加载模块的模块标识和配置属性信息;根据模块标识确定待加载模块的模块资源,根据配置属性信息确定所述待加载模块的依赖资源;资源管理单元,加载待加载模块的模块资源和依赖资源。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定,例如,模块管理单元还可以被描述为“加载待加载模块的模块资源和依赖资源的单元”。The units involved in the embodiments of the present invention may be implemented in a software manner, and may also be implemented in a hardware manner. The described unit can also be set in the processor. For example, it can be described as: a processor includes: a module management unit, which obtains the module identifier and configuration attribute information of the module to be loaded; and determines the module resource of the module to be loaded according to the module identifier. , determines the dependent resources of the module to be loaded according to the configuration attribute information; the resource management unit loads the module resources and dependent resources of the module to be loaded. Wherein, the names of these units do not constitute a limitation of the unit itself under certain circumstances. For example, the module management unit may also be described as "a unit that loads the module resources and dependent resources of the module to be loaded".
作为另一方面,本发明还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的设备中所包含的;也可以是单独存在,而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该设备执行时,使得该设备包括:获取所述待加载模块的模块标识和配置属性信息;根据所述模块标识确定所述待加载模块的模块资源,根据所述配置属性信息确定所述待加载模块的依赖资源;加载所述待加载模块的模块资源和依赖资源。As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or may exist alone without being assembled into the device. The above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by a device, the device includes: acquiring the module identifier and configuration attribute information of the module to be loaded; Identifying and determining the module resources of the module to be loaded, determining the dependent resources of the module to be loaded according to the configuration attribute information, and loading the module resources and dependent resources of the module to be loaded.
根据本发明实施例的技术方案,具有如下优点或有益效果:使用模块的配置属性信息来分析其依赖资源,从而自动加载所需资源,实现减少维护成本及界面模块化开发的目的,网络开销小、效率高。The technical solution according to the embodiment of the present invention has the following advantages or beneficial effects: the configuration attribute information of the module is used to analyze its dependent resources, so as to automatically load the required resources, achieve the purpose of reducing maintenance costs and modularized development of the interface, and the network overhead is small. ,efficient.
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。The above-mentioned specific embodiments do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent replacements and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.
Claims (10)
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810923025.7A CN110858240A (en) | 2018-08-14 | 2018-08-14 | Front-end module loading method and device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810923025.7A CN110858240A (en) | 2018-08-14 | 2018-08-14 | Front-end module loading method and device |
Publications (1)
Publication Number | Publication Date |
---|---|
CN110858240A true CN110858240A (en) | 2020-03-03 |
Family
ID=69634781
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810923025.7A Pending CN110858240A (en) | 2018-08-14 | 2018-08-14 | Front-end module loading method and device |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110858240A (en) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113608742A (en) * | 2021-07-08 | 2021-11-05 | 阿里巴巴新加坡控股有限公司 | Detection method, code packet processing method, operation control method and computing device |
WO2024207832A1 (en) * | 2023-12-12 | 2024-10-10 | 天翼云科技有限公司 | Front-end resource loading optimization method and apparatus based on data driving |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102799640A (en) * | 2012-06-27 | 2012-11-28 | 用友软件股份有限公司 | Page loading device and page loading method |
CN104965848A (en) * | 2015-02-12 | 2015-10-07 | 腾讯科技(深圳)有限公司 | Front-end resource loading method and apparatus |
CN105159686A (en) * | 2015-09-28 | 2015-12-16 | 北京奇虎科技有限公司 | Website page development method and apparatus |
CN105354049A (en) * | 2015-09-29 | 2016-02-24 | 北京畅游天下网络技术有限公司 | Resource loading method, apparatus and system for three-dimensional animation engine |
CN106020891A (en) * | 2016-05-25 | 2016-10-12 | 大唐网络有限公司 | Page loading method and device |
CN107704234A (en) * | 2017-08-22 | 2018-02-16 | 北京三快在线科技有限公司 | Front end engineering construction method, device, electronic equipment and readable storage medium storing program for executing |
-
2018
- 2018-08-14 CN CN201810923025.7A patent/CN110858240A/en active Pending
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102799640A (en) * | 2012-06-27 | 2012-11-28 | 用友软件股份有限公司 | Page loading device and page loading method |
CN104965848A (en) * | 2015-02-12 | 2015-10-07 | 腾讯科技(深圳)有限公司 | Front-end resource loading method and apparatus |
CN105159686A (en) * | 2015-09-28 | 2015-12-16 | 北京奇虎科技有限公司 | Website page development method and apparatus |
CN105354049A (en) * | 2015-09-29 | 2016-02-24 | 北京畅游天下网络技术有限公司 | Resource loading method, apparatus and system for three-dimensional animation engine |
CN106020891A (en) * | 2016-05-25 | 2016-10-12 | 大唐网络有限公司 | Page loading method and device |
CN107704234A (en) * | 2017-08-22 | 2018-02-16 | 北京三快在线科技有限公司 | Front end engineering construction method, device, electronic equipment and readable storage medium storing program for executing |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113608742A (en) * | 2021-07-08 | 2021-11-05 | 阿里巴巴新加坡控股有限公司 | Detection method, code packet processing method, operation control method and computing device |
WO2024207832A1 (en) * | 2023-12-12 | 2024-10-10 | 天翼云科技有限公司 | Front-end resource loading optimization method and apparatus based on data driving |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110019350B (en) | Data query method and device based on configuration information | |
CN110020329B (en) | Method, device and system for generating webpage | |
CN110795479A (en) | Method and device for distributed ETL scheduling based on data | |
CN109829121B (en) | Method and device for reporting click behavior data | |
CN112948138B (en) | A method and device for processing messages | |
CN113010405B (en) | A method and device for testing an application program | |
WO2019029451A1 (en) | Method for publishing mobile applications and electronic apparatus | |
CN110888639A (en) | Business code compiling and packaging method and device | |
CN112486482A (en) | Page display method and device | |
CN110647327A (en) | Method and device for dynamic control of user interface based on card | |
CN111753226A (en) | A page loading method and device | |
CN112784195B (en) | A method and system for publishing page data | |
CN110806967A (en) | A unit testing method and apparatus | |
CN111831536B (en) | Automated testing method and device | |
CN111427899A (en) | Method, device, equipment and computer readable medium for storing file | |
CN110858240A (en) | Front-end module loading method and device | |
CN113283991A (en) | Processing method and device for transaction data on block chain | |
CN116561013B (en) | Test methods, devices, electronic equipment and media based on the target service framework | |
CN112181937A (en) | Data transmission method and device | |
CN111767498A (en) | Method and device for realizing file information sharing | |
CN112148762A (en) | Statistical method and device for real-time data flow | |
CN110874302A (en) | A method and device for determining buried point configuration information | |
CN110909269B (en) | Log reporting method and device | |
CN113132447A (en) | Reverse proxy method and system | |
CN113761039B (en) | A method and device for processing information |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200303 |