CN110362317B - 一种代码转换方法、装置和存储介质 - Google Patents

Abstract

本发明公开了一种代码转换方法、装置和存储介质；本发明首先接收代码转换请求；然后根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；再获取对应客户端的代码转换规则；最后根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。采用本发明提供的技术方案，屏蔽了浏览器端编程规范和客户端编程规范的差异，开发者在进行开发时，只需要按照浏览器端的编程规范完成浏览器端源代码的编写，之后采用本发明即可将适于在浏览器端运行的源代码转换为适于在客户端运行的源代码，实现代码同构的目的，从而使得应用开发的效率得以提升。

Description

一种代码转换方法、装置和存储介质

技术领域

本发明涉及计算机技术领域，具体涉及一种代码转换方法、装置和存储介质。

背景技术

在目前的编程开发中，浏览器端的应用开发方式和客户端的应用开发方式存在显著的差异，对于开发者来说，为了在浏览器端和客户端实现同一应用的开发，需要学习浏览器端的知识体系以及客户端的知识体系，并且需要熟悉两套不同的代码才能实现各自的应用开发，这就使得应用开发的难度显著提升，影响了应用开发的效率。

发明内容

本发明实施例提供一种代码转换方法、装置和存储介质，可以实现浏览器端和客户端之间的代码同构，提升应用开发的效率。

本发明实施例提供一种代码转换方法，包括：

接收代码转换请求；

根据所述代码转换请求获取需要转换的第一源代码，所述第一源代码适于在浏览器端运行；

获取对应客户端的代码转换规则；

根据所述代码转换规则，将所述第一源代码转换为第二源代码，所述第二源代码适于在所述客户端运行。

对应的，本发明实施例还提供了一种代码转换装置，包括：

请求接收模块，用于接收代码转换请求；

代码获取模块，用于根据所述代码转换请求获取需要转换的第一源代码，所述第一源代码适于在浏览器端运行；

规则获取模块，用于获取对应客户端的代码转换规则；

代码转换模块，用于根据所述代码转换规则，将所述第一源代码转换为第二源代码，所述第二源代码适于在所述客户端运行。

对应的，本发明实施例还提供一种存储介质，所述存储介质存储有指令，所述指令被处理器执行时实现本发明任一实施例提供的代码转换方法。

本发明实施例首先接收代码转换请求；然后根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；再获取对应客户端的代码转换规则；最后根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。采用本发明提供的技术方案，屏蔽了浏览器端编程规范和客户端编程规范的差异，开发者在进行开发时，只需要按照浏览器端的编程规范完成浏览器端源代码的编写，之后采用本发明方案即可将适于在浏览器端运行的源代码转换为适于在客户端运行的源代码，实现代码同构的目的，从而使得应用开发的效率得以提升。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的代码转换方法的应用场景示例图。

图2a是本发明实施例提供的代码转换方法的第一种流程示意图。

图2b是本发明实施例中提供的代码转换界面的的示意图。

图3a是本发明实施例提供的代码转换方法的技术方案示意图。

图3b是本发明实施例提供的代码转换方法的第二种流程示意图。

图3c是本发明实施例中不同类型第一源代码模块的转换结果示意图。

图3d是本发明实施例中Babel编译器转换流程示意图。

图4是本发明实施例通过的代码转换装置的结构示意图。

图5是本发明实施例提供的终端的结构示意图。

具体实施方式

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

本发明实施例提供一种代码转换方法及装置，该代码转换方法由代码转换装置执行，该代码转换装置可以集成在具备存储器并安装有处理器而具有运算能力的终端中。

请参照图1，该图为本发明实施例所提供的代码转换方法的应用场景示例图，该场景中可以包括代码转换装置，该代码转换装置具体可以集成在终端中。该代码转换装置可以用于接收开发者输入的代码转换请求；然后，根据接收到的代码转换器获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；再获取对应客户端的代码转换规则；最后根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。

此外，图1所示的服务器可以对代码转换规则进行维护，使其处于最新版本，并向终端提供代码转换规则更新服务，由此使得终端可以时刻从服务器处获得最新版本的代码转换规则，实现浏览器端到客户端的代码转换。

以下将对本发明实施例所提供的代码转换方法进行详细说明。

在本实施例中，将从代码转换装置的角度进行描述，该代码转换装置具体可以集成在终端中，用于实现浏览器端源代码到客户端源代码的转换。

一种代码转换方法，包括：接收代码转换请求；根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；获取对应客户端的代码转换规则；根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。

请参照图2a，图2a是本发明实施例提供的代码转换方法的流程示意图，如图2a所示，该代码转换方法包括：

在步骤101中，接收代码转换请求。

其中，代码转换装置可以通过多种不同的方式接收代码转换请求。

比如，代码转换装置可以通过其所在的终端向开发者提供代码转换界面，该代码转换界面包括请求输入接口，如图2b所示，该请求输入接口可以为输入框的形式，开发者可以在该输入框形式的请求输入接口中键入需要转换的源代码(此处为适于在浏览器端运行的源代码，也即是按照浏览器端的编程规范编写得到的源代码)的物理路径信息，并输入确认信息(如直接按下键盘的回车键)以触发代码转换请求，该代码转换请求携带有开发者输入的物理路径信息。

又比如，在图2b所述的代码转换界面界面中，还包括“打开”控件，一方面，代码转换装置在侦测到该打开控件触发时，将在代码转换界面之上弹出源代码选择子界面(图2b未示出)，该源代码选择子界面向开发者提供终端当前的文件目录，供开发者查找并选中需要转换的源代码(此处为适于在浏览器端运行的源代码，也即是按照浏览器端的编程规范编写得到的源代码)的图标(或快捷方式)；另一方面，开发者可以在选中需要转换的源代码的图标之后，触发源代码选择子界面提供的确认控件，以向代码转换装置输入代码转换请求，该代码转换请求与开发者选中的源代码的图标相关联。

