CN114371886A - 前端框架组件转换方法、装置、计算机设备及存储介质 - Google Patents

前端框架组件转换方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN114371886A
CN114371886A CN202210029894.1A CN202210029894A CN114371886A CN 114371886 A CN114371886 A CN 114371886A CN 202210029894 A CN202210029894 A CN 202210029894A CN 114371886 A CN114371886 A CN 114371886A
Authority
CN
China
Prior art keywords
plug
instruction
target
function
template
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
Application number
CN202210029894.1A
Other languages
English (en)
Inventor
黄康
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Puhui Enterprise Management Co Ltd
Original Assignee
Ping An Puhui Enterprise Management Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ping An Puhui Enterprise Management Co Ltd filed Critical Ping An Puhui Enterprise Management Co Ltd
Priority to CN202210029894.1A priority Critical patent/CN114371886A/zh
Publication of CN114371886A publication Critical patent/CN114371886A/zh
Pending legal-status Critical Current

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
    • G06F9/44526—Plug-ins; Add-ons

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本申请实施例属于计算机插件技术领域，涉及一种前端框架组件转换方法，包括根据预配置的组件地址获取对应的目标组件，在预设的插件文件夹中创建目标组件对应的初始插件，并初始化初始插件，查询目标组件中的模板，在模板为空时，获取目标组件对应的方法对象中的对象指令，并通过预设的设置函数将对象指令导入初始插件，得到目标插件，在模板包含有页面元素时，遍历模板，获取页面指令，并通过设置函数将页面指令导入初始插件，得到目标插件。本申请还提供一种前端框架组件转换装置、计算机设备及存储介质。此外，本申请还涉及区块链技术，目标插件可存储于区块链中。本申请提高插件转换效率。

Description

