代码统一编译方法、装置、电子设备及可读存储介质与流程

1.本发明涉及人工智能技术领域，尤其涉及一种代码统一编译方法、装置、电子设备及可读存储介质。


背景技术：

2.目前在国内前端行业内，广泛使用前端框架进行前端项目开发，项目中组件的展示内容通过不同的代码进行实现。例如，在前端vue框架内开发组件的过程中，一个组件内的页面展示和逻辑内容，既有固定内容不变化的部分，又存在动态变化的部分。对于动态变化的部分，主要是靠外部父级的组件传递进来，例如，如果是方法、变量，只需要在父级通过一个动态变量进行传递到子组件，子组件获取使用即可。但是由于页面展示部分的代码都是通过html语法进行编写的树状结构，而传递参数又只能是通过字符串的形式，进行html代码的字符串格式进行传递，字符串格式的html代码，在编写过程中，是非常难以阅读的且无法正常识别，造成了阅读和维护困难。早期vue版本，提出过插槽雏形特性，但是由于语法相对复杂，不容易理解，很多开发者还是按照通过动态参数传递html字符串的形式编码。直到vue2.6版本,才对这个情况设计了可靠新的特性，即通过插槽v-slot的方式，简单易懂地解决了这个场景问题。
3.然而在现存的项目中还是存在着大量通过传递html字符串的方式，这给项目在后期维护和新增功能的时候，会增加维护成本，降低了代码的可阅读性，也容易导致问题的发生。如果要统一改造成使用插槽的方式，又会存在大量的开发人员需要学习掌握好新语法特性，并还要将原来的html传参写法的代码梳理出来，再进行改造，改造完后再需要测试人员投入人力进行验证原有功能，效率低下且标准不统一。
4.综上所述，现有技术下会存在前端项目中展示代码转换困难、且转换标准不统一的问题。因此亟需一种将框架组件中展示代码进行统一编译转化的方法。


技术实现要素：