又比如，开发者还可以直接将需要转换的源代码(此处为适于在浏览器端运行的源代码，也即是按照浏览器端的编程规范编写得到的源代码)的图标、或者需要转换的源代码所在的项目文件夹的图标拖入到代码转换界面，以向代码转换装置输入代码转换请求，该代码转换请求与开发者拖动的源代码的图标相关联。

此外，本领域技术人员还可以根据实际需要设置其它输入代码转换请求的具体实现方式，本发明对此不做具体限制。

在步骤102中，根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行。

为便于区分，以下将需要转换的源代码称作第一源代码。

本发明实施例中，代码转换装置在接收到代码转换请求之后，根据代码转换请求的具体触发方式，相应获取到需要转换的第一源代码。

比如，代码转换装置在接收到开发者通过请求输入接口所输入的代码转换请求时，可首先解析出该代码转换请求所携带的物理路径信息，然后根据解析出的物理路径信息直接定位到需要转换的第一源代码，并获取到该第一源代码。

又比如，代码转换装置在接收到开发者基于打开控件输入的代码转换请求时，首先通过与代码转换请求关联的图标(即用户选中的需要转换的源代码的图标)获取到需要转换的第一源代码的物理路径信息，然后根据获取到的物理路径信息直接定位到需要转换的第一源代码，并获取到该第一源代码。

又比如，代码转换装置在接收到开发者通过“拖动操作”输入的代码转换请求时，首先通过与代码转换请求关联的图标(即用户选中的需要转换的源代码的图标)获取到需要转换的第一源代码的物理路径信息，然后根据获取到的物理路径信息直接定位到需要转换的第一源代码，并获取到该第一源代码。

需要说明的是，代码转换装置获取到的第一源代码适于在浏览器端运行，也即是说该第一源代码经编译后在浏览器端运行将实现开发者预定的应用效果。

在步骤103中，获取对应客户端的代码转换规则。

需要说明的是，在本发明实施例中，目的在于实现浏览器端源代码到客户端源代码的转换，代码转换装置在根据接收到的代码转换请求获取到需要转换的第一源代码之后，进一步获取到对应客户端的代码转换规则。

其中，代码转换规则可以预先设置，并存储在终端的本地，用于实现浏览器端源代码到客户端源代码的转换，在需要时，代码转换装置可以从其所在终端的本地存储中获取到该对应客户端的代码转换规则。

可选的，代码转换规则还可以存储在服务器，在需要时，代码转换装置通过其所在终端向服务器发送规则获取请求，该规则获取请求用于指示服务器返回对应客户端的代码转换规则；在向服务器发送规则获取请求之后，代码转换装置接收服务器返回的代码转换规则。

在步骤104中，根据获取到的代码转换规则，将第一源代码转换为第二源代码，第二源代码适于在客户端运行。

形象的说，可以将浏览器端和客户端看做是不同语言体系的两个“人”：甲和乙，虽然他们使用的语言不同，但都可以采用各自的语言来表达相同的意思。第一源代码可以看做是甲采用其语言体系的语言，第二源代码可以看做是乙采用其语言体系的语言，第一源代码到第二源代码的转换也即是甲乙二者之间语言的转换，通俗的说，即翻译。相应的，可将代码转换规则看做是甲乙之间不同语言体系的翻译规则。

在具体实施时，代码转换规则可以包括对应客户端的编程规范的代码模板集合，该代码模板集合中包括实现不同功能的多个代码模板。在进行第一源代码到第二源代码的转换时，首先对第一源代码进行解析，获取到其中源代码语句的语义，对于这些源代码语句，根据获取到的语义识别到源代码语句所要实现的功能，然后套用实现相同功能的代码模板，转换得到对应客户端的编程规范的源代码语句，在完成第一源代码中全部源代码语句的转换之后，即实现了第一源代码到第二源代码的转换。

可选的，在一实施例中，接收代码转换请求之前，还包括：

获取浏览器端的第一编程规范和客户端的第二编程规范之间的差异信息；

根据获取到的差异信息设置对应客户端的代码转换规则。

需要说明的是，适于浏览器端的源代码之所以不适于在客户端运行，主要原因是在进行应用开发时，浏览器端和客户端采用的编程规范不同，二者编程规范之间的差异导致适于浏览器端的源代码不适于在客户端运行。比如，浏览器端采用HTML编程规范，客户端采用React native编程规范，按照HTML编程规范所编写的源代码适于在浏览器端运行，但显然不适于在客户端运行。

因此，在本发明实施例中，代码转换装置可以预先确定浏览器端采用的第一编程规范，以及确定客户端采用的第二编程规范，然后获取浏览器端采用的第一编程规范和客户端采用的第二编程规范之间的差异信息，再根据第一编程规范和第二编程规范之间的差异信息设置对应客户端的代码转换规则。

比如，在浏览器端采用HTML(HyperText Markup Language，超文本标记语言)编程规范，客户端采用React native编程规范时，代码转换装置可以获取到HTML编程规范和React native编程规范之间的差异信息，根据该差异信息设置代码转换规则，通过该代码转换规则即可将符合HTML编程规范的源代码转换为符合React native编程规范的源代码。

可具体的，在一实施例中，为提升代码转换效率，根据获取到的代码转换规则，将第一源代码转换为第二源代码，包括：

解析第一源代码，将第一源代码划分为实现不同功能的多个源代码模块；

识别多个源代码模块中的第一源代码模块，第一源代码模块不适于在客户端运行；

根据获取到的代码转换规则，将第一源代码模块转换为第二源代码模块，第二源代码模块适于在客户端运行；

将包括第二源代码模块的第一源代码作为第二源代码。

