变量的处理方法及装置、存储介质及处理器与流程

本申请涉及变量处理领域，具体而言，涉及一种变量的处理方法及装置、存储介质及处理器。

背景技术：

在vuejs框架中，为了使得渲染出来的页面保持一致的字号、字样式等，需要为vuejs单文件组件引入字号、字样式等变量文件，使得vue.js单文件组件渲染后能够呈现相应的样式效果。相关技术中，是在vue.js单文件组件的样式部分引入变量文件，如以下的代码中，@import引入了base.scss这一变量文件：

<stylelang＝“scss”>

@import“～assets/css/base.scss”；

.m-widget-conf{…

}

.grid-stack-top{…

}

.grid-stack-main{…

}

</style>

采用上述方法能够达到引入变量的效果，但是，当一个项目中会有多个单文件组件时，需要在单文件组件的样式部分一一修改代码，引入变量，单文件组件越多，引入变量工作量越大。在后期进行文件维护时，每个文件都要维护变量文件的引入，例如，对变量文件的新增、删除，修改变量中的具体参数，需要在每个单文件组件的样式部分找到变量并进行修改，不仅费时费力，且容易出错，文件维护难度大。

针对相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题，目前尚未提出有效的解决方案。

技术实现要素：

本申请的主要目的在于提供一种变量的处理方法及装置、存储介质及处理器，以解决相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种变量的处理方法。该方法包括：获取目标本体文件中的目标代码，其中，目标代码中不包含变量；采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

进一步地，采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码包括，得到目标代码中带有变量的目标文件：获取目标变量文件的路径；以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

进一步地，目标文件为vue.js单文件组件，目标代码为样式代码，变量为样式变量，在采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件之后，该方法还包括：采用scss工具编译包含变量的目标代码，得到vue.js单文件组件对应的层叠样式表。

进一步地，在得到vue.js单文件组件对应的层叠样式表之后，该方法还包括：利用层叠样式表更新目标页面中的元素。

进一步地，该方法还包括：在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，其中，重新拼接的条件包括如下一项或几项：目标变量文件中变量文件的数量发生变化，目标变量文件中一个以上变量文件的内容发生变化，目标变量文件的路径发生变化。

进一步地，在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤之前，该方法还包括：删除现存的目标文件。

为了实现上述目的，根据本申请的另一方面，提供了一种变量的处理装置。该装置包括：获取单元，用于获取目标本体文件中的目标代码，其中，目标代码中不包含变量；注入单元，用于采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

进一步地，注入单元包括：获取模块，用于获取目标变量文件的路径；注入模块，用于以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

为了实现上述目的，根据本申请的另一方面，提供了一种存储介质，存储介质包括存储的程序，其中，程序执行上述任意一种变量的处理方法。

为了实现上述目的，根据本申请的另一方面，提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述任意一种变量的处理方法。

通过本申请，采用以下步骤：获取目标本体文件中的目标代码，其中，目标代码中不包含变量；采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件，解决了相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题。通过采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，进而达到了维护变量时无需逐一修改代码中的变量、提高变量维护效率的效果。

附图说明

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

图1是根据本申请实施例提供的变量的处理方法的流程图；以及

图2是根据本申请实施例提供的变量的处理装置的示意图。

具体实施方式

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

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为了便于描述，以下对本申请实施例涉及的部分名词或术语进行说明：

vue.js:构建数据驱动的web界面的javascript框架，关注数据到界面的渲染及交互反馈。

scss：css预处理器。

css：层叠样式表，为结构化文档(如html)添加样式，定义了结构化文档中的元素的显示方式，利用其可以实现修改一个小的样式便更新与之相关的所有页面元素。

vue.js单文件组件：支持vue.js框架的文件，包含样式、模板、逻辑等代码。

根据本申请的实施例，提供了一种变量的处理方法。

图1是根据本申请实施例的变量的处理方法的流程图。如图1所示，该方法包括以下步骤：

步骤s101，获取目标本体文件中的目标代码，其中，目标代码中不包含变量。