前端框架组件转换方法、装置、计算机设备及存储介质
技术领域
本申请涉及计算机插件技术领域，尤其涉及一种前端框架组件转换方法、装置、计算机设备及存储介质。
背景技术
目前前端vue框架在业内已经普遍使用，在国内特别是中小企业中，占据绝对优势地位。在一个公司中，往往存在多个项目，且都是通过vue框架进行编写的，在编写业务逻辑代码过程中，往往存在相同的逻辑需要编写，却无法实现复用，需要各自撰写逻辑相同的组件逻辑，在有业务需求需要改造的情况下，就会出现需要各自修改多套代码，造成维护和改造成本非常高，且由于是不同的开发人员进行代码的开发，有可能存在同样的功能，有不同的实现方案，造成出现的问题都是有差异的，无法统一处理。
当前比较好的解决方案，是将vue组件改造成vue插件的形式，使得其他vue框架项目，可以直接引入使用，但是对于现存的项目中的vue组件，要改造成vue插件的形式，会存在以下问题：
1、需要开发者重新梳理当前vue组件逻辑，再将其通过插件的语法模式进行改造，额外投入较大人力；
2、开发者需要熟悉vue插件的语法模式，同时在插件编写过程中，要避免出现因粗心、语法不熟悉等问题造成的错误；
3、测试人员需要重新对相关转换成插件的功能进行测试，需要额外投入测试人力。
发明内容
本申请实施例的目的在于提出一种前端框架组件转换方法、装置、计算机设备及存储介质，以解决相关技术中组件转换为插件需要重复编写逻辑代码，过程繁琐，造成维护改造成本高，同时，易出错，且出错问题存在差异，不利于统一处理的技术问题。
为了解决上述技术问题，本申请实施例提供一种前端框架组件转换方法，采用了如下所述的技术方案：
根据预配置的组件地址获取对应的目标组件；
在预设的插件文件夹中创建所述目标组件对应的初始插件，并初始化所述初始插件；
查询所述目标组件中的模板；
在所述模板为空时，获取所述目标组件对应的方法对象中的对象指令，并通过预设的设置函数将所述对象指令导入所述初始插件，得到目标插件；
在所述模板包含有页面元素时，遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件，得到目标插件。
进一步的，所述初始化所述初始插件的步骤包括：
基于所述目标组件的组件名称，按照预设命名格式初始化所述初始插件的插件名称；
通过预设的变量函数将所述初始插件初始化为空白对象。
进一步的，所述获取所述目标组件对应的方法对象中的对象指令的步骤包括：
遍历前端框架所有组件的方法对象中的每个函数名称，根据所述函数名称获得对应的对象函数；
获取使用到所述目标组件的对象函数，并设置到全局变量中，得到所述对象指令。
进一步的，所述提取使用到所述目标组件的对象函数，并设置到全局变量中的步骤包括：
通过查找函数获取所述目标组件中的所述对象函数；
通过调用所述设置函数的注入指令，将所述对象函数导入所述全局变量。
进一步的，所述页面指令包括控制指令以及自定义指令，所述遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件的步骤包括：
遍历所述模板，当查询到所述模板内包含有控制指令的关键字时，根据所述关键字获取对应的控制指令，并通过所述设置函数将所述控制指令导入至所述初始插件；
当查询到所述模板内包含有自定义指令时，查找所述目标组件中是否包含所述自定义指令，在所述目标组件中包含所述自定义指令时，将所述自定义指令导入至所述初始插件。
进一步的，所述根据所述关键字获取对应的控制指令，并通过所述设置函数将所述控制指令导入至所述初始插件的步骤包括：
根据所述关键字获取控制指令名称，并根据所述控制指令名称获得对应的控制指令；
通过所述设置函数中的原型对象指令将控制指令导入至所述初始插件。
进一步的，在所述得到目标插件的步骤之后还包括：
获取所有所述目标插件中的所有指令；
将具有相同指令名称的指令进行提取，并存储至预创建的公共文件中。
为了解决上述技术问题，本申请实施例还提供一种前端框架组件转换装置，采用了如下所述的技术方案：
获取模块，用于根据预配置的组件地址获取对应的目标组件；
初始化模块，用于在预设的插件文件夹中创建所述目标组件对应的初始插件，并初始化所述初始插件；
查询模块，用于查询所述目标组件中的模板；
转换模块，用于在所述模板为空时，获取所述目标组件对应的方法对象中的对象指令，并通过预设的设置函数将所述对象指令导入所述初始插件，得到目标插件；
所述转换模块，还用于在所述模板包含有页面元素时，遍历所述模板，获取页面指令，并通过所述设置函数将所述第二方法导入所述初始插件，得到目标插件。
为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：
该计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的前端框架组件转换方法的步骤。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的前端框架组件转换方法的步骤。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请通过根据预配置的组件地址获取对应的目标组件，在预设的插件文件夹中创建目标组件对应的初始插件，并初始化初始插件，查询目标组件中的模板，在模板为空时，获取目标组件对应的方法对象中的对象指令，并通过预设的设置函数将对象指令导入初始插件，得到目标插件，在模板包含有页面元素时，遍历模板，获取页面指令，并通过设置函数将页面指令导入初始插件，得到目标插件；本申请通过将目标组件中的方法提取导入初始插件，得到目标插件，可以自动将指定的组件转换为插件的形式，无需开发者重新处理原有的业务逻辑，也无需重新编写代码逻辑，即可以获得组件的转换，实现相同逻辑功能的代码，在各个项目间进行复用；当组件有变化更新时，只需要重新执行命令，就可以转换得到最新的插件，分享到其他项目中有引用到该插件的地方；由于插件转换逻辑是固定的，不存在组件转换成插件过程中，出现人为造成的异常问题，导致二次人力投入修复，同时也可以简化测试流程，只需要验证基本功能就可以，大大节省了人力投入成本。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2根据本申请的前端框架组件转换方法的一个实施例的流程图；
图3是根据本申请的前端框架组件转换装置的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
本申请提供了一种前端框架组件转换方法，可以应用于如图1所示的系统架构100中，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的前端框架组件转换方法一般由服务器/终端设备执行，相应地，前端框架组件转换装置一般设置于服务器/终端设备中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
为了实现前端框架组件自动转换为插件，本申请设置了一种组件自动转换为插件的自动转换工具。将该自动转换工具安装于终端系统上，具体的，在命令行(mac系统为终端)，定位当项目根目录，执行命令，npmi pa-vue-componen-to-plugin-D，就可添加该自动转换工具到当前前端框架的项目中。
需要说明，前端框架可以为vue，组件则为vue组件。Vue是一套用于构建用户界面的渐进式JavaScript框架，用于开发用户界面。
工具安装完成后，设置配置文件config.js，配置文件配置内容包括需要转换的vue组件地址。然后，进行项目构建，具体的，在命令行(mac系统为终端)，定位当前项目根目录，执行命令构建命令，npm run pa-vue-componen-to-plugin，项目执行过程中，使用到本申请提供的前端框架组件转换方法，自动将指定的vue组件转换为vue插件。
继续参考图2，示出了根据本申请的前端框架组件转换方法的一个实施例的流程图，包括以下步骤：
步骤S201，根据预配置的组件地址获取对应的目标组件。
首先查找到需要转换的vue组件，需要转换的vue组件即为目标组件。在本实施例中，根据预配置的组件地址获取对应的目标组件。应当理解，项目中需要转换的目标组件预先进行配置，相应的，目标组件对应的组件地址也是预先进行配置。
具体的，通过在配置文件config.js中，预先配置目标组件的组件地址，根据组件地址进行查找，查找到对应的目标组件，然后在项目根目录中，根据目标组件生成一个插件文件夹(即plugins文件夹)，用于存放转换后的vue插件文件。
需要说明的是，如果目标组件的组件地址没有预先配置，在执行组件转换为插件过程中，会抛出异常，强制用户进行组件地址配置。
步骤S202，在预设的插件文件夹中创建目标组件对应的初始插件，并初始化初始插件。
在本实施例中，插件文件夹为在项目根目录中预先创建，用于存放目标插件。在插件文件夹中预先创建目标组件对应的初始插件，将初始插件初始化为空白插件，在执行组件转换为插件过程中，将对应的内容填写至初始插件，得到转换完成的插件，即目标插件。
在一些可选的实现方式中，初始化初始插件的过程具体如下：
基于目标组件的组件名称，按照预设命名格式初始化初始插件的插件名称；
通过预设的变量函数将初始插件初始化为空白对象。
具体的，初始化初始插件的插件名称为预设命名格式，其中，预设命名格式为：原目标组件名称_plugin_.js。
初始化初始插件的插件内容，通过变量函数将初始插件定义为空白对象，即空白插件，完成初始化。其中，变量函数为const函数，初始化插件内容的过程具体如下：
通过语法const X，申明一个空白对象，其中X与插件名称一致。该空白对象中包含一个install方法，目前该方法暂时是一个空函数。然后可以通过语法export defalut X，将插件进行导出操作，便于给其他项目使用。
本实施例通过初始化初始插件，可以为后续组件转换为插件做好准备，避免转换过程出现异常。
步骤S203，查询目标组件中的模板。
目标组件主要为两种类型，第一种为功能组件、不包含展示元素组件；第二种为包含展示元素的组件。对于第一种情况，目标组件的原组件属于纯功能型的组件，组件中template模板为空的情况，需要将目标组件中的methods对象中的方法，进行抽离。对于第二种情况，目标组件的原组件的template模板中包含有展示元素，这部分需要额外处理。
应当理解，template模板为HTML内容模板元素，则展示元素则为HTML页面元素，页面元素包括但不限于文本、图片、视频、样式等。
由于不同目标组件的转化方式不同，因此需要对目标组件的模板进行查询，根据查询到的结果进行相应的转换处理。
步骤S204，在模板为空时，获取目标组件对应的方法对象中的对象指令，并通过预设的设置函数将对象指令导入初始插件，得到目标插件。
在查询到的template模板为空的情况，则说明目标组件没有包含展示元素，为纯功能型组件，则需要将目标组件对应的方法对象(methods对象)中的对象指令进行提取，其中，对象指令为methods对象中的函数方法，也就是将函数方法进行提取，即方法抽离。
将提取出来的对象指令通过预设的设置函数导入初始插件，其中，设置函数为install函数。
在一些可选的实现方式中，上述获取目标组件对应的方法对象中的对象指令的步骤包括：
遍历前端框架所有组件的方法对象中的每个函数名称，根据函数名称获得对应的对象函数；
获取使用到目标组件的对象函数，并设置到全局变量中，得到对象指令。
具体的，通过遍历的方式，遍历前端框架中所有组件方法对象中的每个函数名称，根据函数名称获得对应的对象函数，其中，方法对象中的对象函数通过函数名称和对象函数的映射关系来进行获取。
映射关系通过key-value(键值对)的方式进行设置存储，在方法对象中，key为函数名称，通过key名对应的key值value，即为对应的对象函数。
获得的对象函数通过临时变量挂载，目的是把对象函数暂存于系统内存中，以便后续调用。
获取到对象函数后，将其设置到全局变量中，目的是为了使得对象函数可以被vue框架中的所有对象或者函数引用。
步骤S205，在模板包含有页面元素时，遍历模板，获取页面指令，并将页面指令导入初始插件，得到目标插件。
其中，页面指令包括控制指令和自定义指令，不同的页面指令导入初始插件的方法也不同。
在一些可选的实现方式中，上述遍历模板，获取页面指令，并通过设置函数将页面指令导入初始插件的步骤包括：
遍历模板，当查询到模板内包含有控制指令的关键字时，根据关键字获取对应的控制指令，并通过设置函数将控制指令导入至初始插件；
当查询到模板内包含有自定义指令时，查找目标组件中是否包含自定义指令，在目标组件中包含自定义指令时，将自定义指令导入至所述初始插件。
其中，控制指令包括但不限于v-if、v-show，用于对显示和隐藏进行控制。遍历template模板，当查询到模板内包含有控制指令的关键字v-if或者v-show时，则说明模板中存在显示和隐藏的控制，需要将控制显示隐藏属性对应的控制指令通过全局变量的形式，暴露给使用者去控制。
查询到模板内包含有自定义指令时，查找目标组件中是否包含自定义指令，如果都包含，将原本定义在原目标组件的自定义指令通过install函数中的语法Vue.directive('自定义指令名称'，{})，将原本定义在原目标组件的自定义指令，申明到初始插件中去，获得目标插件。
本实施例通过不同的方式对不同页面指令进行获取，可以提高处理页面指令方法的准确性。
需要强调的是，为进一步保证目标插件的私密和安全性，上述目标插件还可以存储于一区块链的节点中。
本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
本申请通过将目标组件中的方法提取导入初始插件，得到目标插件，可以自动将指定的组件转换为插件的形式，无需开发者重新处理原有的业务逻辑，也无需重新编写代码逻辑，即可以获得组件的转换，实现相同逻辑功能的代码，在各个项目间进行复用；当组件有变化更新时，只需要重新执行命令，就可以转换得到最新的插件，分享到其他项目中有引用到该插件的地方；由于插件转换逻辑是固定的，不存在组件转换成插件过程中，出现人为造成的异常问题，导致二次人力投入修复，同时也可以简化测试流程，只需要验证基本功能就可以，大大节省了人力投入成本。
在本实施例的一些可选的实现方式中，上述提取使用到目标组件的对象函数，并设置到全局变量中的步骤包括：
通过查找函数获取目标组件中的对象函数；
通过调用设置函数的注入指令，将对象函数导入全局变量。
其中，查找函数和设置函数为前端框架中设置的，对象函数可以通过查找函数“this.函数名称”来获取，也可以通过“this.函数名称＝函数名称”来修改变量的语句，将对象函数从目标组件的data对象中提取出来，也可以采用其他可以提取出对象函数的方式，在此不做限制。
设置函数为install函数，注入指令为app.provide方法，通过在install函数中的app.provide方法将对象函数导出到vue框架的全局变量中去。
具体的，在install函数中，通过语法Vue.prototype.$函数名称＝抽离出来的对象函数，将目标组件中对象函数，放置到vue框架的实例的全局变量中，当其他项目使用时，只需要通过this.$函数名称即可以调用到该对象函数。
本实施例通过采用前端框架中的相应函数处理目标组件的对象函数，可以更加方便快捷地实现对象函数全局变量化。
在一些可选的实现方式中，上述通过调用设置函数的注入指令，将对象函数导入全局变量的步骤之后还包括：
按照预设规则将所述全局变量中的对象函数进行名称修改。
为了避免全局变量中，有同名的变量存在，会将变量名进行改写，预设规则为在原变量名(即函数名称)的基础上，增加“_目标组件名称_plugin”,以此来保证不冲突，即全局变量中，变量名为“函数名称_目标组件名称_plugin”。将对象函数中使用“this.函数名称”访问或修改的语句，统一修改为新的变量名称，即“this.函数名称_目标组件名称_plugin”，保证变量名变换后，可以正常取值。
在一些可选的实现方式中，上述根据关键字获取对应的控制指令，并通过设置函数将控制指令导入至初始插件的步骤包括：
根据关键字获取控制指令名称；
根据控制指令名称获得对应的控制指令，并通过设置函数中的原型对象指令将控制指令导入至初始插件。
具体的，通过获取到v-if或v-show中对应控制显示隐藏指令的控制指令名称，在设置函数install函数中，通过语法Vue.prototype.$show_目标组件名称＝控制指令。其中，控制指令即控制方法，控制方法为控制变量切换的方法，控制方法中，包含入参(类型为布尔值)，然后通过将控制方法赋值入参，来达到通过外部调用方法传参的方式，修改控制显示隐藏的变量，进一步达到控制目标组件展示隐藏的功能。
在本实施例的一些可选的实现方式中，上述在模板为空时，提取目标组件对应的方法对象中的对象指令，并通过预设的设置函数将对象指令导入初始插件，得到目标插件的步骤或者在模板包含有页面元素时，遍历模板，获取页面指令，并通过预设的设置函数将页面指令导入初始插件，得到目标插件的步骤之后还包括：
获取所有目标插件中的所有指令；
将具有相同指令名称的指令进行提取，并存储至预创建的公共文件中。
具体的，组件进行转换后得到的各个目标插件，有可能还包含了相同的常规指令，比如日期的转换、常见的正则表达式等等。指令即函数方法，对于这类函数方法，往往也具有相同的函数名称，只是提取出来后增加了“_组件名_plugin”而已，对于这类函数方法，通过遍历比较前面部分的函数名称是否相同，如果相同，则将所有函数名称相同的函数方法合并为一个方法，并存储至预创建的公共文件中，以便vue框架中的各个目标插件进行调用，同时，在有业务需求需要改造的情况下，只需要修改公共文件中对应的函数方法即可，提升改造效率，节省人力成本。
本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种前端框架组件转换装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图3所示，本实施例所述的前端框架组件转换装置300包括：获取模块301、初始化模块302、查询模块303以及转换模块304。其中：
获取模块301用于根据预配置的组件地址获取对应的目标组件；
初始化模块302用于在预设的插件文件夹中创建所述目标组件对应的初始插件，并初始化所述初始插件；
查询模块303用于查询所述目标组件中的模板；
转换模块304用于在所述模板为空时，获取所述目标组件对应的方法对象中的对象指令，并通过预设的设置函数将所述对象指令导入所述初始插件，得到目标插件；
转换模块304还用于在所述模板包含有页面元素时，遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件，得到目标插件。
需要强调的是，为进一步保证目标插件的私密和安全性，上述目标插件还可以存储于一区块链的节点中。
上述前端框架组件转换装置，通过将目标组件中的方法提取导入初始插件，得到目标插件，可以自动将指定的组件转换为插件的形式，无需开发者重新处理原有的业务逻辑，也无需重新编写代码逻辑，即可以获得组件的转换，实现相同逻辑功能的代码，在各个项目间进行复用；当组件有变化更新时，只需要重新执行命令，就可以转换得到最新的插件，分享到其他项目中有引用到该插件的地方；由于插件转换逻辑是固定的，不存在组件转换成插件过程中，出现人为造成的异常问题，导致二次人力投入修复，同时也可以简化测试流程，只需要验证基本功能就可以，大大节省了人力投入成本。
在本实施例中，初始化模块302进一步用于：
基于所述目标组件的组件名称，按照预设命名格式初始化所述初始插件的插件名称；
通过预设的变量函数将所述初始插件初始化为空白对象。
本实施例通过初始化初始插件，可以为后续组件转换为插件做好准备，避免转换过程出现异常。
在本实施例中，转换模块304包括遍历子模块和获取子模块，其中，遍历子模块用于遍历前端框架所有组件的方法对象中的每个函数名称，根据所述函数名称获得对应的对象函数；获取子模块用于获取使用到所述目标组件的对象函数，并设置到全局变量中，得到所述对象指令。
本实施例中通过将获取到的对象函数设置到全局变量中，目的是为了使得对象函数可以被vue框架中的所有对象或者函数引用。
在本实施例的一些可选的实现方式中，获取子模块包括查找单元和注入单元，其中，查找单元用于通过查找函数获取所述目标组件中的所述对象函数；注入单元用于通过调用所述设置函数的注入指令，将所述对象函数导入所述全局变量。
本实施例通过采用前端框架中的相应函数处理目标组件的对象函数，可以更加方便快捷地实现对象函数全局变量化。
在本实施例中，转换模块304还包括查询子模块，用于：
遍历所述模板，当查询到所述模板内包含有控制指令的关键字时，根据所述关键字获取对应的控制指令，并通过所述设置函数将所述控制指令导入至所述初始插件；
当查询到所述模板内包含有自定义指令时，查找所述目标组件中是否包含所述自定义指令，在所述目标组件中包含所述自定义指令时，将所述自定义指令导入至所述初始插件。
本实施例通过不同的方式对不同页面指令进行获取，可以提高处理页面指令方法的准确性。
在本实施例中，查询子模块包括获取单元和导入单元，其中，获取单元用于根据所述关键字获取控制指令名称，并根据所述控制指令名称获得对应的控制指令；导入单元用于根据所述控制指令名称，通过所述设置函数中的原型对象指令将控制指令导入至所述初始插件。
本实施例可以更加方便快捷地实现控制指令全局变量化。
在本实施例的一些可选的实现方式中，前端框架组件转换装置300还包括遍历模块和提取模块，其中：
获取所有所述目标插件中的所有指令；
将具有相同指令名称的指令进行提取，并存储至预创建的公共文件中。
本实施例通过提取相同方法并存储至公共文件，可以方便框架中的各个目标插件进行调用，同时，在有业务需求需要改造的情况下，只需要修改公共文件中对应的函数方法即可，提升改造效率，节省人力成本。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如前端框架组件转换方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述前端框架组件转换方法的计算机可读指令。
所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
本实施例通过处理器执行存储在存储器的计算机可读指令时实现如上述实施例前端框架组件转换方法的步骤，通过将目标组件中的方法提取导入初始插件，得到目标插件，可以自动将指定的组件转换为插件的形式，无需开发者重新处理原有的业务逻辑，也无需重新编写代码逻辑，即可以获得组件的转换，实现相同逻辑功能的代码，在各个项目间进行复用；当组件有变化更新时，只需要重新执行命令，就可以转换得到最新的插件，分享到其他项目中有引用到该插件的地方；由于插件转换逻辑是固定的，不存在组件转换成插件过程中，出现人为造成的异常问题，导致二次人力投入修复，同时也可以简化测试流程，只需要验证基本功能就可以，大大节省了人力投入成本。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的前端框架组件转换方法的步骤，通过将目标组件中的方法提取导入初始插件，得到目标插件，可以自动将指定的组件转换为插件的形式，无需开发者重新处理原有的业务逻辑，也无需重新编写代码逻辑，即可以获得组件的转换，实现相同逻辑功能的代码，在各个项目间进行复用；当组件有变化更新时，只需要重新执行命令，就可以转换得到最新的插件，分享到其他项目中有引用到该插件的地方；由于插件转换逻辑是固定的，不存在组件转换成插件过程中，出现人为造成的异常问题，导致二次人力投入修复，同时也可以简化测试流程，只需要验证基本功能就可以，大大节省了人力投入成本。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种前端框架组件转换方法，其特征在于，包括下述步骤：
根据预配置的组件地址获取对应的目标组件；
在预设的插件文件夹中创建所述目标组件对应的初始插件，并初始化所述初始插件；
查询所述目标组件中的模板；
在所述模板为空时，获取所述目标组件对应的方法对象中的对象指令，并通过预设的设置函数将所述对象指令导入所述初始插件，得到目标插件；
在所述模板包含有页面元素时，遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件，得到目标插件。
2.根据权利要求1所述的前端框架组件转换方法，其特征在于，所述初始化所述初始插件的步骤包括：
基于所述目标组件的组件名称，按照预设命名格式初始化所述初始插件的插件名称；
通过预设的变量函数将所述初始插件初始化为空白对象。
3.根据权利要求1所述的前端框架组件转换方法，其特征在于，所述获取所述目标组件对应的方法对象中的对象指令的步骤包括：
遍历前端框架所有组件的方法对象中的每个函数名称，根据所述函数名称获得对应的对象函数；
获取使用到所述目标组件的对象函数，并设置到全局变量中，得到所述对象指令。
4.根据权利要求3所述的前端框架组件转换方法，其特征在于，所述提取使用到所述目标组件的对象函数，并设置到全局变量中的步骤包括：
通过查找函数获取所述目标组件中的所述对象函数；
通过调用所述设置函数的注入指令，将所述对象函数导入所述全局变量。
5.根据权利要求1所述的前端框架组件转换方法，其特征在于，所述页面指令包括控制指令以及自定义指令，所述遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件的步骤包括：
遍历所述模板，当查询到所述模板内包含有控制指令的关键字时，根据所述关键字获取对应的控制指令，并通过所述设置函数将所述控制指令导入至所述初始插件；
当查询到所述模板内包含有自定义指令时，查找所述目标组件中是否包含所述自定义指令，在所述目标组件中包含所述自定义指令时，将所述自定义指令导入至所述初始插件。
6.根据权利要求5所述的前端框架组件转换方法，其特征在于，所述根据所述关键字获取对应的控制指令，并通过所述设置函数将所述控制指令导入至所述初始插件的步骤包括：
根据所述关键字获取控制指令名称，并根据所述控制指令名称获得对应的控制指令；
通过所述设置函数中的原型对象指令将控制指令导入至所述初始插件。
7.根据权利要求1所述的前端框架组件转换方法，其特征在于，在所述得到目标插件的步骤之后还包括：
获取所有所述目标插件中的所有指令；
将具有相同指令名称的指令进行提取，并存储至预创建的公共文件中。
8.一种前端框架组件转换装置，其特征在于，包括：
获取模块，用于根据预配置的组件地址获取对应的目标组件；
初始化模块，用于在预设的插件文件夹中创建所述目标组件对应的初始插件，并初始化所述初始插件；
查询模块，用于查询所述目标组件中的模板；
转换模块，用于在所述模板为空时，获取所述目标组件对应的方法对象中的对象指令，并通过预设的设置函数将所述对象指令导入所述初始插件，得到目标插件；
所述转换模块，还用于在所述模板包含有页面元素时，遍历所述模板，获取页面指令，并通过所述设置函数将所述页面指令导入所述初始插件，得到目标插件。
9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的前端框架组件转换方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的前端框架组件转换方法的步骤。
CN202210029894.1A 2022-01-12 2022-01-12 前端框架组件转换方法、装置、计算机设备及存储介质 Pending CN114371886A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210029894.1A CN114371886A (zh) 2022-01-12 2022-01-12 前端框架组件转换方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210029894.1A CN114371886A (zh) 2022-01-12 2022-01-12 前端框架组件转换方法、装置、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
CN114371886A true CN114371886A (zh) 2022-04-19