需要说明的是，虽然浏览器端和客户端采用了不同的编程规范，使得浏览器端的完整源代码不适于在客户端运行(或者说不兼容)，但是，二者编程规范之间并非完全不同，也即是说，浏览器端源代码的部分代码语句能够在客户端运行(或者说这部分源代码语句被客户端兼容)，并实现相同的功能。因此，本发明实施例中，在进行第一源代码到第二源代码的转换时，可以识别出第一源代码中不适于客户端运行的源代码语句(或者说客户端不兼容的源代码语句)，将不适于客户端运行的源代码语句转换为适于客户端运行的源代码语句。

在实际编程过程中，开发者通常是逐条的编写代码语句，通过一条代码语句或多条代码语句的组合实现不同的功能，本发明实施例中将这种实现特定功能的源代码语句和源代码语句的组合定义为源代码模块。

具体的，在进行第一源代码到第二源代码的转换时，首先对需要转换的第一源代码进行解析，按照实现功能的不同将第一源代码划分为实现不同功能的多个源代码模块。

在划分得到实现不同功能的多个源代码模块之后，进一步对划分得到的多个源代码模块进行识别，以确定多个源代码模块中不适于在客户端运行的第一源代码模块。

在识别到不适于在客户端运行的第一源代码模块之后，根据获取到的代码转换规则，将第一源代码模块转换为适于在客户端运行的第二源代码模块。

在将第一源代码模块转换为适于在客户端运行的第二源代码模块之后，由于第一源代码中除第一源代码模块之外的其它源代码模块均适于在客户端运行，而此时转换得到的第二源代码模块也适于在客户端运行，因此即可将包括第二源代码模块的第一源代码作为第二源代码，或者说将第一源代码模块被转换为第二源代码模块的第一源代码作为第二源代码。

可具体的，在一实施例中，识别多个源代码模块中的第一源代码模块，包括：

将多个源代码模块与第一编程规范和第二编程规范之间的差异信息进行匹配；

将匹配成功源代码模块作为第一源代码模块。

本发明实施例中，在完成对第一源代码的解析，且将第一源代码划分为多个源代码模块之后，将划分得到的多个源代码模块分别与前述差异信息(即浏览器端采用的第一编程规范和客户端采用的第二编程规范之间的差异信息)进行匹配，以匹配出不符合第二编程规范的源代码模块。其中，由于匹配出的源代码模块不符合第二编程规范，显然的，该匹配出的源代码模块将不适于在客户端运行。

在匹配出不符合第二编程规范的源代码模块时，将该匹配成功的源代码模块作为第一源代码模块，也即是不适于客户端运行的源代码模块。

可选的，在一实施例中，根据差异信息设置对应客户端的代码转换规则之后，还包括：

生成包括差异信息以及代码转换规则的语法转换器；

而获取对应客户端的代码转换规则，包括：

创建对应第二编程规范的编译环境；

在创建的编译环境中加载生成的语法转换器。

本发明实施例中，将第一编程规范和第二编程规范之间的差异信息、以及代码转换规则打包生成语法转换器，该语法转换器可以插件的形式存在。

在获取对应客户端的代码转换规则时，代码转换装置首先创建对应第二编程规范的编译环境，其中，对于编译环境的创建方式，本发明实施例不做限制，本领域技术人员可根据实际需要预先编写创建对应第二编程规范的编译环境的可执行脚本；在需要创建对应第二编程规范的编译环境时，代码转换装置执行前述可执行脚本即可实现编译环境的创建。

在完成编译环境的创建之后，在创建的编译环境中加载生成的语法转换器，由于语法转换器包括第一编程规范和第二编程规范之间的差异信息、以及对应客户端的代码转换规则，当完成语法转换器的加载时，也即获取到对应客户端的代码转换规则。

可具体的，在本发明实施例，根据对应客户端的代码转换规则，将第一源代码转换为第二源代码，包括：

将第一源代码输入到语法转换器中，指示语法转换器根据差异信息识别第一源代码中的第一源代码模块，并根据代码转换规则将第一源代码模块转换为第二源代码模块；

获取语法转换器输出的包括第二源代码模块的第一源代码；

将包括第二源代码模块的第一源代码作为第二源代码。

本发明实施例中，代码转换装置在获取到需要转换的第一源代码之后，将获取到的第一源代码输入到语法转换器中，等待语法转换器输出转换后的第一源代码。

语法转换器在接收到输入的第一源代码之后，自动对第一源代码进行解析，将第一源代码划分为多个实现不同功能的源代码模块，并根据前述差异信息从多个源代码模块中识别出不适于在客户端运行的第一源代码模块，之后，根据对应客户端的代码转换规则将识别出的第一源代码模块转换为适于在客户端运行的第二源代码模块。在完成对第一源代码模块的转换之后，语法转换器输出包括第二源代码模块的第一源代码。

相应的，代码转换装置获取语法转换器输出的、包括第二源代码模块的第一源代码，由于第一源代码中除第一源代码模块之外的其它源代码模块均适于在客户端运行，而其中不适于在客户端运行的第一源代码模块也被转换为适于在客户端运行的第二源代码模块，此时，代码转换装置将语法转换器输出的、包括第二源代码模块的第一源代码作为适于在客户端运行的第二源代码。

可具体的，在一实施例中，在第一编程规范为HTML编程规范，且第二编程规范为React Native编程规范时，将第一源代码模块转换为第二源代码模块，包括：

在第一源代码模块为HTML标签时，将该HTML标签转换为实现其相同功能的第一React Native组件，并将转换得到的第一React Native组件作为第二源代码模块；

或者，在第一源代码模块为全局变量或全局方法时，将该全局变量或全局方法转换为对应的React Native模块，并将转换得到的React Native模块作为第二源代码模块；

或者，在第一源代码模块为CSS(Cascading Style Sheets，层叠式样式表单)样式时，将该CSS样式转换为实现其相同功能的React Native CSS样式，将转换得到的ReactNative CSS样式作为第二源代码模块；

或者，在第一源代码模块为HTML组件时，将该HTML组件转换为组件代理组件，将转换得到的组件代理组件作为第二源代码模块，该组件代理组件在执行时调用实现HTML组件相同功能的第二React native组件。