例如，目标本体文件可以为vue.js单文件组件，目标代码为vue.js单文件组件中的样式代码，该样式代码待引入变量。

步骤s102，采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

具体地，目标代码字符串与目标变量文件字符串拼接的方式是指将表征目标代码的字符串和表征目标变量文件的字符串采用inject选项进行拼接，从而将目标变量文件中的变量注入目标代码。例如，将表征样式代码的字符串和表征样式变量文件的字符串采用inject选项进行拼接，从而将文字的字号、样式等变量注入样式代码。

目标变量文件包括一个以上变量文件，目标变量文件字符串即为组成目标变量文件的各个变量文件的字符串。在对目标代码字符串与目标变量文件字符串拼接时，是将目标代码字符串与目标变量文件中的每个变量文件的字符串进行拼接。

可以将全部目标本体文件对应的目标变量文件中的变量文件都设置为相同，也可以针对不同的目标本体文件分别设置对应的目标变量文件中的变量文件，具体根据需要来设定。

可选地，在本申请实施例提供的变量的处理方法中，采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码包括：获取目标变量文件的路径；以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

具体地，采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的实现代码如下：

functioninjectvar(source，options){

letvarstr＝”；

options.vars.foreach(item＝>{

varstr+＝fs.readfilesync(getpath(item),'utf-8')；

})；

returnvarstr+＝source；

}

其中，inject选项中的源信息为目标代码，inject选项中的配置信息为目标变量文件的路径字符串，利用foreach语句循环访问项目文件，同步读取目标变量文件的相对路径，以获取目标变量文件字符串，将目标变量文件字符串与目标代码进行拼接，例如，可以将变量文件字符串拼接到目标代码字符串前方，即可实现变量注入样式代码，具体地，后续按照拼接完成的代码进行编译渲染，即可实现网页中元素的样式改变。

为了更新样式代码相关的所有页面元素，可选地，在本申请实施例提供的变量的处理方法中，目标文件为vue.js单文件组件，目标代码为样式代码，变量为样式变量，在采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码之后，该方法还包括：采用scss工具编译包含变量的目标代码，得到vue.js单文件组件对应的层叠样式表。

例如，目标代码为样式代码，变量为字号，采用scss工具编译包含字号变量的样式代码，得到层叠样式表，该层叠样式表定义了html文档中的文字的字号。

可选地，在本申请实施例提供的变量的处理方法中，在得到vue.js单文件组件对应的层叠样式表之后，该方法还包括：利用层叠样式表更新目标页面中的元素。

例如，层叠样式表定义了html文档中的文字的字号，利用层叠样式表更新目标页面中的文字的字号。此外，层叠样式表不仅可以静态地修饰网页中的字号，还可配合各种脚本动态地格式化网页中的字号。

为了在目标变量文件发生改变时实时更新网页中的相关元素，可选地，在本申请实施例提供的变量的处理方法中，该方法还包括：在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，其中，重新拼接的条件包括如下一项或几项：目标变量文件中变量文件的数量发生变化，目标变量文件中一个以上变量文件的内容发生变化，目标变量文件的路径发生变化。

例如，在目标变量文件的文件名或目标变量文件的路径发生变化的情况下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，此时，在inject选项中获取改变后的目标变量文件的路径，将目标变量文件中的公共变量注入目标代码。

可选地，在本申请实施例提供的变量的处理方法中，在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤之前，该方法还包括：删除现存的目标文件。

通过本实施例，无需逐一对样式代码中的变量进行核对和修改，方便快捷地实现样式代码中的变量的更新，从而实现网页中的相关元素的更新。

本申请实施例提供的变量的处理方法，通过获取目标本体文件中的目标代码，其中，目标代码中不包含变量；采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件，解决了相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题。通过采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，进而达到了维护变量时无需逐一修改代码中的变量、提高变量维护效率的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种变量的处理装置，需要说明的是，本申请实施例的变量的处理装置可以用于执行本申请实施例所提供的用于变量的处理方法。以下对本申请实施例提供的变量的处理装置进行介绍。

