CN114003307A - 基于umd模式的动态组件加载注册方法、装置、设备及介质 - Google Patents
基于umd模式的动态组件加载注册方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN114003307A CN114003307A CN202111265068.9A CN202111265068A CN114003307A CN 114003307 A CN114003307 A CN 114003307A CN 202111265068 A CN202111265068 A CN 202111265068A CN 114003307 A CN114003307 A CN 114003307A
- Authority
- CN
- China
- Prior art keywords
- component
- vue
- global
- instance
- dynamic
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000004806 packaging method and process Methods 0.000 claims abstract description 20
- 238000002347 injection Methods 0.000 claims abstract description 13
- 239000007924 injection Substances 0.000 claims abstract description 13
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008569 process Effects 0.000 claims description 11
- 238000012544 monitoring process Methods 0.000 claims description 5
- 230000007246 mechanism Effects 0.000 claims description 4
- 230000004044 response Effects 0.000 claims description 4
- 238000013461 design Methods 0.000 abstract description 3
- 238000012545 processing Methods 0.000 description 6
- 230000002708 enhancing effect Effects 0.000 description 5
- 230000001360 synchronised effect Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
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
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本申请涉及前端设计技术领域，揭示了一种基于UMD模式的动态组件加载注册方法、装置、设备及介质，其中方法包括：根据内容分发网络地址将进行UMD格式打包得到的Vue组件发布至内容分发网络；通过内容分发网络动态加载Vue组件中的脚本代码，将需注册的Vue实例的选择对象挂载至全局窗口；在触发事件订阅发布后，获取当前全局窗口挂载的Vue实例的选择对象；通过注册动态组件创建Vue实例并注册至当前全局组件，改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口对应标识的动态组件上。本申请无须在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入方式加载动态组件，实现组件动态化的加载和注册。
Description
技术领域
本申请涉及到前端设计技术领域，特别是涉及到一种基于UMD模式的动态组件加载注册方法、装置、设备及介质。
背景技术
现有的Vue组件注册方式主要分为全局注册方式和局部注册组件方式，在全局注册方式中，Vue的全局组件必须在根Vue实例创建之前加载，并且一旦根Vue实例创建完成后就无法通过Vue组件注册全局组件；而在局部注册组件方式中，必须通过Vue对象中的组件模块注册局部组件，且在注册组件前必须先引入需要注册的组件和事先知道需要注册的组件的名称。综上所述，现有组件注册方式在组件注册前工作量大和局限性较高的缺陷，导致组件注册成本较高的同时注册效率较低，并且需要在根Vue实例初始化前注入Vue组件，在组件需要更新时无法选择性升级，复用性较差。
发明内容
本申请的主要目的为提供一种基于UMD模式的动态组件加载注册方法、装置、设备及介质，旨在解决现有组件注册方式在组件注册前受限于各种条件和工作量大，造成注册成本较高的同时注册效率低下，且注册的组件复用性较差的问题。
为了实现上述发明目的，本申请实施例的第一方面提出一种基于UMD模式的动态组件加载注册方法，所述方法包括：
采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
进一步地，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之中，还包括：
通过事件监听响应机制在已注册的全局组件的父级容器上进行错误拦截，捕获所有已注册的全局组件的错误状态信息，并根据错误状态信息清除对应的已注册的全局组件的进程状态。
进一步地，所述通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，具体为：
通过配置文件的脚本代码在文档对象模型中创建客户端脚本标签并设置外部资源位置，对所述Vue组件中的脚本代码进行注入和加载至内容分发网络；
通过配置文件的层叠样式表在文档对象模型中创建链接标签并设置链接样式表，对所述Vue组件中的链接样式表进行注入和加载至内容分发网络；
在完成注入和加载后，将所述Vue组件中对应的所需注册的Vue实例的选择对象挂载至全局窗口下。
进一步地，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之后，还包括：
根据动态组件的网页内容模板生成虚拟节点，将虚拟节点转化为真实节点；
将根据所述选择对象创建的Vue实例按照真实节点插入至文档对象模型，展示至网页页面。
进一步地，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之后，还包括：
在发布新版本动态组件后，根据动态组件新版本地址更新对应的内容分发网络地址，获取更新后的内容分发网络地址，下载新版本动态组件对应的脚本代码并进行脚本执行，完成动态组件的更新。
进一步地，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤，具体为：
从当前窗口下获取需要注册的Vue实例的选择对象，通过所述当前注册动态组件按照全局注册方式根据所述选择对象创建对应的Vue实例；
将创建的Vue实例注册至当前全局组件，并改变当前全局组件需要显示的组件名称；
根据用户当前操作所在组件的名称将所述创建的Vue实例挂载至对应的动态组件上。
进一步地，所述触发事件的订阅发布方式为：
通过对Vue组件的上一级进行事件队列监听，收集每次加载动态组件后的事件触发信息。
本申请实施例的第二方面还提出了一种基于UMD模式的动态组件加载注册装置，包括：
组件打包模块，用于采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
对象挂载模块，用于通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
实例获取模块，用于在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
加载注册模块，用于通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
本申请实施例的第三方面还提出了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
本申请实施例的第四方面还提出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
本申请的基于UMD模式的动态组件加载注册方法、装置、设备及介质，采用模块打包器对目标组件进行UMD格式打包，可以运行在nodejs和浏览器两种平台，从而能够有效在UMD模式下对组件进行后续的加载和注册处理，提高组件动态化的效率；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，提高Vue实例挂载至全局窗口下的速度和兼容性，并且通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性；在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象，在Vue实例的上一级发布订阅，获得所有加载的动态组件，提高动态组件的加载效率；将创建的若干个子Vue实例注册到当前全局组件上，通过字符串在全局所有的组件中匹配注册过的组件，将创建的子Vue实例挂载至匹配得到的对应标识的动态组件，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根Vue实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高注册加载的效率。
附图说明
图1为本申请一实施例的基于UMD模式的动态组件加载注册方法的流程示意图；
图2为本申请一实施例的基于UMD模式的动态组件加载注册装置的结构示意框图；
图3为本申请一实施例的计算机设备的结构示意框图。
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
参照图1，本申请实施例中提供一种为了实现上述发明目的，本申请提出一种基于UMD模式的动态组件加载注册方法，所述方法包括：
S1、采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
S2、通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
S3、在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
S4、通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
本申请应用于前端开发，主要关注如何动态加载和注册Vue组件，Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue.js的出现降低了前端学习和使用难度，让前端开发能更加地简洁、高效。目前的现有全局注册方式，Vue全局组件加载必须在根Vue实例穿件之前，一旦根实例创建完成之后，就无法通过Vue.Component注册全局组件，其流程并不便利，造成组件注册工作量大，无形之中增加了开发的成本，也不利于提高开发的效率。本实施例采用模块打包器对目标组件进行UMD格式打包，可以运行在nodejs和浏览器两种平台，从而能够有效在UMD模式下对组件进行后续的加载和注册处理，提高组件动态化的效率；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，提高Vue实例挂载至全局窗口下的速度和兼容性，并且通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性；在触发事件订阅发布后，向上广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象，在Vue实例的上一级发布订阅，获得所有加载的动态组件，提高动态组件的加载效率；将创建的若干个子Vue实例注册到当前全局组件上，通过字符串在全局所有的组件中匹配注册过的组件，将创建的子Vue实例挂载至匹配得到的对应标识的动态组件，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高注册加载的效率。
对于步骤S1，本实施例首先采用模块打包器(如Webpack)对目标Vue组件进行UMD(Universal Module Definition，通用模块定义规范)格式的打包处理，首先需要全局安装webpack，通过webpack来build目标模块，设置注册目标对象为lib模式，再设置动态组件的版本，版本格式为(x.y.z)，最后根据组件名称及动态组件当前版本，创建各个组件对应的内容分发网络地址，通过webpack用来build基于浏览器或服务端的包，从而完成UMD格式的打包；在静态服务器上创建文件目录，根据组件名创建文件夹，根据版本号生成子文件夹，这一步骤主要用于多版本工程和历史留档；根据创建的内容分发网络地址将打包后的Vue组件发布至内容分发网络中的具体位置。通过对Vue组件进行UMD格式的打包处理，本申请中的UMD格式指的是与UMD模式适配的一种编码格式，UMD格式是兼容AMD(CommonJS异步加载，用于NodeJS)和ESM(ES Module，用于浏览器加载)两种模式的兼容格式，可以运行在nodejs和浏览器两种平台。而UMD(Universal Module Definition)模式指的是一种通用模块规范，能够兼容AMD和CommonJS两种模式，AMD模块以浏览器第一的原则发展，属于异步加载模块。CommonJS模块以服务器第一原则发展，属于选择同步加载，它的模块无需包装(unwrapped modules)。UMD模式先判断是否支持Node.js的模块(exports)是否存在，存在则使用Node.js模块模式；再判断是否支持AMD(define是否存在)，存在则使用AMD方式加载模块；从而能够有效在UMD模式下对组件进行后续的加载和注册处理，提高组件动态化的效率。
对于步骤S2，本实施例在通过内容分发网络接收UMD格式的Vue组件后，通过内容分发网络(CDN，Content Delivery Network)动态加载UMD打包后的Vue组件的脚本(js，Javascript)代码，将Vue组件脚本中需要注册的Vue实例options对象挂载到全局window下，挂载方式为使用代码window.xxx＝options进行注册，由于js是动态语言，因此本实施例可以动态添加属性进行挂载，提高将注册Vue实例的options对象挂载至全局窗口下的速度和兼容性，并且通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性。
对于步骤S3，本实施例在全局窗口触发事件订阅发布后，向上广播当前注册动态组件config，通过递归的方式不停往上级寻找，直到找到根节点为止，从当前全局窗口获取Vue实例的options对象。其中，全局窗口的触发事件订阅发布主要使用订阅发布的设计模式进行触发，在触发后记录触发信息和各动态组件的加载状态。本实施例能够在Vue实例的上一级发布订阅，获得所有加载的动态组件，提高动态组件的加载效率。
对于步骤S4，本实施例在获取全局窗口加载的Vue实例的选择对象后，通过当前注册动态组件根据Vue实例的选择对象，通过Vue.extend方法创建一个对应的子Vue实例，构建Vue组件，同时将Vue组件的子组件注册到全局组件中；将创建的若干个子Vue实例注册到当前全局组件上，并改变当前需要显示组件的组件名称，最后通过字符串(当前全局组件名称)在全局所有的组件中匹配注册过的组件，将创建的子Vue实例挂载至匹配得到的对应标识的动态组件，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高动态组件注册加载的效率。
在一个实施例中，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤S4之中，还包括：
通过事件监听响应机制在已注册的全局组件的父级容器上进行错误拦截，捕获所有已注册的全局组件的错误状态信息，并根据错误状态信息清除对应的已注册的全局组件的进程状态。
在具体的实施例中，在通过内容分发网络动态加载UMD打包后的Vue组件脚本代码后，当触发时间订阅发布时，通过事件监听响应机制在已注册组件的父级容器上进行错误拦截，通过errorCaptured(错误捕捉)方法获取各个已注册组件的生命周期，捕获其错误状态，避免组件状态出现错误阻塞浏览器进程，从而提高动态组件加载和注册的可靠性和效率。
在一个实施例中，所述通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下的步骤S2，具体为：
通过配置文件的脚本代码在文档对象模型中创建客户端脚本标签并设置外部资源位置，对所述Vue组件中的脚本代码进行注入和加载至内容分发网络；
通过配置文件的层叠样式表在文档对象模型中创建链接标签并设置链接样式表，对所述Vue组件中的链接样式表进行注入和加载至内容分发网络；
在完成注入和加载后，将所述Vue组件中对应的所需注册的Vue实例的选择对象挂载至全局窗口下。
在具体的实施例中，通过内容分发网络动态加载所述Vue组件中的脚本代码，主要是通过config(配置文件)的js(脚本代码)在DOM(Document Object Model，文档对象模型)中创建script标签并设置src，其中src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素，从而进行Vue组件的注入和加载；通过config(配置文件)的css(Cascading Style Sheets，层叠样式表)在DOM中创建link标签并设置link,link标签定义文档与外部资源的关系，主要用途设置链接样式表，从而进行进行css注入和加载，在完成Vue组建的脚本代码和链接样式表的注入和加载后，再将需要注册的Vue实例options对象挂载至全局窗口下，从而在Vue实例上通过注入的方式加载动态组件，通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性。
在一个实施例中，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤S4之后，还包括：
根据动态组件的网页内容模板生成虚拟节点，将虚拟节点转化为真实节点；
将根据所述选择对象创建的Vue实例按照真实节点插入至文档对象模型，展示至网页页面。
在具体的实施例中，在通过CDN内容分发网络动态加载UMD打包后的Vue组件js代码，实现组件的动态化后，还能够将根Vue实例插入至DOM文档对象模型中进行实例化，具体首先创建组件Vue实例，根据组件的template模板生成vnode(虚拟节点)，插入到父级的vnode中直到根组件为止，将vnode转化成dom(真实节点),从而将组件Vue实例插入到浏览器的DOM中，最后展示到网页页面上。其中，首次挂载需要等待文档对象模型渲染完成后才能实例化，从而获得动态组件实例。本实施例通过将根Vue实例挂载至其它平台或对象的动态组件中进行实例化，提供动态组件加载的拓展性，有利于扩大本发明的适用范围。
在一个实施例中，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤S4之后，还包括：
在发布新版本动态组件后，根据动态组件新版本地址更新对应的内容分发网络地址，获取更新后的内容分发网络地址，下载新版本动态组件对应的脚本代码并进行脚本执行，完成动态组件的更新。
在具体的实施例中，本实施例还提供了动态组件的更新方法，在发布新版本的动态组件后，根据版本地址的不同，获得对应不同的CDN地址，从而根据更新后的CDN地址更新动态组件的对应版本，在内容分发网络中存储有对应不同版本的文件夹，浏览器会自动请求内容分发网络的路径并进行下载，在下载完成后会进行脚本执行，完成动态组件的实时更新。同时，在更新过程中，可进行选择性升级，能够不同版本的共存，将选择版本的功能解放出来，提供CDN路径接口进行所有文件查询，通过选取框的形式选择更新的版本。本实施例通过对动态组件进行实时更新和选择性升级，提高动态组件的实时性的同时，提高动态组件升级的灵活性和便利性。
在一个实施例中，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤S4，具体为：
从当前窗口下获取需要注册的Vue实例的选择对象，通过所述当前注册动态组件按照全局注册方式根据所述选择对象创建对应的Vue实例；
将创建的Vue实例注册至当前全局组件，并改变当前全局组件需要显示的组件名称；
根据用户当前操作所在组件的名称将所述创建的Vue实例挂载至对应的动态组件上。
在具体的实施例中，在触发事件订阅发布后，向上广播当前注册动态组件config，从当前全局窗口下获取需要注册的Vue实例的选择对象，通过Vue.extend(全局注册)方法根据需要注册的Vue实例的选择对象创建对应的全局Vue实例，将创建的全局Vue实例注册到当前全局组件上，并改变当前需要显示组件的组件名称，该名称作为后续组件匹配的标识，采用:is函数的方式访问当前操作所在的组件的名称，根据该组件的名称在全局所有的组件中进行匹配，匹配到对应标识的组件，从而挂载至对应标识的动态组件上，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高注册加载的效率。
在一个实施例中，所述触发事件的订阅发布方式为：
通过对Vue组件的上一级进行事件队列监听，收集每次加载动态组件后的事件触发信息。
在具体的实施例中，本实施例还提供了触发事件的订阅发布方式，在子组件(Vue组件)的父级进行事件队列监听和收集，在每次加载完动态组件后都进行事件触发，采集每次事件触发信息，有利于后续根据事件触发信息判断子组件的加载状态，从而父级可以知道所有的子组件的加载情况和状态，有效实时对子组件进行调整，保证动态组件加载和注册的稳定性和效率。
参照图2，本申请还提出了一种基于UMD模式的动态组件加载注册装置，包括：
组件打包模块100，用于采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
对象挂载模块200，用于通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
实例获取模块300，用于在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
加载注册模块400，用于通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
本实施例通过采用模块打包器对目标组件进行UMD格式打包，可以运行在nodejs和浏览器两种平台，从而能够有效在UMD模式下对组件进行后续的加载和注册处理，提高组件动态化的效率；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，提高Vue实例挂载至全局窗口下的速度和兼容性，并且通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性；在触发事件订阅发布后，向上广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象，在Vue实例的上一级发布订阅，获得所有加载的动态组件，提高动态组件的加载效率；将创建的若干个子Vue实例注册到当前全局组件上，通过字符串在全局所有的组件中匹配注册过的组件，将创建的子Vue实例挂载至匹配得到的对应标识的动态组件，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高注册加载的效率。
参照图3，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于储存基于UMD模式的动态组件加载注册方法等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于UMD模式的动态组件加载注册方法。所述基于UMD模式的动态组件加载注册方法，包括：采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种基于UMD模式的动态组件加载注册方法，包括步骤：采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
上述执行的基于UMD模式的动态组件加载注册方法，本实施例通过采用模块打包器对目标组件进行UMD格式打包，可以运行在nodejs和浏览器两种平台，从而能够有效在UMD模式下对组件进行后续的加载和注册处理，提高组件动态化的效率；通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，提高Vue实例挂载至全局窗口下的速度和兼容性，并且通过挂载到全局窗口下，完成一次全局组件注册后就能够获得全部注册动态组件配置，增强动态组件的复用性；在触发事件订阅发布后，向上广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象，在Vue实例的上一级发布订阅，获得所有加载的动态组件，提高动态组件的加载效率；将创建的若干个子Vue实例注册到当前全局组件上，通过字符串在全局所有的组件中匹配注册过的组件，将创建的子Vue实例挂载至匹配得到的对应标识的动态组件，从而无需在根Vue实例初始化前注入Vue组件，能够在子Vue实例上通过注入的方式加载动态组件，避免一旦根实例创建完成后就无法通过Vue.Component注册全局组件的情况，减少Vue组件的动态加载和注册的成本，有利于提高注册加载的效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
以上所述仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。
Claims (10)
1.一种基于UMD模式的动态组件加载注册方法，其特征在于，所述方法包括：
采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
2.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之中，还包括：
通过事件监听响应机制在已注册的全局组件的父级容器上进行错误拦截，捕获所有已注册的全局组件的错误状态信息，并根据错误状态信息清除对应的已注册的全局组件的进程状态。
3.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下，具体为：
通过配置文件的脚本代码在文档对象模型中创建客户端脚本标签并设置外部资源位置，对所述Vue组件中的脚本代码进行注入和加载至内容分发网络；
通过配置文件的层叠样式表在文档对象模型中创建链接标签并设置链接样式表，对所述Vue组件中的链接样式表进行注入和加载至内容分发网络；
在完成注入和加载后，将所述Vue组件中对应的所需注册的Vue实例的选择对象挂载至全局窗口下。
4.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之后，还包括：
根据动态组件的网页内容模板生成虚拟节点，将虚拟节点转化为真实节点；
将根据所述选择对象创建的Vue实例按照真实节点插入至文档对象模型，展示至网页页面。
5.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤之后，还包括：
在发布新版本动态组件后，根据动态组件新版本地址更新对应的内容分发网络地址，获取更新后的内容分发网络地址，下载新版本动态组件对应的脚本代码并进行脚本执行，完成动态组件的更新。
6.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上的步骤，具体为：
从当前窗口下获取需要注册的Vue实例的选择对象，通过所述当前注册动态组件按照全局注册方式根据所述选择对象创建对应的Vue实例；
将创建的Vue实例注册至当前全局组件，并改变当前全局组件需要显示的组件名称；
根据用户当前操作所在组件的名称将所述创建的Vue实例挂载至对应的动态组件上。
7.根据权利要求1所述的基于UMD模式的动态组件加载注册方法，其特征在于，所述触发事件的订阅发布方式为：
通过对Vue组件的上一级进行事件队列监听，收集每次加载动态组件后的事件触发信息。
8.一种基于UMD模式的动态组件加载注册装置，其特征在于，包括：
组件打包模块，用于采用模块打包器对目标组件进行UMD格式打包得到Vue组件，根据预先创建的内容分发网络地址将所述Vue组件发布至内容分发网络中；
对象挂载模块，用于通过内容分发网络动态加载所述Vue组件中的脚本代码，将所述脚本代码对应所需注册的Vue实例的选择对象挂载至全局窗口下；
实例获取模块，用于在触发事件订阅发布后，通过递归方式往上级节点广播当前注册动态组件，获取当前全局窗口挂载的Vue实例的选择对象；
加载注册模块，用于通过所述当前注册动态组件根据所述选择对象创建对应的Vue实例，将对应的Vue实例注册至当前全局组件，并改变当前需要显示组件的组件名称，将创建的Vue实例挂载至根据当前全局组件名称匹配得到的全局窗口下对应标识的动态组件上。
9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111265068.9A CN114003307B (zh) | 2021-10-28 | 2021-10-28 | 基于umd模式的动态组件加载注册方法、装置、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111265068.9A CN114003307B (zh) | 2021-10-28 | 2021-10-28 | 基于umd模式的动态组件加载注册方法、装置、设备及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114003307A true CN114003307A (zh) | 2022-02-01 |
| CN114003307B CN114003307B (zh) | 2024-06-14 |
Family
ID=79924681
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111265068.9A Active CN114003307B (zh) | 2021-10-28 | 2021-10-28 | 基于umd模式的动态组件加载注册方法、装置、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114003307B (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114518912A (zh) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | 一种页面加载方法、装置、设备及可读存储介质 |
| CN116700842A (zh) * | 2023-08-04 | 2023-09-05 | 长扬科技(北京)股份有限公司 | 数据对象的读写方法、装置、计算设备及存储介质 |
| CN117971187A (zh) * | 2024-03-29 | 2024-05-03 | 山东浪潮数字商业科技有限公司 | 一种基于Vue使用配置化数据的表格开发方法和装置 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007131211A2 (en) * | 2006-05-05 | 2007-11-15 | Sight 126 | Control system for audio/video conferencing |
| US20120167057A1 (en) * | 2010-12-22 | 2012-06-28 | Microsoft Corporation | Dynamic instrumentation of software code |
| CN111367525A (zh) * | 2020-03-19 | 2020-07-03 | 北京三维天地科技股份有限公司 | 一种前端架构系统 |
| CN113064593A (zh) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | 移动app动态化的方法、装置、计算机设备及存储介质 |
| CN113157345A (zh) * | 2021-04-30 | 2021-07-23 | 中国工商银行股份有限公司 | 前端工程自动启动方法及装置 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
-
2021
- 2021-10-28 CN CN202111265068.9A patent/CN114003307B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007131211A2 (en) * | 2006-05-05 | 2007-11-15 | Sight 126 | Control system for audio/video conferencing |
| US20120167057A1 (en) * | 2010-12-22 | 2012-06-28 | Microsoft Corporation | Dynamic instrumentation of software code |
| CN111367525A (zh) * | 2020-03-19 | 2020-07-03 | 北京三维天地科技股份有限公司 | 一种前端架构系统 |
| CN113064593A (zh) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | 移动app动态化的方法、装置、计算机设备及存储介质 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
| CN113157345A (zh) * | 2021-04-30 | 2021-07-23 | 中国工商银行股份有限公司 | 前端工程自动启动方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 陈豪;吴健;: "基于Drupal 7的HTML5布局模板的二次开发", 计算机时代, no. 12, pages 58 - 60 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114518912A (zh) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | 一种页面加载方法、装置、设备及可读存储介质 |
| CN114518912B (zh) * | 2022-02-21 | 2023-04-25 | 度小满科技(北京)有限公司 | 一种页面加载方法、装置、设备及可读存储介质 |
| CN116700842A (zh) * | 2023-08-04 | 2023-09-05 | 长扬科技(北京)股份有限公司 | 数据对象的读写方法、装置、计算设备及存储介质 |
| CN116700842B (zh) * | 2023-08-04 | 2023-10-13 | 长扬科技(北京)股份有限公司 | 数据对象的读写方法、装置、计算设备及存储介质 |
| CN117971187A (zh) * | 2024-03-29 | 2024-05-03 | 山东浪潮数字商业科技有限公司 | 一种基于Vue使用配置化数据的表格开发方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114003307B (zh) | 2024-06-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114003307B (zh) | 基于umd模式的动态组件加载注册方法、装置、设备及介质 | |
| CN105657191B (zh) | 一种基于Android系统的应用增量升级方法及系统 | |
| EP2938044B1 (en) | System, method, apparatus, and server for displaying network medium information | |
| CN111680253B (zh) | 页面应用数据包生成方法、装置、计算机设备及存储介质 | |
| CN106815055B (zh) | 移动应用动态布局的方法与系统 | |
| CN102402518A (zh) | 一种访问网页的方法及装置 | |
| CN105095280A (zh) | 一种浏览器缓存方法和装置 | |
| CN101571809A (zh) | 一种插件注册的实现方法及其装置 | |
| CN112511608A (zh) | 微服务模块注册与测试方法、装置、设备及存储介质 | |
| US8839126B1 (en) | Secure HTML components for building client-side user interface | |
| CN112799663A (zh) | 页面显示方法、装置、计算机可读存储介质及电子设备 | |
| CN112637361A (zh) | 一种页面代理方法、装置、电子设备及存储介质 | |
| CN106502685B (zh) | 一种数据库的升级方法及系统 | |
| CN112631701A (zh) | 页面请求方法、装置、计算机设备和存储介质 | |
| CN111723314B (zh) | 网页展示方法、装置、电子设备及计算机可读存储介质 | |
| CN109561131A (zh) | 一种基于编程语言下载excel数据的方法及电子设备 | |
| CN113282354A (zh) | 应用程序的h5页面加载方法、装置、设备及存储介质 | |
| CN111679828A (zh) | 一种数据处理的方法及装置、电子设备、存储介质 | |
| CN111880789A (zh) | 页面渲染方法、装置、服务端和计算机可读存储介质 | |
| CN109101429B (zh) | 一种机顶盒的浏览器页面调试的方法及装置 | |
| CN113486267B (zh) | 应用入口页面的解析方法、装置、设备及存储介质 | |
| JP2013122655A (ja) | ブラウザ実行スクリプト変換システムおよびブラウザ実行スクリプト変換プログラム | |
| CN106648610B (zh) | 功能接口远程调用及其响应的方法和装置 | |
| CN113254040B (zh) | 前端框架更新方法、装置、设备及存储介质 | |
| CN113282300A (zh) | 应用安装包的体积优化方法、装置、设备及存储介质 |
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 | ||
| GR01 | Patent grant |