其中，以HTML编程规范的最新版本HTML5(缩写为H5)为例，H5编程规范由万维网联盟制定并发布，其设计目的是为了在移动设备设备上支持多媒体。由于H5编程规范能够提供丰富的可实现功能，按照H5编程规范开发的网页应用也能够拥有更短的启动时间，更快的联网速度，而且，如火狐浏览器、谷歌浏览器等常用浏览器均支持H5编程规范(或者说支持H5应用的运行)，开发者在浏览器端通常采用H5编程规范进行应用的开发，或者说进行网页应用的开发。

而React native的出现，让前端工程师拥有了使用JavaScript编写原生应用的能力，相比网页应用，其对于性能和用户体验有较大的提升。但是，符合React native编程规范的源代码只兼容IOS平台和安卓平台，并不兼容浏览器端的访问，也即是说，符合Reactnative编程规范的源代码适于在客户端运行，不适于在浏览器端运行；而符合H5编程规范的源代码适于在浏览器端运行，不适于在客户端运行。

其中，React native编程规范比较特殊的地方在于，其最底层的实现是Native的实现，也就导致其不支持HTML标签(如JSX语法编写的HTML标签)，因此，在第一源代码模块为HTML标签时，将HTML标签转换为实现其相同功能的第一React native组件(该第一Reactnative组件在执行过程中渲染出React native编程规范兼容的“标签”)，从而将该第一React native组件作为第二源代码模块。

在第一源代码模块为React native编程规范不兼容的全局变量或全局方法时，通过等价预定义的方式将React native不兼容的全局变量或全局方法转换为对应的Reactnative模块，从而将转换得到的React native模块作为第二源代码模块。比如，对于H5编程规范的一全局变量“window.innerWidth”，当按照代码转换规则对其进行转换后，得到React native编程规范预定义的React native模块“Dimensions.get('window').width”，二者用于实现相同的功能，即获取当前窗口的宽度。

由于React native编程规范支持的CSS样式仅为完整CSS样式很小的一个子集，大概支持50种属性，因此，在第一源代码模块为CSS样式时，将该CSS样式转换为实现其相同功能的React native CSS样式，从而将转换得到的React native CSS样式作为第二源代码模块。比如，对于H5编程规范的一CSS样式“text-align:center”，当按照代码转换规则对其进行转换后，得到符合React native编程规范的React native CSS样式“justify-content:center”，二者用于实现相同的功能，即将对应文本居中对齐。

此外，在第一源代码模块为React native编程规范不兼容的HTML组件时，将该HTML组件转换为组件代理组件(或者说，将该HTML组件替换为组件代理组件)，将转换得到的组件代理组件作为第二源代码模块。这样，组件代理组件在执行时，将根据客户端的执行环境(IOS环境或安卓环境)调用适用的第二React native组件，该第二React native组件实现与HTML组件相同的功能。

由上可知，本申请实施例提供的代码转换方法，首先接收代码转换请求；然后根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；再获取对应客户端的代码转换规则；最后根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。采用本发明提供的技术方案，屏蔽了浏览器端编程规范和客户端编程规范的差异，开发者在进行开发时，只需要按照浏览器端的编程规范完成浏览器端源代码的编写，之后采用本发明方案即可将适于在浏览器端运行的源代码转换为适于在客户端运行的源代码，实现代码同构的目的，从而使得应用开发的效率得以提升。

根据上述实施例所描述的方法，以下将举例作进一步详细说明。

目前，开发者在浏览器端通常按照H5编程规范进行应用开发，而在客户端通常按照React native编程规范进行应用开发，由于H5编程规范和React native编程规范存在天然的差异，也就使得按照H5编程规范编写的源代码不适于在客户端运行。对于开发者而言，为了同时实现在浏览器端和客户端的应用开发，就需要同时掌握H5和React native两套编程规范，存在着较大的开发难度，严重影响了应用的开发效率。

基于此，请参照图3a，本实施例提供的代码转换方法，用于将适于在浏览器端的源代码(或者说，符合H5编程规范的源代码)转换为适于在客户端运行的源代码(或者说，符合React native编程规范的源代码)，实现代码同构的目的，由此提升应用的开发效率。以下将进行详细说明。

具体的，请结合参照图3b，图3b为本实施例的流程示意图，该代码转换方法的具体流程如下：

在步骤201中，第一终端获取H5编程规范和React native编程规范之间的差异信息，并根据获取到的差异信息设置代码转换规则。

其中，在浏览器端采用H5编程规范、而客户端采用React native编程规范时，由于二者编程规范之间存在天然差异，使得按照H5编程规范编写的H5源代码适于在浏览器端运行，而不适于在客户端运行。因此，为了实现浏览器端和客户端的代码同构，首先就需要知道浏览器端和客户端之间编程规范的差异，然后才能屏蔽二者之间的差异。

本发明实施例中，第一终端首先获取到H5编程规范和React编程规范之间的差异信息，然后根据获取到差异信息来设置代码转换规则，以通过该代码转换规则实现H5源代码到React native源代码的转换。

比如，获取到的差异信息包括：React native编程规范不兼容H5编程规范的HTML标签，React native编程规范不兼容H5编程规范的部分全局变量及全局方法，Reactnative编程规范不兼容H5编程规范的部分CSS样式，以及React native编程规范不兼容H5编程规范的部分HTML组件等。

在步骤202中，第一终端将获取到的差异信息、以及设置的代码转换规则添加至Babel编译器中。

其中，Babel编译器用于实现JavaScript(缩写为JS，为一种脚本语言)高低版本之间的代码转换。本发明实施例中，由第一终端将前述差异信息以及代码转换规则添加至Babel编译器中，赋予Babel编译器实现H5源代码到React native源代码转换的功能，从而得以插件的形式向其他终端提供代码转换服务。