5.本发明提供一种代码统一编译方法、装置、电子设备及可读存储介质，其主要目的在于解决展示代码统一编译困难的问题。
6.为实现上述目的，本发明提供的一种代码统一编译方法，包括：
7.构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；
8.根据所述展示内容的变量传递方式确定待编译文件；
9.识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
10.可选地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：
11.根据所述代码编译项目遍历所述前端项目的项目目录；
12.从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；
13.确定所述目标组件中展示标签内的所有代码作为所述展示内容。
14.可选地，所述根据所述展示内容的变量传递方式确定待编译文件，包括：
15.根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；
16.确定变量传递方式为父级传递的目标组件为所述待编译文件。
17.可选地，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
18.判断所述待编译文件中关键词标签的数量是否单一；
19.若所述待编译文件中关键词标签的数量单一，则利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；
20.若所述待编译文件中关键词标签的数量不单一，则利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换。
21.可选地，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
22.在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；
23.查找所述待编译文件中所有目标组件的父组件；
24.识别出所述父组件中用于引用所述目标组件的第一引用变量；
25.将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。
26.可选地，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
27.在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；
28.查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；
29.将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。
30.可选地，所述构建前端项目的代码编译项目，包括：
31.定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；
32.在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。
33.为了解决上述问题，本发明还提供一种代码统一编译装置，所述装置包括：
34.代码编译项目构建模块，用于构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；
35.文件查找模块，用于根据所述展示内容的变量传递方式确定待编译文件；
36.代码统一编译模块，用于识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
37.为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：
38.存储器，存储至少一个计算机程序；及
39.处理器，执行所述存储器中存储的计算机程序以实现上述所述的代码统一编译方法。
40.为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的代码统一编译方法。
41.本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译方法、装置、电子设备及计算机可读存储介质，可以解决展示代码统一编译困难的问题。
附图说明
42.图1为本发明一实施例提供的代码统一编译方法的流程示意图；
43.图2为图1中其中一个步骤的详细实施流程示意图；
44.图3为图1中另一个步骤的详细实施流程示意图；
45.图4为图1中另一个步骤的详细实施流程示意图；
46.图5为图4中其中一个步骤的详细实施流程示意图；
47.图6为图4中另一个步骤的详细实施流程示意图；
48.图7为本发明一实施例提供的代码统一编译装置的功能模块图；
49.图8为本发明一实施例提供的实现所述代码统一编译方法的电子设备的结构示意图。
50.本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
51.应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
52.本发明实施例提供一种代码统一编译方法。所述代码统一编译方法的执行主体包括但不限于服务端、终端等能够被配置为执行本发明实施例提供的该方法的电子设备中的至少一种。换言之，所述代码统一编译方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。所述服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(contentdelivery network，cdn)、以及大数据和人工智能平台等基础云计算服务的云服务器。
53.参照图1所示，为本发明一实施例提供的代码统一编译方法的流程示意图。在本实施例中，所述代码统一编译方法包括以下步骤s1-s5：
54.s1、构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识
别出展示内容。
55.本发明实施例中，所述前端项目是指通过html，css及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的项目，例如，xxapp开发项目、xx公司官网开发项目、xx产品页面开发项目、xx小程序开发项目等。
56.详细地，参照图2所示，所述构建前端项目的代码编译项目，包括以下步骤s10-s11：
57.s10、定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；
58.s11、在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。
59.本发明实施例中，所述代码编译项目用来在前端页面中执行下述s2至s4的步骤来将代码进行统一编译。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmi html-prop-transform-slot-d，则可以添加代码统一编译工具到当前框架项目中，设置编译配置文件config.js，在编译配置文件中添加代码统一编译命令：npm run transform-slot并执行，得到代码编译项目，其中，编译配置文件中的配置内容包括：项目中开发代码所在目录等。
60.本发明一可选实施例中，通过代码编译项目可以将前端项目中所有组件之间通过html文本进行传递的方式，统一编译为slot插槽语法。
61.详细地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：
62.根据所述代码编译项目遍历所述前端项目的项目目录；
63.从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；
64.确定所述目标组件中展示标签内的所有代码作为所述展示内容。
65.本发明一可选实施例中，根据代码编译项目中编译配置文件config.js中所配置的配置项：项目中开发代码所在目录，遍历前端项目的项目目录，查找到所有的.vue结尾的文件作为目标组件，由于在vue组件中，所有与页面展示相关的代码，都是编写在template标签(即展示标签)内的，所以查找在当前vue组件中template标签内的所有代码作为展示内容。
66.s2、根据所述展示内容的变量传递方式确定待编译文件。
67.本发明实施例中，变量传递方式是指组件间方法、变量等的互相传递，例如传递展示动态内容时，父级组件通过一个动态变量传递到子组件，子组件获取动态变量后使用即可。
68.具体地，参照图3所示，所述根据所述展示内容的变量传递方式确定待编译文件，包括以下步骤s20-s21：
69.s20、根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；
70.s21、确定变量传递方式为父级传递的目标组件为所述待编译文件。
71.本发明一可选实施例中，由于本发明主要对动态展示内容的代码进行编译，而动态变化的部分，主要是靠外部父级的组件传递进来，因此需要确定变量传递方式为父级传递的目标组件为待编译文件。
72.本发明实施例中，例如，首先查找在当前vue组件的template标签中，是否包含使
用关键字标签v-html，如果没有，则说明该组件不存在使用父级动态传入html字符串展示内容的场景，如果有，则取出v-html属性的对应值，判断其取值是否来自于与父级组件传递，判断方式为，该变量是否包含在vue组件中props属性内部，如果在其内部，则说明是来自于父级组件的传递变量。如果成立，则说明是通过父级传递的方式，确定当前目标组件为所述待编译文件，如果不成立，则说明该v-html使用的场景，并不是通过父级传递的方式实现。
73.s3、识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
74.本发明实施例中，由于所述待编译文件中在进行内容展示时，可能会使用多个关键词标签，例如，一个vue组件中，同时存在1个以上的v-html标签的场景，且v-html属性对应的变量，包含在vue组件中props属性内部，说明当前vue组件使用超过了1个以上的父级动态传入html字符串展示内容。
75.详细地，参照图4所示，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤s30-s32：
76.s30、判断所述待编译文件中关键词标签的数量是否单一；
77.若所述待编译文件中关键词标签的数量单一，则执行s31、利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；
78.若所述待编译文件中关键词标签的数量不单一，则执行s32、利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换。
79.本发明实施例中，由于不同数据传递方式中需要转换的变量不同，因此通过细化目标组件中的不同数据传递方式，可以提高代码统一编译的准确率及效率。
80.本发明一可选实施例中，在vue组件中，由于单v-html标签及多个v-html标签的代码编译方式不同，因此需要通过关键词标签的数量来确定不同的代码编译方式，从而提高编译的准确率。
81.进一步地，参照图5所示，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤s310-s313：
82.s310、在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；
83.s311、查找所述待编译文件中所有目标组件的父组件；
84.s312、识别出所述父组件中用于引用所述目标组件的第一引用变量；
85.s313、将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。
86.本发明一可选实施例中，所述闭合标签可以为slot闭合标签，对于单v-html标签的场景，通过下述步骤进行代码编译：
87.1.1、在当前目标组件所包含v-html属性的标签内，增加一个slot闭合标签。例如：《标签av-html＝动态变量》默认值xxx《/标签a》，则编译为《标签av-html＝动态变量》《slot》《/slot》《/标签a》，同时将v-html整个属性连同属性值一并删除。该slot闭合标签存在的情况下，当父组件有传入动态标签的时候，就会自动替换掉该标签，该部分也就属于当前目
标组件中动态加载展示内容的部分；
88.1.2、设置slot闭合标签内的默认值，在原来所包含v-html属性的标签内，如1.1所示，包含默认值xxx，该默认值的作用是，当父组件没有传入动态变量的情况下，依然有默认的内容可以用于展示。对于使用slot闭合标签的情况下，该默认展示内容需要从原来的标签中提取出俩，然后再插入到现有已经生成的slot标签内，如《标签av-html＝动态变量》《slot》默认值xxx《/slot》《/标签a》；
89.1.3、通过编译配置文件config.js中所配置的第一项：项目中开发代码所在的目录，查找到所有包含有引入目标组件的父组件，在父组件中的展示标签template内，查找到引用该子组件的位置，例如：《父组件标签》《子组件a:htmltext＝动态变量a》《/子组件a》《/父组件标签》，通过子组件中props对象中，所引用的v-html属性中对应的传入变量(即上面1.2例子中的htmltext属性)，反向查找到父组件给子组件传递时候，所使用到该变量(即上面1.2例子中的动态变量a)，由于该变量原来是一个html的字符串格式，但是使用slot插槽的方式，只需要直接使用html标签的格式即可，所以需要将html字符串格式编码转换为html标签(即第一引用标签)的形式。操作步骤如下：由于html字符串内，是通过类似于如下方式进行变量拼接的：`《标签》${变量}《标签》`，而html标签格式，是不包含首尾两个`符号的，且在template模板标签内，对于动态变量的编写，是通过差值表达式，如{{变量}}进行书写的，所以需要去掉模板字符串中首尾两个`符号，然后将${变量}替换为{{变量}}形式，将得到一个html标签的形式的标签；
90.1.4、由于在1.3中已知引入目标组件的位置，该目标组件的引用标签内，包含这个父组件给目标组件传递v-html变量的动态属性，将该部分内容进行删除(即上面例子中的:htmltext＝动态变量a)，将得到的动态html标签，插入到目标组件标签之中，如《父组件标签》《子组件a》动态html标签《/子组件a》《/父组件标签》，动态html标签会在目标组件中，替换掉目标组件的《slot》《/slot》标签，从而完成代码统一编译。
91.详细地，参照图6所示，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤s320-s322：
92.s320、在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；
93.s321、查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；
94.s322、将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。
95.本发明一可选实施例中，对于多个v-html标签的场景，和上述1.1至1.4类似，只需在新增的slot闭合标签内进行标志位操作，例如，在新增的slot标签内，增加name属性，该属性的值按照v-html在子组件的出现顺序，通过26个字母顺序进行定义，如插槽-a、插槽-b、...。对于《slot name＝插槽-a》《/slot》...《slot name＝插槽-b》《/slot》，中间的三个点表示子组件中的固定内容，前后两个slot为动态传入的内容。并且对于得到的动态html标签，先用一个template标签将这个动态标签进行包裹起来，给该template标签增加一个名称为v-slot属性，该属性值为name的值。例如《子组件a》《template v-slot＝插槽-a》动态html标签《/template》《template v-slot＝插槽-b》动态html标签《/template》《/子组件
a》。这样传入对于传入不同的a、b两个动态html片段，就可以与不同目标组件中对应的slot标签上的name属性一一对应起来，便于定向替换slot标签中的内容。
96.本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译方法，可以解决展示代码统一编译困难的问题。
97.如图7所示，是本发明一实施例提供的代码统一编译装置的功能模块图。
98.本发明所述代码统一编译装置100可以安装于电子设备中。根据实现的功能，所述代码统一编译装置100可以包括代码编译项目构建模块101、文件查找模块102及代码统一编译模块103。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。
99.在本实施例中，关于各模块/单元的功能如下：
100.所述代码编译项目构建模块101，用于构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；
101.所述文件查找模块102，用于根据所述展示内容的变量传递方式确定待编译文件；
102.所述代码统一编译模块103，用于识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
103.详细地，所述代码统一编译装置100各模块的具体实施方式如下：
104.步骤一、构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容。
105.本发明实施例中，所述前端项目是指通过html，css及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的项目，例如，xxapp开发项目、xx公司官网开发项目、xx产品页面开发项目、xx小程序开发项目等。
106.详细地，所述构建前端项目的代码编译项目，包括：
107.定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；
108.在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。
109.本发明实施例中，所述代码编译项目用来在前端页面中执行下述步骤二至步骤三的步骤来将代码进行统一编译。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmi html-prop-transform-slot-d，则可以添加代码统一编译工具到当前框架项目中，设置编译配置文件config.js，在编译配置文件中添加代码统一编译命令：npm run transform-slot并执行，得到代码编译项目，其中，编译配置文件中的配置内容包括：项目中开发代码所在目录等。
110.本发明一可选实施例中，通过代码编译项目可以将前端项目中所有组件之间通过html文本进行传递的方式，统一编译为slot插槽语法。
111.详细地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：
112.根据所述代码编译项目遍历所述前端项目的项目目录；
113.从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；
114.确定所述目标组件中展示标签内的所有代码作为所述展示内容。
115.本发明一可选实施例中，根据代码编译项目中编译配置文件config.js中所配置的配置项：项目中开发代码所在目录，遍历前端项目的项目目录，查找到所有的.vue结尾的文件作为目标组件，由于在vue组件中，所有与页面展示相关的代码，都是编写在template标签(即展示标签)内的，所以查找在当前vue组件中template标签内的所有代码作为展示内容。
116.步骤二、根据所述展示内容的变量传递方式确定待编译文件。
117.本发明实施例中，变量传递方式是指组件间方法、变量等的互相传递，例如传递展示动态内容时，父级组件通过一个动态变量传递到子组件，子组件获取动态变量后使用即可。
118.具体地，所述根据所述展示内容的变量传递方式确定待编译文件，包括：
119.根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；
120.确定变量传递方式为父级传递的目标组件为所述待编译文件。
121.本发明一可选实施例中，由于本发明主要对动态展示内容的代码进行编译，而动态变化的部分，主要是靠外部父级的组件传递进来，因此需要确定变量传递方式为父级传递的目标组件为待编译文件。
122.本发明实施例中，例如，首先查找在当前vue组件的template标签中，是否包含使用关键字标签v-html，如果没有，则说明该组件不存在使用父级动态传入html字符串展示内容的场景，如果有，则取出v-html属性的对应值，判断其取值是否来自于与父级组件传递，判断方式为，该变量是否包含在vue组件中props属性内部，如果在其内部，则说明是来自于父级组件的传递变量。如果成立，则说明是通过父级传递的方式，确定当前目标组件为所述待编译文件，如果不成立，则说明该v-html使用的场景，并不是通过父级传递的方式实现。
123.步骤三、识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
124.本发明实施例中，由于所述待编译文件中在进行内容展示时，可能会使用多个关键词标签，例如，一个vue组件中，同时存在1个以上的v-html标签的场景，且v-html属性对应的变量，包含在vue组件中props属性内部，说明当前vue组件使用超过了1个以上的父级动态传入html字符串展示内容。
125.详细地，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
126.判断所述待编译文件中关键词标签的数量是否单一；
127.若所述待编译文件中关键词标签的数量单一，则利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；
128.若所述待编译文件中关键词标签的数量不单一，则利用第二代码编译方式对所述
待编译文件进行标签替换及组件传递方式转换。
129.本发明实施例中，由于不同数据传递方式中需要转换的变量不同，因此通过细化目标组件中的不同数据传递方式，可以提高代码统一编译的准确率及效率。
130.本发明一可选实施例中，在vue组件中，由于单v-html标签及多个v-html标签的代码编译方式不同，因此需要通过关键词标签的数量来确定不同的代码编译方式，从而提高编译的准确率。
131.进一步地，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
132.在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；
133.查找所述待编译文件中所有目标组件的父组件；
134.识别出所述父组件中用于引用所述目标组件的第一引用变量；
135.将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。
136.本发明一可选实施例中，所述闭合标签可以为slot闭合标签，对于单v-html标签的场景，通过下述步骤进行代码编译：
137.1.1、在当前目标组件所包含v-html属性的标签内，增加一个slot闭合标签。例如：《标签av-html＝动态变量》默认值xxx《/标签a》，则编译为《标签a v-html＝动态变量》《slot》《/slot》《/标签a》，同时将v-html整个属性连同属性值一并删除。该slot闭合标签存在的情况下，当父组件有传入动态标签的时候，就会自动替换掉该标签，该部分也就属于当前目标组件中动态加载展示内容的部分；
138.1.2、设置slot闭合标签内的默认值，在原来所包含v-html属性的标签内，如1.1所示，包含默认值xxx，该默认值的作用是，当父组件没有传入动态变量的情况下，依然有默认的内容可以用于展示。对于使用slot闭合标签的情况下，该默认展示内容需要从原来的标签中提取出俩，然后再插入到现有已经生成的slot标签内，如《标签a v-html＝动态变量》《slot》默认值xxx《/slot》《/标签a》；
139.1.3、通过编译配置文件config.js中所配置的第一项：项目中开发代码所在的目录，查找到所有包含有引入目标组件的父组件，在父组件中的展示标签template内，查找到引用该子组件的位置，例如：《父组件标签》《子组件a:htmltext＝动态变量a》《/子组件a》《/父组件标签》，通过子组件中props对象中，所引用的v-html属性中对应的传入变量(即上面1.2例子中的htmltext属性)，反向查找到父组件给子组件传递时候，所使用到该变量(即上面1.2例子中的动态变量a)，由于该变量原来是一个html的字符串格式，但是使用slot插槽的方式，只需要直接使用html标签的格式即可，所以需要将html字符串格式编码转换为html标签(即第一引用标签)的形式。操作步骤如下：由于html字符串内，是通过类似于如下方式进行变量拼接的：`《标签》${变量}《标签》`，而html标签格式，是不包含首尾两个`符号的，且在template模板标签内，对于动态变量的编写，是通过差值表达式，如{{变量}}进行书写的，所以需要去掉模板字符串中首尾两个`符号，然后将${变量}替换为{{变量}}形式，将得到一个html标签的形式的标签；
140.1.4、由于在1.3中已知引入目标组件的位置，该目标组件的引用标签内，包含这个父组件给目标组件传递v-html变量的动态属性，将该部分内容进行删除(即上面例子中的:
htmltext＝动态变量a)，将得到的动态html标签，插入到目标组件标签之中，如《父组件标签》《子组件a》动态html标签《/子组件a》《/父组件标签》，动态html标签会在目标组件中，替换掉目标组件的《slot》《/slot》标签，从而完成代码统一编译。
141.详细地，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：
142.在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；
143.查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；
144.将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。
145.本发明一可选实施例中，对于多个v-html标签的场景，和上述1.1至1.4类似，只需在新增的slot闭合标签内进行标志位操作，例如，在新增的slot标签内，增加name属性，该属性的值按照v-html在子组件的出现顺序，通过26个字母顺序进行定义，如插槽-a、插槽-b、...。对于《slot name＝插槽-a》《/slot》...《slot name＝插槽-b》《/slot》，中间的三个点表示子组件中的固定内容，前后两个slot为动态传入的内容。并且对于得到的动态html标签，先用一个template标签将这个动态标签进行包裹起来，给该template标签增加一个名称为v-slot属性，该属性值为name的值。例如《子组件a》《template v-slot＝插槽-a》动态html标签《/template》《template v-slot＝插槽-b》动态html标签《/template》《/子组件a》。这样传入对于传入不同的a、b两个动态html片段，就可以与不同目标组件中对应的slot标签上的name属性一一对应起来，便于定向替换slot标签中的内容。
146.本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译装置，可以解决展示代码统一编译困难的问题。
147.如图8所示，是本发明一实施例提供的实现代码统一编译方法的电子设备的结构示意图。
148.所述电子设备可以包括处理器10、存储器11、通信接口12和总线13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如代码统一编译程序。
149.其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：sd或dx存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(smart media card，smc)、安全数字(secure digital，sd)卡、闪存卡(flash card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如代码统一编译程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
150.所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(central processing unit，cpu)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(control unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如代码统一编译程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。
151.所述通信接口12用于上述电子设备与其他设备之间的通信，包括网络接口和用户接口。可选地，所述网络接口可以包括有线接口和/或无线接口(如wi-fi接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。所述用户接口可以是显示器(display)、输入单元(比如键盘(keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是led显示器、液晶显示器、触控式液晶显示器以及oled(organic light-emitting diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。
152.所述总线13可以是外设部件互连标准(peripheral component interconnect，简称pci)总线或扩展工业标准结构(extended industry standard architecture，简称eisa)总线等。该总线13可以分为地址总线、数据总线、控制总线等。所述总线13被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。
153.图8仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图8示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。
154.例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、wi-fi模块等，在此不再赘述。
155.进一步地，所述电子设备还可以包括网络接口，可选地，所述网络接口可以包括有线接口和/或无线接口(如wi-fi接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。
156.可选地，该电子设备还可以包括用户接口，用户接口可以是显示器(display)、输入单元(比如键盘(keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是led显示器、液晶显示器、触控式液晶显示器以及oled(organic light-emitting diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。
157.应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。
158.所述电子设备中的所述存储器11存储的代码统一编译程序是多个指令的组合，在
所述处理器10中运行时，可以实现：
159.构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；
160.根据所述展示内容的变量传递方式确定待编译文件；
161.识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
162.具体地，所述处理器10对上述指令的具体实现方法可参考附图对应实施例中相关步骤的描述，在此不赘述。
163.进一步地，所述电子设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。所述计算机可读存储介质可以是易失性的，也可以是非易失性的。例如，所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read-only memory)。
164.本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：
165.构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；
166.根据所述展示内容的变量传递方式确定待编译文件；
167.识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。
168.在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
169.所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
170.另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
171.对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。
172.因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。
173.本发明实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工
智能(artificial intelligence，ai)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。
174.人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
175.本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
176.此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。
177.最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。