Family

ID=81143948

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210029894.1A Pending CN114371886A (zh) 2022-01-12 2022-01-12 前端框架组件转换方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN114371886A (zh)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112286529A (zh) * 2020-11-19 2021-01-29 北京有竹居网络技术有限公司 前端页面的开发方法、装置、设备及存储介质

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112286529A (zh) * 2020-11-19 2021-01-29 北京有竹居网络技术有限公司 前端页面的开发方法、装置、设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
前端对象: "vue使用install函数把组件做成插件方便全局调用(封装公用组件)", pages 1 - 6, Retrieved from the Internet <URL:https://blog.csdn.net/zaoqinghuan/article/details/107031193> *
大佬教我写程序: "插件方式的组件封装", pages 1 - 5, Retrieved from the Internet <URL:https://www.jianshu.com/p/d806ce040dc9> *

Similar Documents

Publication Publication Date Title
CN109976761B (zh) 软件开发工具包的生成方法、装置及终端设备
CN108427705B (zh) 电子装置、分布式系统日志查询方法及存储介质
CN109542399B (zh) 软件开发方法、装置、终端设备及计算机可读存储介质
CN112015430A (zh) JavaScript代码翻译方法、装置、计算机设备及存储介质
CN111125064B (zh) 一种生成数据库模式定义语句的方法和装置
CN115098186A (zh) 项目处理方法、装置、计算机设备及存储介质
CN115599386A (zh) 代码生成方法、装置、设备及存储介质
CN112765270B (zh) 区块链数据处理方法、装置、计算机设备及介质
CN112699027A (zh) 一种接口测试方法、装置、设备及可读存储介质
CN116974929A (zh) 自动化测试工具构建方法、自动化测试方法及其相关设备
CN103809915A (zh) 一种磁盘文件的读写方法和装置
CN114625372A (zh) 组件自动编译方法、装置、计算机设备及存储介质
CN115543428A (zh) 一种基于策略模板的模拟数据生成方法和装置
CN114371886A (zh) 前端框架组件转换方法、装置、计算机设备及存储介质
CN111178025A (zh) 核电站运行导则的编辑方法、装置、计算机设备及存储介质
CN117033249B (zh) 一种测试用例生成方法、装置、计算机设备及存储介质
CN116755684B (zh) OAS Schema的生成方法、装置、设备及介质
CN116302847B (zh) 异常信息的动态采集方法、装置、计算机设备及介质
CN114398036A (zh) 前端web项目转换为vue项目的方法、装置、设备及介质
CN112965721B (zh) 基于Android的项目编译方法、装置、计算机设备及存储介质
CN110413644B (zh) 一种数据缓存方法、电子装置及计算机可读存储介质
CN117492752A (zh) 一种页面动态配置方法、装置、计算机设备及存储介质
CN114998038A (zh) 异常保单处理方法及系统
CN117033249A (zh) 一种测试用例生成方法、装置、计算机设备及存储介质
CN115526731A (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
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20220419