在步骤203中，第一终端将添加有前述差异信息以及代码转换规则的Babel编译器传输至服务器。

其中，第一终端和服务器通过网络连接，网络可以为有线网络，也可以为无线网络，网络中可以包括路由器、网关等等网络实体。第一终端在将前述差异信息以及代码转换装置添加至Babel编译器之后，即可通过网络将添加有差异信息以及代码转换规则的Babel编译器传输至服务器。

可选的，在一实施中，第一终端还可以在H5编程规范和/或React native编程规范更新时，获取更新后的H5编程规范和React native编程规范之间的差异信息，并根据该差异信息对已设置的代码转换规则进行更新，在根据更新后的差异信息以及代码转换规则，对Babel编译器中添加的差异信息以及代码转换规则进行更新，得到更新后的Babel编译器。

这样，第一终端在每次完成Babel编译器的更新之后，将更新之后的Babel编译器传输至服务器。

在步骤204中，服务器接收并存储第一终端传输的Babel编译器。

其中，服务器在存储有第一终端历史传输的Babel编译器(老版本的Babel编译器)，且接收到第一终端新传输的更新后的Babel编译器(新版本的Babel编译器)时，可以将存储的、老版本的Babel编译器替换为新版本的Babel编译器，也可以同时保持新版本和老版本的Babel编译器。

在步骤205中，服务器将存储的Babel编译器传输至第二终端。

其中，服务器可以主动向第二终端传输至第二终端，比如在每次接收到第一终端传输的Babel编译器时，即将接收到的Babel编译器传输至第二移动终端；服务器也可以在接收到第二终端的编译器获取请求时，将存储的Babel编译器传输至第二终端。

在步骤206中，第二终端接收并存储服务器传输的Babel编译器。

其中，第二终端可以在本地设置专用的编译器存储区，并在接收到服务器传输的Babel编译器时，将接收到的Babel编译器储存在该编译器存储区中。需要的说明，本发明实施例对于编译器存储区的大小以及路径设置均不做限制，可由本领域技术人员根据实际需要进行设置。

在步骤207中，第二终端接收到代码转换请求时，根据该代码转换请求获取需要转换的H5源代码。

其中，第二终端可以通过多种不同的方式接收代码转换请求。

比如，第二终端可以向开发者提供代码转换界面，该代码转换界面包括请求输入接口，如图2b所示，该请求输入接口可以为输入框的形式，开发者可以在该输入框形式的请求输入接口中键入需要转换的H5源代码的物理路径信息，并输入确认信息(如直接按下键盘的回车键)以触发代码转换请求，该代码转换请求携带有开发者输入的物理路径信息。

又比如，在图2b所述的代码转换界面界面中，还包括“打开”控件，一方面，第二终端在侦测到该打开控件触发时，将在代码转换界面之上弹出源代码选择子界面(图2b未示出)，该源代码选择子界面向开发者提供当前的文件目录，供开发者查找并选中需要转换的H5源代码的图标(或快捷方式)；另一方面，开发者可以在选中需要转换的H5源代码的图标之后，触发源代码选择子界面提供的确认控件，以向第二终端输入代码转换请求，该代码转换请求与开发者选中的源代码的图标相关联。

又比如，开发者还可以直接将需要转换的H5源代码的图标、或者需要转换的源代码所在的项目文件夹的图标拖入到代码转换界面，以向第二终端输入代码转换请求，该代码转换请求与开发者拖动的H5源代码的图标相关联。

此外，本领域技术人员还可以根据实际需要设置其它输入代码转换请求的具体实现方式，本发明对此不做具体限制。

相应的，第二终端需要根据代码转换请求的具体触发方式，相应获取到需要转换的H5源代码。

比如，代码转换装置在接收到开发者通过请求输入接口所输入的代码转换请求时，可首先解析出该代码转换请求所携带的物理路径信息，然后根据解析出的物理路径信息直接定位到需要转换的H5源代码，并获取到该H5源代码。

又比如，代码转换装置在接收到开发者基于打开控件输入的代码转换请求时，首先通过与代码转换请求关联的图标(即用户选中的需要转换的H5源代码的图标)获取到需要转换的H5源代码的物理路径信息，然后根据获取到的物理路径信息直接定位到需要转换的H5源代码，并获取到该H5源代码。

又比如，代码转换装置在接收到开发者通过“拖动操作”输入的代码转换请求时，首先通过与代码转换请求关联的图标(即用户选中的需要转换的H5源代码的图标)获取到需要转换的H5源代码的物理路径信息，然后根据获取到的物理路径信息直接定位到需要转换的H5源代码，并获取到该H5源代码。

需要说明的是，H5源代码适于在浏览器端运行，也即是说该H5源代码经编译后在浏览器端运行将实现开发者预定的应用效果。

在步骤208中，第二终端创建对应React native编程规范的编译环境，并在创建的编译环境中加载存储的Babel编译器。

其中，对于编译环境的创建方式，本发明实施例不做限制，本领域技术人员可根据实际需要预先编写创建对应React native编程规范的编译环境的可执行脚本；在需要创建对应React native编程规范的编译环境时，第二终端执行前述可执行脚本即可实现对应React native编译环境的创建。

在完成编译环境的创建之后，第二终端在创建的编译环境中加载存储的Babel编译器，以通过该Babel编译器实现H5源代码到React Native源代码的转换。

在步骤209中，第二终端将H5源代码输入Babel编译器，指示Babel编译器根据前述差异信息以及代码转换规则对H5源代码进行转换，输出对应的React native源代码。

需要说明的是，虽然H5编程规范和React native编程规范之间的差异使得H5源代码不适于在客户端运行(或者说不兼容)，但是，二者编程规范之间并非完全不同，也即是说，H5源代码的部分代码语句即符合H5编程规范，也符合React native编程规范，使得这部分源代码语句能够在客户端运行(或者说这部分源代码语句被客户端兼容)，并实现相同的功能。