图2是根据本申请实施例的变量的处理装置的示意图。如图2所示，该装置包括：获取单元10和注入单元20。

具体地，获取单元10，用于获取目标本体文件中的目标代码，其中，目标代码中不包含变量；

注入单元20，用于采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

可选地，在本申请实施例提供的变量的处理装置中，注入单元20包括：获取模块，用于获取目标变量文件的路径；注入模块，用于以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

可选地，在本申请实施例提供的变量的处理装置中，目标文件为vue.js单文件组件，目标代码为样式代码，变量为样式变量，该装置还包括：编译单元，用于在采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码之后，采用scss工具编译包含变量的目标代码，得到vue.js单文件组件对应的层叠样式表。

可选地，在本申请实施例提供的变量的处理装置中，该装置还包括：更新单元，用于在得到vue.js单文件组件对应的层叠样式表之后，利用层叠样式表更新目标页面中的元素。

可选地，在本申请实施例提供的变量的处理装置中，该装置还包括：执行单元，用于在在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，其中，重新拼接的条件包括如下一项或几项：目标变量文件中变量文件的数量发生变化，目标变量文件中一个以上变量文件的内容发生变化，目标变量文件的路径发生变化。

可选地，在本申请实施例提供的变量的处理装置中，该装置还包括：删除单元，用于在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤之前，该方法还包括：删除现存的目标文件。

本申请实施例提供的变量的处理装置，通过获取单元10获取目标本体文件中的目标代码，其中，目标代码中不包含变量；注入单元20采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件，解决了相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题，通过采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，进而达到了维护变量时无需逐一修改代码中的变量、提高变量维护效率的效果。

所述变量的处理装置包括处理器和存储器，上述获取单元10和注入单元20等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来解决相关技术中将变量写入vue.js单文件组件的代码中，进行变量维护时需要逐一修改代码中的变量的问题。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)，存储器包括至少一个存储芯片。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述变量的处理方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述变量的处理方法。

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：获取目标本体文件中的目标代码，其中，目标代码中不包含变量；采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码包括，得到目标代码中带有变量的目标文件：获取目标变量文件的路径；以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

目标文件为vue.js单文件组件，目标代码为样式代码，变量为样式变量，在采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件之后，该方法还包括：采用scss工具编译包含变量的目标代码，得到vue.js单文件组件对应的层叠样式表。

在得到vue.js单文件组件对应的层叠样式表之后，该方法还包括：利用层叠样式表更新目标页面中的元素。

该方法还包括：在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，其中，重新拼接的条件包括如下一项或几项：目标变量文件中变量文件的数量发生变化，目标变量文件中一个以上变量文件的内容发生变化，目标变量文件的路径发生变化。

在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤之前，该方法还包括：删除现存的目标文件。本文中的设备可以是服务器、pc、pad、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：获取目标本体文件中的目标代码，其中，目标代码中不包含变量；采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件。

采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码包括，得到目标代码中带有变量的目标文件：获取目标变量文件的路径；以目标变量文件的路径为注入变量函数的配置信息，以目标代码为注入变量函数的源信息，采用注入变量函数获取目标变量文件字符串以及拼接目标代码字符串与目标变量文件字符串，得到目标代码中带有变量的目标文件。

目标文件为vue.js单文件组件，目标代码为样式代码，变量为样式变量，在采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码，得到目标代码中带有变量的目标文件之后，该方法还包括：采用scss工具编译包含变量的目标代码，得到vue.js单文件组件对应的层叠样式表。

在得到vue.js单文件组件对应的层叠样式表之后，该方法还包括：利用层叠样式表更新目标页面中的元素。

该方法还包括：在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤，其中，重新拼接的条件包括如下一项或几项：目标变量文件中变量文件的数量发生变化，目标变量文件中一个以上变量文件的内容发生变化，目标变量文件的路径发生变化。

在符合重新拼接的条件下，重新执行采用目标代码字符串与目标变量文件字符串拼接的方式将目标变量文件中的变量注入目标代码的步骤之前，该方法还包括：删除现存的目标文件。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

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