在实际编程过程中，开发者通常是逐条的编写代码语句，通过一条代码语句或多条代码语句的组合实现不同的功能，本发明实施例中将这种实现特定功能的源代码语句和源代码语句的组合定义为源代码模块。

在本发明实施例中，Babel编译器在接收到第二终端输入的H5源代码之后，首先对H5源代码进行解析，将H5源代码划分为实现不同功能的多个源代码模块；之后，进一步根据H5编程规范和React native编程规范的差异信息对划分得到的多个源代码模块进行识别，以确定多个源代码模块中不适于在客户端运行的第一源代码模块，也即是不符合Reactnative编程规范的源代码模块；之后，将第一源代码模块转换为适于在客户端运行的第二源代码模块，也即是符合React native编程规范的源代码模块。

代码转换规则可以包括对应React native编程规范的代码模板集合，该代码模板集合中包括实现不同功能的多个代码模板。在进行第一源代码模块到第二源代码模块的转换时，首先对第一源代码模块进行解析，获取到其中源代码语句的语义，对于这些源代码语句，根据获取到的语义识别到源代码语句所要实现的功能，然后套用实现相同功能的代码模板，转换得到对应React native编程规范的源代码语句，这些转换后的源代码语句组合为第二源代码模块。

以下请结合参照图3c和图3d，图3c示出了不同类型第一源代码模块转的转换结果，图3d示出了Babel编译器转换H5源代码的流程，其中，Babel编译器包括JSX适配编译器、JS适配编译器、CSS适配编译器以及组件适配编译器。

比如，React native编程规范比较特殊的地方在于，其最底层的实现是Native的实现，也就导致其不支持HTML标签(如JSX语法编写的HTML标签)，因此，在第一源代码模块为HTML标签时，由JSX适配编译器将HTML标签转换为实现其相同功能的第一React native组件(该第一React native组件在执行过程中渲染出React native编程规范兼容的“标签”)，从而将该第一React native组件作为第二源代码模块，其能够通过客户端的Reactnative runtime执行。

又比如，在第一源代码模块为React native编程规范不兼容的全局变量或全局方法(如JS全局变量或JS全局方法)时，由JS适配编译器通过等价预定义的方式将Reactnative不兼容的全局变量或全局方法转换为对应的React native模块，从而将转换得到的React native模块作为第二源代码模块，其能够通过客户端的React native runtime执行。比如，对于H5编程规范的一全局变量“window.innerWidth”，当按照代码转换规则对其进行转换后，得到React native编程规范预定义的React native模块“Dimensions.get('window').width”，二者用于实现相同的功能，即获取当前窗口的宽度。

又比如，由于React native编程规范支持的CSS样式仅为完整CSS样式很小的一个子集，大概支持50种属性，因此，在第一源代码模块为CSS样式时，由CSS适配编译器将该CSS样式转换为实现其相同功能的React native CSS样式，从而将转换得到React native CSS样式作为第二源代码模块，其能够通过客户端的React native runtime执行。比如，对于H5编程规范的一CSS样式“text-align:center”，当按照代码转换规则对其进行转换后，得到符合React native编程规范的React native CSS样式“justify-content:center”，二者用于实现相同的功能，即将对应文本居中对齐。

又比如，在第一源代码模块为React native编程规范不兼容的HTML组件时，由组件适配编译器将该HTML组件转换为组件代理组件(或者说，将该HTML组件替换为组件代理组件)，将转换得到的组件代理组件作为第二源代码模块，其能够通过客户端的Reactnative runtime执行。这样，组件代理组件在执行时，将根据客户端的执行环境(IOS环境或安卓环境)调用适用的第二React native组件，该第二React native组件实现与HTML组件相同的功能。

在步骤210中，第二终端获取Babel编译器输出的React native源代码。

本发明实施例中，Babel编译器在完成第一源代码模块到第二源代码模块的转换之后，将输出包括第二源代码模块的H5源代码。由于H5源代码中除第一源代码模块之外的其它源代码模块均符合React native编程规范(也即适于在客户端运行)，而此时转换得到的第二源代码模块也符合React native编程规范(也即适于在客户端运行)，此时，即可将包括第二源代码模块的H5源代码作为React native源代码，或者说将H5源代码转换为了React native源代码。相应的，第二终端可直接获取Babel编译器输出的React native源代码。

为了便于更好的实施本发明实施例提供的代码转换方法，在一实施例中还提供了一种代码转换装置。其中名词的含义与上述代码转换方法中相同，具体实现细节可以参考方法实施例中的说明。

在一实施例中，还提供了一种代码转换装置，如图4所示，该代码转换装置300可以包括：请求接收模块301、代码获取模块302、规则获取模块303以及代码转换模块304；

请求接收模块301，用于接收代码转换请求；

代码获取模块302，用于根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；

规则获取模块303，用于获取对应客户端的代码转换规则；

代码转换模块304，用于根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。

在一实施例中，代码转换模块304具体用于：

解析第一源代码，将第一源代码划分为实现不同功能的多个源代码模块；

识别多个源代码模块中的第一源代码模块，该第一源代码模块不适于在客户端运行；

根据代码转换规则，将第一源代码模块转换为第二源代码模块，该第二源代码模块适于在客户端运行；

将包括第二源代码模块的第一源代码作为第二源代码。

在一实施例中，代码转换装置还包括规则设置模块，该规则设置模块用于：

获取浏览器端的第一编程规范和客户端的第二编程规范之间的差异信息；

根据获取到的差异信息设置对应客户端的代码转换规则。

在一实施例中，代码转换模块304还具体用于：

将多个源代码模块与差异信息进行匹配；

将匹配成功的源代码模块作为第一源代码模块。

在一实施例中，代码转换装置还包括转换器生成模块，该转换器生成模块用于：

生成包括差异信息以及代码转换规则的语法转换器；

规则获取模块还用于：

创建对应第二编程规范的编译环境；

在创建的编译环境中加载语法转换器。

在一实施例中，代码转换模块304还具体用于：

将第一源代码输入到语法转换器中，指示语法转换器根据差异信息识别第一源代码中的第一源代码模块，并将第一源代码模块转换为第二源代码模块；

获取语法转换器输出的包括第二源代码模块的第一源代码；

将包括第二源代码模块的第一源代码作为第二源代码。

在一实施例中，在第一编程规范为HTML编程规范，且第二编程规范为React编程规范时，代码转换模块304还具体用于：

在第一源代码模块为HTML标签时，将该HTML标签转换为实现其相同功能的第一React Native组件，并将转换得到的第一React Native组件作为第二源代码模块；

或者，在第一源代码模块为全局变量或全局方法时，将该全局变量或全局方法转换为对应的React Native模块，并将转换得到的React Native模块作为第二源代码模块；

或者，在第一源代码模块为CSS(Cascading Style Sheets，层叠式样式表单)样式时，将该CSS样式转换为实现其相同功能的React Native CSS样式，将转换得到的ReactNative CSS样式作为第二源代码模块；

或者，在第一源代码模块为HTML组件时，将该HTML组件转换为组件代理组件，将转换得到的组件代理组件作为第二源代码模块，该组件代理组件在执行时调用实现HTML组件相同功能的第二React native组件。

具体实施时，以上各个模块可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个模块的具体实施可参见前面的方法实施例，在此不再赘述。

由上可知，本发明实施例代码转换装置采用请求接收模块301接收代码转换请求；代码获取模块302根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；规则获取模块303获取对应客户端的代码转换规则；代码转换模块304根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。采用本发明提供的技术方案，屏蔽了浏览器端编程规范和客户端编程规范的差异，开发者在进行开发时，只需要按照浏览器端的编程规范完成浏览器端源代码的编写，之后采用本发明方案即可将适于在浏览器端运行的源代码转换为适于在客户端运行的源代码，实现代码同构的目的，从而使得应用开发的效率得以提升。

参考图5，本发明实施例提供了一种终端，可以包括一个或者一个以上处理核心的处理器401、一个或一个以上计算机可读存储介质的存储器402、射频(Radio Frequency，RF)电路403、电源404、输入单元405、以及显示单元406等部件。本领域技术人员可以理解，图5中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器401是该终端的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器402内的软件程序和/或模块，以及调用存储在存储器402内的数据，执行终端的各种功能和处理数据，从而对终端进行整体监控。可选的，处理器401可包括一个或多个处理核心；优选的，处理器401可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器401中。

存储器402可用于存储软件程序以及模块，处理器401通过运行存储在存储器402的软件程序以及模块，从而执行各种功能应用以及数据处理。

RF电路403可用于收发信息过程中，信号的接收和发送。

终端还包括给各个部件供电的电源404(比如电池)，优选的，电源可以通过电源管理系统与处理器401逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

该终端还可包括输入单元405，该输入单元405可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

该终端还可包括显示单元406，该显示单元406可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。具体在本实施例中，终端中的处理器401会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器402中，并由处理器401来运行存储在存储器402中的应用程序，从而实现各种功能，如下：

接收代码转换请求；

根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；

获取对应客户端的代码转换规则；

根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。

代码转换方法的详细步骤介绍可以参考上述方法实例的描述，这里不再赘述。

由上可知，本发明实施例终端可以首先接收代码转换请求；然后根据接收到的代码转换请求获取需要转换的第一源代码，该第一源代码适于在浏览器端运行；再获取对应客户端的代码转换规则；最后根据获取到的代码转换规则，将第一源代码转换为第二源代码，该第二源代码适于在客户端运行。采用本发明提供的技术方案，屏蔽了浏览器端编程规范和客户端编程规范的差异，开发者在进行开发时，只需要按照浏览器端的编程规范完成浏览器端源代码的编写，之后采用本发明方案即可将适于在浏览器端运行的源代码转换为适于在客户端运行的源代码，实现代码同构的目的，从而使得应用开发的效率得以提升。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，RandomAccess Memory)、磁盘或光盘等。

以上对本发明实施例所提供的一种代码转换方法、装置和存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (15)

1.一种代码转换方法，其特征在于，包括：

接收代码转换请求；

根据所述代码转换请求获取需要转换的第一源代码，所述第一源代码适于在浏览器端运行；

获取对应客户端的代码转换规则，所述代码转换规则是根据所述浏览器端的第一编程规范和所述客户端的第二编程规范之间的差异信息设置的，所述第一编程规范包括HTML编程规范，所述第二编程规范包括React Native编程规范，所述代码转换规则包括将HTML标签转换为实现所述HTML标签相同功能的第一React Native组件、将全局变量或全局方法转换为对应的React Native模块、将CSS样式转换为实现所述CSS样式相同功能的ReactNative CSS样式和将HTML组件转换为组件代理组件中的至少一项；

根据所述代码转换规则，将所述第一源代码转换为第二源代码，所述第二源代码适于在所述客户端运行。

2.如权利要求1所述的代码转换方法，其特征在于，根据所述代码转换规则，将所述第一源代码转换为第二源代码，包括：

解析所述第一源代码，将所述第一源代码划分为实现不同功能的多个源代码模块；

识别所述多个源代码模块中的第一源代码模块，所述第一源代码模块不适于在所述客户端运行；

根据所述代码转换规则，将所述第一源代码模块转换为第二源代码模块，所述第二源代码模块适于在所述客户端运行；

将包括所述第二源代码模块的第一源代码作为所述第二源代码。

3.如权利要求2所述的代码转换方法，其特征在于，接收代码转换请求之前，还包括：

获取所述浏览器端的第一编程规范和所述客户端的第二编程规范之间的差异信息；

根据所述差异信息设置所述代码转换规则。

4.如权利要求3所述的代码转换方法，其特征在于，识别所述多个源代码模块中的第一源代码模块，包括：

将所述多个源代码模块与所述差异信息进行匹配；

将匹配成功的源代码模块作为所述第一源代码模块。

5.如权利要求3所述的代码转换方法，其特征在于，根据所述差异信息设置所述代码转换规则之后，还包括：

生成包括所述差异信息以及所述代码转换规则的语法转换器；

而获取对应客户端的代码转换规则，包括：

创建对应所述第二编程规范的编译环境；

在创建的所述编译环境中加载所述语法转换器。

6.如权利要求5所述的代码转换方法，其特征在于，根据所述代码转换规则，将所述第一源代码转换为第二源代码，包括：

将所述第一源代码输入到所述语法转换器中，指示所述语法转换器根据所述差异信息识别所述第一源代码中的所述第一源代码模块，并根据所述代码转换规则将所述第一源代码模块转换为所述第二源代码模块；

获取所述语法转换器输出的包括所述第二源代码模块的第一源代码；

将包括所述第二源代码模块的第一源代码作为所述第二源代码。

7.如权利要求2-6任一项所述的代码转换方法，其特征在于，在所述第一编程规范为HTML编程规范，且所述第二编程规范为React Native编程规范时，将所述第一源代码模块转换为第二源代码模块，包括：

在所述第一源代码模块为HTML标签时，将所述HTML标签转换为实现所述HTML标签相同功能的第一React Native组件，并将所述第一React Native组件作为所述第二源代码模块；

或者，在第一源代码模块为全局变量或全局方法时，将所述全局变量或所述全局方法转换为对应的React Native模块，并将所述React Native模块作为所述第二源代码模块；

或者，在所述第一源代码模块为CSS样式时，将所述CSS样式转换为实现所述CSS样式相同功能的React Native CSS样式，并将所述React Native CSS样式作为所述第二源代码模块；

或者，在所述第一源代码模块为HTML组件时，将所述HTML组件转换为组件代理组件，并将所述组件代理组件作为所述第二源代码模块，所述组件代理组件在执行时调用实现所述HTML组件相同功能的第二React native组件。

8.一种代码转换装置，其特征在于，包括：

请求接收模块，用于接收代码转换请求；

代码获取模块，用于根据所述代码转换请求获取需要转换的第一源代码，所述第一源代码适于在浏览器端运行；

规则获取模块，用于获取对应客户端的代码转换规则，所述代码转换规则是根据所述浏览器端的第一编程规范和所述客户端的第二编程规范之间的差异信息设置的，所述第一编程规范包括HTML编程规范，所述第二编程规范包括React Native编程规范，所述代码转换规则包括将HTML标签转换为实现所述HTML标签相同功能的第一React Native组件、将全局变量或全局方法转换为对应的React Native模块、将CSS样式转换为实现所述CSS样式相同功能的React Native CSS样式和将HTML组件转换为组件代理组件中的至少一项；

代码转换模块，用于根据所述代码转换规则，将所述第一源代码转换为第二源代码，所述第二源代码适于在所述客户端运行。

9.如权利要求8所述的代码转换装置，其特征在于，所述代码转换模块具体用于：

解析所述第一源代码，将所述第一源代码划分为实现不同功能的多个源代码模块；

识别所述多个源代码模块中的第一源代码模块，所述第一源代码模块不适于在所述客户端运行；

根据所述代码转换规则，将所述第一源代码模块转换为第二源代码模块，所述第二源代码模块适于在所述客户端运行；

将包括所述第二源代码模块的第一源代码作为所述第二源代码。

10.如权利要求9所述的代码转换装置，其特征在于，所述代码转换装置还包括规则设置模块，用于：

获取所述浏览器端的第一编程规范和所述客户端的第二编程规范之间的差异信息；

根据所述差异信息设置所述代码转换规则。

11.如权利要求10所述的代码转换装置，其特征在于，所述代码转换模块还具体用于：

将所述多个源代码模块与所述差异信息进行匹配；

将匹配成功的源代码模块作为所述第一源代码模块。

12.如权利要求10所述的代码转换装置，其特征在于，所述代码转换装置还包括转换器生成模块，用于生成包括所述差异信息以及所述代码转换规则的语法转换器；

所述规则获取模块还用于：

创建对应所述第二编程规范的编译环境；

在创建的所述编译环境中加载所述语法转换器。

13.如权利要求12所述的代码转换装置，其特征在于，所述代码转换模块还具体用于：

将所述第一源代码输入到所述语法转换器中，指示所述语法转换器根据所述差异信息识别所述第一源代码中的所述第一源代码模块，并将所述第一源代码模块转换为所述第二源代码模块；

获取所述语法转换器输出的包括所述第二源代码模块的第一源代码；

将包括所述第二源代码模块的第一源代码作为所述第二源代码。

14.如权利要求9-13任一项所述的代码转换装置，其特征在于，在所述第一编程规范为HTML编程规范，且所述第二编程规范为React Native编程规范时，代码转换模块还具体用于：

在所述第一源代码模块为JSX语法编写的HTML标签时，将所述HTML标签转换为实现所述HTML标签相同功能的第一React Native组件，并将所述第一React Native组件作为所述第二源代码模块；

或者，在第一源代码模块为JS变量或JS方法时，将所述JS变量或JS方法转换为对应的React Native变量或React Native方法，将所述React Native变量或所述React Native方法作为所述第二源代码模块；

或者，在所述第一源代码模块为CSS样式时，将所述CSS样式转换为实现所述CSS样式相同功能的React Native CSS样式，将所述React Native CSS样式作为所述第二源代码模块；

或者，在所述第一源代码模块为HTML组件时，将所述HTML组件转换为实现所述HTML组件相同功能的第二React Native组件，将所述第二React Native组件作为所述第二源代码模块。

15.一种存储介质，其特征在于，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至7任一项所述的代码转换方法中的步骤。

Images