页面本地化方法、装置、电子设备及计算机可读存储介质

技术领域

本发明涉及互联网技术领域，尤其是涉及一种页面本地化方法、装置、电子设备及计算机可读存储介质。

背景技术

随着互联网产品国际多元化突起，越来越多网站选择配置前端国际化交互，便于用户在不同语言环境下使用网站。目前，页面本地化的实现原理如下所示：将不同语言环境集成在一个JS(JavaScript)文件或JSON(JavaScript Object Notation，JS对象简谱)文件中并使用键值对标记，通过本地读取或服务器读取上述文件，实现将当前文案替换成目标语言环境下与该当前文案对应的预设文案。然而随着目标语言环境的增加，必将导致上述文件的体积逐渐增大，导致后期难以维护。另外，在实际应用中大部分网站在发展前期仅配置有一种本地语言，随着网站业务扩充逐渐将页面本地化纳入到整体业务需求中，此时需要对源码中涉及到静态文案的位置进行改造，不仅改造过程较为繁琐、改造成本较高，而且导致对源码产生破坏性极强的影响。

发明内容

有鉴于此，本发明的目的在于提供一种页面本地化方法、装置、电子设备及计算机可读存储介质，可以有效降低页面本地化的繁琐程度和成本，还可以改善对源码产生破坏性极强的影响的问题。

第一方面，本发明实施例提供了一种页面本地化方法，包括：将获取的原始页面代码文件转换为原始抽象语法树文件；提取原始抽象语法树文件中静态文案节点的原始语言键值；将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件。

在一种实施方式中，所述将获取的原始页面代码文件转换为原始抽象语法树文件的步骤，包括：利用脚本语言运行环境的读取模块扫描待处理项目所包含的原始页面代码文件；利用脚本语言编辑器解析所述原始页面代码文件，生成原始抽象语法树文件。

在一种实施方式中，所述原始页面代码文件包括HTML页面代码文件、CSS页面代码文件、JS页面代码文件中的一种或多种，静态文案节点包括Text节点、CSSStyleDeclaration节点及Literal节点中的一种或多种；所述提取原始抽象语法树文件中静态文案节点的原始语言键值的步骤，包括：在所述原始页面代码文件为HTML页面代码文件时，提取原始抽象语法树文件中Text节点的原始语言键值；和/或在所述原始页面代码文件为CSS页面代码文件时，提取原始抽象语法树文件中CSSStyleDeclaration节点的原始语言键值；和/或在所述原始页面代码文件为JS页面代码文件时，提取原始抽象语法树文件中Literal节点的原始语言键值。

在一种实施方式中，所述将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件的步骤，包括：获取原始抽象语法树文件中静态文案节点的原始语言键值对应的本地语言键值；利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值，得到所述本地抽象语法树文件；将所述本地抽象语法树文件转换为本地页面代码文件。

在一种实施方式中，所述利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值，得到所述本地抽象语法树文件的步骤，包括：创建脚本语言对象；将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值；将键值对中以原始语言键值为关键字相应的键值对应的本地语言键值赋值到原始抽象语法树文件中静态文案节点的原始语言键值上，得到所述本地抽象语法树文件。

在一种实施方式中，在将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值的步骤之后，还包括：在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，利用关键字的相同原始语言键值覆盖作为关键字的原始语言键值；或在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，舍弃脚本语言对象中键值对的关键字的相同原始语言键值。

在一种实施方式中，本地语言键值包括第一本地语言键值及第二本地语言键值，所述将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值的步骤，包括：将原始语言键值作为脚本语言对象中键值对的关键字；将第一本地语言键值及第二本地语言键值作为脚本语言对象中键值对的键值；所述将键值对中以原始语言键值为关键字相应的键值对应的本地语言键值赋值到原始抽象语法树文件中静态文案节点的原始语言键值上，得到所述本地抽象语法树文件的步骤，包括：利用原始语言键值对应的第一本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第一本地抽象语法树文件；利用原始语言键值对应的第二本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第二本地抽象语法树文件；将所述第一本地抽象语法树文件转换为第一本地页面代码文件，及将所述第二本地抽象语法树文件转换为第二本地页面代码文件。

在一种实施方式中，所述脚本语言对象包括第一脚本语言对象及第二脚本语言对象，所述将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值的步骤，包括：将原始语言键值及设置的本地语言空键值分别作为第一脚本语言对象中键值对的关键字及键值；将所述第一脚本语言对象转换为表格文件；将原始语言键值对应的本地语言键值赋值到表格文件中的本地语言空键值上，得到赋值后表格文件；将赋值后表格文件转换为分别以原始语言键值及本地语言键值作为键值对中关键字及键值的第二脚本语言对象。

在一种实施方式中，还包括：在监测到统一资源定位符中包含本地字符时，重定向到本地字符对应的本地页面代码文件。

第二方面，本发明实施例还提供一种页面本地化装置，包括：第一转换模块，用于将获取的原始页面代码文件转换为原始抽象语法树文件；提取模块，用于提取原始抽象语法树文件中静态文案节点的原始语言键值；第二转换模块，用于将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件。

第三方面，本发明实施例还提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机可执行指令，所述处理器执行所述计算机可执行指令以实现第一方面提供的任一项所述的方法。

第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在被处理器调用和执行时，计算机可执行指令促使处理器实现第一方面提供的任一项所述的方法。

本发明实施例提供的一种页面本地化方法、装置、电子设备及计算机可读存储介质，首先将获取的原始页面代码文件转换为原始抽象语法树文件，然后提取原始抽象语法树文件中静态文案节点的原始语言键值，从而将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件。上述方法将前期开发过程与页面本地化交互需求分离，开发者可保持单语言静态文案的开发习惯，当存在页面本地化交互需求时提取转换得到的原始抽象语法树文件中的静态文案节点的原始语言键值，从而利用相应的本地语言键值替换该原始语言键值得到本地抽象语法树文件，再将其转换为本地页面代码文件，该过程不需要对原始页面代码文件进行改造，因此可以避免对源码产生破坏性极强的影响，而且该过程实现了自动化、动态化、批量化，从而可以有效降低配置页面本地化的繁琐程度和成本。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1为本发明实施例提供的一种语言选择列表的示意图；

图2为本发明实施例提供的一种页面本地化方法的流程示意图；

图3a为本发明实施例提供的一种HTML文件对应的原始AST文件的示意图；

图3b为本发明实施例提供的另一种HTML文件对应的原始AST文件的示意图；

图4为本发明实施例提供的一种CSS文件对应的原始AST文件的示意图；

图5为本发明实施例提供的一种JS文件对应的原始AST文件的示意图；

图6为本发明实施例提供的一种表格文件的示意图；

图7为本发明实施例提供的一种赋值后表格文件的示意图；

图8为本发明实施例提供的一种页面本地化装置的结构示意图；

图9为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

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

目前，诸多网站存在前端国际化交互需求，其中，前端国际化交互是指集合一些常用语言环境，在用户自主选择目标语言环境后自动将网站全部静态文案切换到目标语言环境下，该过程也可称之为页面本地化。例如，网站右上角部署可切换语言的按钮，用户点击该按钮后将弹出语言选择列表，如图1所示的一种语言选择列表的示意图，可以包括中文、繁体中文、英文、德文、法文、韩文、日文等常用语言环境。在实际应用中，当用户点击该按钮后，将向服务器发送请求获取网站在目标语言环境下所对应的全部静态文案，或者在开发阶段将所有目标语言环境下所对应的全部静态文案全部打包到网站的代码里，从而免去向服务器发送请求的过程。

前端国际化交互的实现过程由JavaScript操作DOM(Document Object Model，文档对象模型)完成，以将当前文案替换成目标语言环境下与该当前文案对应的预设文案，其具体实现原理如下：将不同语言环境集成在一个JS文件或JSON文件里并使用键值对标记，可本地读取或通过服务器请求读取。然而若将网站的全部静态文案处理成多种语言分别对应的文案，则必然导致上述文件的体积非常巨大，从而致使后期难以维护。在实际应用中，在网页加载完毕后，静态文案可以存储在浏览器内存里，等待JavaScript对其切换控制，由于静态文案普遍被JavaScript动态地写入到HTML(Hyper Text Markup Language，超文本标记语言)文件、CSS(Cascading Style Sheets，层叠样表式)文件和JS文件中，因此当用户点击切换语言的按钮后会产生大规模的DOM操作。相关技术提供的一种解决办法中，可以使用第三方G工具库完成DOM操作，在开发源码上就不会存在重复性较高、较为繁琐复杂的代码，但网站代码打包后仍然会执行DOM操作，而且代码中具有较高含量的“LANG_CONFIG”字符，也即网站业务需求已和语言环境完全耦合起来，这样将严重影响网站后期维护。

另外，并非所有网站在前期开发时均有前端国际化交互需求，因此在前期卡发时通常仅配置一种本地语言，随着网站业务扩充逐渐将前端国际化交互纳入到整体业务需求中，此时将对源码中涉及到静态文案的位置进行改造，从而让前端国际化需求与项目整体业务需求完全耦合，这一过程无法做到灵活配置与灵活扩展。

综上所述，相关技术提供的前端国际化交互技术存在如下问题：

(1)相关技术提供的前端国际化交互实质是通过JavaScript动态操作DOM修改HTML文件、CSS文件和JS文件，每次的操作都可能大量读取或写入DOM，在浏览器层面会引发大量的JS执行引擎与GUI(Graphical User Interface，图形用户界面)渲染引擎的通讯与切换，从而引发全部或局部的页面回流重绘，在用户层面看就可能产生页面抖动或闪烁，若全部静态文案较多的情况下有可能会产生页面卡顿。

(2)前端国际化交互需求与项目整体业务需求完全耦合，无法作为一个辅助模块独立出来，在前期开发时需对不同语言环境做留空处理，在后期维护与扩展时需花费更多人力物力，不利于扩展功能，也无法做到灵活配置。

(3)常规解决方案可将前端国际化交互相关代码部署成静态方式和动态方式。静态方式是将配置文件与项目代码一起打包，网页在加载时一并将配置文件下载，在切换语言时做到无感知触发，但将配置文件打包到项目代码里会引发代码最终体积过大，导致首屏渲染加载变慢，不同语言环境的全部静态文案越多，此影响越大。动态方式是每次切换语言都会向服务器发送请求获取目标语言环境的配置文件，后续操作与静态方式完全一致，好处在于无需将全部语言环境的全部静态文案都打包到项目代码中，然而上述两种方式均会引发上述问题(1)和(2)。

(4)网站源码包含着与不同语言环境相关的配置字段，字段过多也导致不好维护甚至眼花缭乱，若后期增加字段或修改字段都有可能引发一些错误，诸如字段过多导致的命名冲突问题，且随着项目变大会导致更多的混乱(代码强耦合所带来的困扰)。

(5)在实际应用中通常先基于单语言(诸如简体中文)静态文案开发网站，到后期有前端国际化交互需求时再检查整体代码，提取所有具备静态文案特征的字符串出来并整理成配置文件，例如为单条静态文案添加Key和对应的多语言文案，该过程需重新查看一次代码并提取全部静态文案，不仅费时费力，而且影响开发进度。

基于此，本发明实施提供了一种页面本地化方法、装置、电子设备及计算机可读存储介质，可以有效降低配置页面本地化的繁琐程度和成本，还可以改善对源码产生破坏性极强的影响的问题。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种页面本地化方法进行详细介绍，参见图2所示的一种页面本地化方法的流程示意图，该方法主要包括以下步骤S202至步骤S206：

步骤S202，将获取的原始页面代码文件转换为原始抽象语法树文件。其中，原始页面代码文件可以包括HTML页面代码文件、CSS页面代码文件和JS页面代码文件等，原始抽象语法树文件也即AST(Abstract Syntax Tree)文件。在一种实施方式中，可以扫描待处理项目所包含的所有文件，并将HTML页面代码文件、CSS页面代码文件和JS页面代码文件确定为原始页面代码文件，利用脚本语言编辑器将原始页面代码文件转换为原始抽象语法树文件，可选的，脚本语言编辑器可以采用babel编辑器。

步骤S204，提取原始抽象语法树文件中静态文案节点的原始语言键值。其中，静态文案节点为原始抽象语法树文件中包含静态文案内容的节点。静态文案节点包括Text节点、CSSStyleDeclaration节点及Literal节点中的一种或多种。在一种实施方式中，基于HTML页面代码文件转换得到的原始AST文件中的静态文案节点为Text节点，基于CSS页面代码文件转换得到的原始AST文件中的静态文案节点为CSSStyleDeclaration节点，基于JS页面代码文件转换得到的原始AST文件中的静态文案节点为Literal节点。原始语言键值可以用于表征该静态文案节点处的静态文案内容，以HTML页面代码文件为例，则提取原始AST文件中的Text节点对应的原始语言键值，例如，提取得到的原始语言键值为“登录”。

步骤S206，将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件。其中，本地语言键值可以用于表征本地化后的静态文案内容，原始语言键值及本地语言键值分别作为键值对的关键字及键值。在一种实施方式中，利用本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值，即可得到本地抽象语法树文件，转换该本地抽象语法树文件得到本地页面代码文件。以HTML页面代码文件为例，原始语言键值“登录”对应本地语言键值“Login”，利用本地语言键值“Login”替换原始抽象语法树文件中的Text节点的原始语言键值“登录”，即可得到本地抽象语法树文件，通过对本地抽象语法树文件进行转换即可得到相应的本地页面代码文件。

本发明实施例提供的上述页面本地化方法，将前期开发过程与页面本地化交互需求分离，开发者可保持单语言静态文案的开发习惯，当存在页面本地化交互需求时提取转换得到的原始抽象语法树文件中的静态文案节点的原始语言键值，从而利用相应的本地语言键值替换该原始语言键值得到本地抽象语法树文件，再将其转换为本地页面代码文件，该过程不需要对原始页面代码文件进行改造，因此可以避免对源码产生破坏性极强的影响，而且该过程实现了自动化、动态化、批量化，从而可以有效降低配置页面本地化的繁琐程度和成本。

对于前述步骤S202，本发明实施例提供了一种将获取的原始页面代码文件转换为原始抽象语法树文件的实施方式，参见如下步骤a至步骤b：

步骤a，利用脚本语言运行环境的读取模块扫描待处理项目所包含的原始页面代码文件。其中，待处理项目可以包括网站、应用程序等，读取模块可以为NodeJS的Fs(filesystem)模块，从而利用Fs模块扫描待处理项目的所有文件，并从中选择出HTML页面代码文件、CSS页面代码文件和JS页面代码文件。

步骤b，利用脚本语言编辑器解析原始页面代码文件，生成原始抽象语法树文件。在一种实施方式中，可以利用babel编辑器解析原始页面代码文件的内容并生成对应的原始AST文件。

本发明实施例还提供了一种提取原始抽象语法树文件中静态文案节点的原始语言键值的实施方式，参见如下(一)至(三)

(一)在原始页面代码文件为HTML页面代码文件时，提取原始抽象语法树文件中Text节点的原始语言键值。对于HTML页面代码文件，可以遍历找出原始AST文件中所有Text节点，并读取Text节点的value值，该value值即为原始语言键值所表征的静态文案内容，诸如图3a所示的一种HTML文件对应的原始AST文件的示意图和图3b所示的另一种HTML文件对应的原始AST文件的示意图。

(二)在原始页面代码文件为CSS页面代码文件时，提取原始抽象语法树文件中CSSStyleDeclaration节点的原始语言键值。对于CSS页面代码文件，可以遍历找出原始AST文件中所有CSSStyleDeclaration节点，并读取CSSStyleDeclaration节点的content值，该content值即为原始语言键值所表征的静态文案内容，诸如图4所示的一种CSS文件对应的原始AST文件的示意图。

(三)在原始页面代码文件为JS页面代码文件时，提取原始抽象语法树文件中Literal节点的原始语言键值。对于JS页面代码文件，可以遍历找出原始AST文件中所有Literal节点，并读取Literal节点的value值，该value值即为原始语言键值所表征的静态文案内容，诸如图5所示的一种JS页面代码文件对应的原始AST文件的示意图。

为便于对前述步骤S206进行理解，本发明实施例还提供了一种将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件的实施方式，参见如下步骤1至步骤3：

步骤1，获取原始抽象语法树文件中静态文案节点的原始语言键值对应的本地语言键值。在一种实施方式中，可以由翻译人员对原始语言键值进行翻译得到本地语言键值。

步骤2，利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值，得到本地抽象语法树文件。在一种实施方式中，可按照如下步骤2.1至步骤2.3得到本地抽象语法树文件：

步骤2.1，创建脚本语言对象。其中，脚本语言对象可以为JS对象。

步骤2.2，将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值。例如，原始语言键值“登录”对应本地语言键值“Login”，则将“登录”作为JS对象中键值对的关键字，以及将“Login”作为JS对象中键值对的键值。

考虑到在实际应用中可能会存在多个静态文案节点的原始语言键值相同的情况，容易导致翻译人员重复操作，因此在将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值的步骤之后，还可以执行如下操作：(1)在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，利用关键字的相同原始语言键值覆盖作为关键字的原始语言键值；或(2)在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，舍弃脚本语言对象中键值对的关键字的相同原始语言键值。

在实际应用中若在读取写入过程中遇到相同的原始语言键值，例如网站中有两个按钮点击后弹出的文案都是“你好”，也即可以扫描到两个静态文案节点的原始语言键值均为“你好”，此时可以利用第二次扫描得到的“你好”替换JS对象中已有的“你好”，或舍弃第二次扫描得到的“你好”，也即只需记录一个“你好，从而在一定程度上减轻翻译人员的工作负担，提高获取本地语言键值的效率。

步骤2.3，将键值对中以原始语言键值为关键字相应的键值对应的本地语言键值赋值到原始抽象语法树文件中静态文案节点的原始语言键值上，得到本地抽象语法树文件。例如，在原始抽象语法树文件中搜索关键字“登录”，确定出需要进行替换的静态文案节点，并将“Login”赋值到该静态文案节点的原始语言键值上，即可得到本地抽象语法树文件。

步骤3，将本地抽象语法树文件转换为本地页面代码文件。

在实际应用中，上述脚本语言对象包括第一脚本语言对象及第二脚本语言对象，在此基础上本发明实施例还提供了一种将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值的实施方式，参见如下步骤2.2.1至步骤2.2.4：

步骤2.2.1，将原始语言键值及设置的本地语言空键值分别作为第一脚本语言对象中键值对的关键字及键值。在一种实施方式中，首先新建第一JS对象(也即，第一脚本语言对象)，标记为A，假设原始语言为中文zh，本地语言为英文en，则将“登录”作为第一JS对象A中键值对的关键字，并将英文en对应的空键值作为第一JS对象A中键值对的键值。在实际应用中，对于HTML页面代码文件，遍历出原有AST文件中所有Text节点，读取Text节点的value值，并将该value值以KEY保存至第一JS对象A中；对于CSS页面代码文件，遍历出原有AST文件中所有CSSStyleDeclaration节点，读取CSSStyleDeclaration节点的content值(若存在)，并将该content值以KEY保存至第一JS对象A中；对于JS页面代码文件，遍历出原有AST文件中所有Literal节点，读取Literal节点的value值，并将该value值以KEY保存至第一JS对象A中。

步骤2.2.2，将第一脚本语言对象转换为表格文件。在一种实施方式中，可以通过NodeJS的Fs模块将第一JS对象A输出成Excel表格(也即，表格文件)供翻译人员对原始语言进行翻译，或者利用人工智能技术对原始语言进行翻译，以得到原始语言对应的本地语言。诸如图6所示的一种表格文件的示意图。

步骤2.2.3，将原始语言键值对应的本地语言键值赋值到表格文件中的本地语言空键值上，得到赋值后表格文件。例如，将“Login”赋值到表格中对应的本地语言空键值上。诸如图7所示的一种赋值后表格文件的示意图。在实际应用中，可在指定存储区域存储赋值后表格文件，从而直接从该指定存储区域中读取赋值后表格文件，还可以为翻译人员提供赋值后表格文件的上传通道，以便于翻译人员上传赋值后表格文件。

步骤2.2.4，将赋值后表格文件转换为分别以原始语言键值及本地语言键值作为键值对中关键字及键值的第二脚本语言对象。在一种实施方式中，可通过NodeJS的Fs模块将赋值后表格文件转换成第二JS对象，标记为B。在实际应用中，将赋值后表格文件转换为第二JS对象的逻辑如下：首先明确第1行作为KEY值用于存储对应语言的静态文案，例如示例的zh和en；假设开发过程以中文形式显示，因此以zh里的静态文案(例如登录)作为KEY(关键词)，将同一行的en对应的值(例如login)分别作为属性值(也即，键值)组成一个对象，直至全部行读取完毕。

考虑到在一次页面本地化过程中需要同时配置多种语言文案，也即存在页面国际化(多语言)交互需求，因此本发明实施例以本地语言键值包括第一本地语言键值及第二本地语言键值为例，提供了步骤S206的另一种实施方式，参见如下1)至4)：

1)将原始语言键值作为脚本语言对象中键值对的关键字。假设需求设置三种语言文案：中文zh、英文en、日文jp，且原始语言键值“登录”属于中文zh，第一本地语言键值属于英文en，第二本地语言键值属于日文jp，将“登录”作为JS对象中键值对的关键字。

2)将第一本地语言键值及第二本地语言键值作为脚本语言对象中键值对的键值。例如，第一本地语言键值为“Login”，第二本地语言键值为“ログイン”，将“Login”和“ログイン”均作为关键字“登录”对应的键值。

3)利用原始语言键值对应的第一本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第一本地抽象语法树文件；以及，利用原始语言键值对应的第二本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第二本地抽象语法树文件。

在实际应用中，可以基于本地语言键值所属语种的语种数量，对原始页面代码文件进行复制得到相应数量的页面代码副本文件，并分别提取页面代码副本文件对应的抽象语法树副本文件；或者直接对原始抽象语法树文件进行复制得到相应数量的副本文件，当多语言有N份时副本文件为N-1份。由于副本文件是由原始AST文件复制得到的，因此副本文件中的静态文案节点与原始AST文件中的静态文案节点一一对应，基于节点间的对应关系即可从副本文件中确定出需要进行替换的静态文案节点，然后分别将LANG_CONFIG["登录"].en和LANG_CONFIG["登录"].jp赋值到两份副本文件对应的静态文案节点上，直至整个AST文件遍历完毕。例如，副本文件为两份时可以得到三份AST文件，一份是原装的AST(也即，上述原始AST文件)，一份是静态文案为英文的AST文件(也即，上述第一本地抽象语法树文件)，一份是静态文案为日文的AST文件(也即，上述第二本地抽象语法树文件)。

4)将第一本地抽象语法树文件转换为第一本地页面代码文件，及将第二本地抽象语法树文件转换为第二本地页面代码文件。在实际应用中，通过将上述第一本地抽象语法树文件和第二本地抽象语法树文件转换成代码文件，当待处理项目中所有文件遍历完毕，即可得到多个对应不同语言环境的代码包体，每份代码包体的代码文件都仅存在一种语言环境。代码包体会发布到线上环境作为网页运行的载体，而与开发阶段的源码完全不受影响，本发明实施例通过在待项目最终打包的过程中插入多语言环境的需求，而不影响整个开发阶段。

在后续应用过程中，在监测到统一资源定位符中包含本地字符时，重定向到本地字符对应的本地页面代码文件。其中，本地字符用于指示项目运行的目标语言环境，诸如“/zh”、“/en”、“/jp”等。在实际应用中，代码包体会作为网页运行的载体，在服务器里部署Nginx即可实现网页访问，在部署时使用Nginx分发，例如检测到URL(Uniform ResourceLocator，统一资源定位器)包含/zh就重定向到中文版的页面，检测到/en就重定向到英文版的页面。因此在用户角度的网页效果如下：当点击切换语言的按钮为英文状态，则当前网页会跳转到携带英文静态文案的网页，当点击切换语言的按钮为日文状态，则当前网页会跳转到携带日文静态文案的网页。而在开发者角度看，实质是依据URL的变化重定向到对应语言的最终代码包的文件。

本发明实施例针对现有技术中存在过多的DOM操作从而导致线程间过多地通讯产生回流重绘，全部语言环境相关配置都打包到项目代码中导致最终产出的代码量过大，不管是需求还是代码都将前端国际化交互与完整业务耦合在一起，代码中存在过多的不同语言环境相关的配置字段，后期接入前端国际化交互费时费力等情况，提供了一种页面本地化方法，从而将前端国际化交互整体应用得灵活自如。具体的，本发明实施例在开发阶段保持正常的单语言静态文案部署状态，无需刻意提取全部静态文案去整理一份不同语言环境的配置文件，当开发阶段完毕通过NodeJS的Fs模块扫描整个项目的HTML页面代码文件、CSS页面代码文件、JS页面代码文件等文案部署文件，使用Babel编辑器将文案部署文件内容转换成原始AST文件，遍历原始AST文件每个节点，从符合静态文案特点的节点中提取出该节点的完整静态文案，基于该静态文案生成供翻译人员处理多语言的表格文件，当翻译人员完成所有语言翻译后，再读取该表格文件并将其转换成第二JS对象，同时重新扫描整个项目的HTML页面代码文件、CSS页面代码文件、JS页面代码文件等文案部署文件，再次得到文案部署文件对应的原始AST文件，遍历原始AST文件每个节点，从符合静态文案特点的节点中提取出该节点的完整静态文案，以该文案为KEY从第二JS对象中找出对应语言的静态文案，使用新的静态文案代替旧的静态文案，生成一个AST文件，后续以该AST文件生成新的代码文件，若有N种目标语种则将生成N个AST文件，并将所有AST文件存放到与原始AST文件相同的存储区域。

综上所述，本发明实施例至少具备以下特点：

(1)基于本发明实施例提供的页面本地化方法，在后续切换语言过程中产生的DOM操作被完全移除，因此不存在JS执行线程与GUI执行线程的通讯与切换所带来的性能损耗。而且本发明实施例中语言切换时使用跳转URL的方式重定向到对应的不同语言环境的页面，因此整个切换过程无需操作任何DOM。

(2)本发明实施例中前端国际化交互需求与项目整体业务需求完全分离，开发者可继续保持平时习惯的单语言静态文本开发，无需刻意提取全部静态文案去整理一份不同语言环境的配置文件，且开发者不用关注两者间以何种关系联系，更为省时省力，确保在开发阶段完全做业务需求的状态。

(3)由于前端国际化交互需求是一种重复复制粘贴的工作，本发明实施例依据其特点为其定制出一种在工程化方案里解决问题的优雅方式，使需求在接入时可做到自动化、动态化、批量化的操作处理，大大减轻各种成本。

(4)本发明实施例在首次增加前端国际化交互需求时需要执行扫描待处理项目中的文案配置文件至生成待翻译表格文件的步骤，在下次添加新的静态文案时，由于首次执行的过程中已生成待翻译表格文件，因此可在其基础上增加新的静态文案，再次将新的已翻译表格文件转换为新的第二JS对象并执行后续步骤，便于后续需求的迭代。

(5)本发明实施例中生成的每个代码包里始终包含一种语言环境，不存在多语言混杂的情况，因此整体的文件体积会相比常规解决方案小很多，虽然生成多语言的代码包，但是每次访问单一语言时加载的文件还是单一语言环境的代码文件，不会掺杂其他语言环境的代码文件。

(6)本发明实施例提供过的页面本地化方法，其整体流程基本处于全自动的状态，唯一需人工操作的部分就是翻译部分。且在后期追加前端国际化交互需求时无需Review代码，该开发的需求全部使用单语言环境即可，从而保障了开发流程的正常进行。

(7)本发明实施例的前提是开发者按照平时的开发模式开发单语言静态文案，无需刻意提取全部静态文案去整理一份不同语言环境的配置文件，也即本发明技术方案让整体业务需求与前端国际化交互需求完全分离。

对于前述实施例提供的页面本地化方法，本发明实施例提供了一种页面本地化装置，参见图8所示的一种页面本地化装置的结构示意图，该装置主要包括以下部分：

第一转换模块802，用于将获取的原始页面代码文件转换为原始抽象语法树文件；

提取模块804，用于提取原始抽象语法树文件中静态文案节点的原始语言键值；

第二转换模块806，用于将利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值得到的本地抽象语法树文件转换为本地页面代码文件。

本发明实施例提供的上述页面本地化装置，将前期开发过程与页面本地化交互需求分离，开发者可保持单语言静态文案的开发习惯，当存在页面本地化交互需求时提取转换得到的原始抽象语法树文件中的静态文案节点的原始语言键值，从而利用相应的本地语言键值替换该原始语言键值得到本地抽象语法树文件，再将其转换为本地页面代码文件，该过程不需要对原始页面代码文件进行改造，因此可以避免对源码产生破坏性极强的影响，而且该过程实现了自动化、动态化、批量化，从而可以有效降低配置页面本地化的繁琐程度和成本。

在一种实施方式中，第一转换模块802还用于：利用脚本语言运行环境的读取模块扫描待处理项目所包含的原始页面代码文件；利用脚本语言编辑器解析原始页面代码文件，生成原始抽象语法树文件。

在一种实施方式中，原始页面代码文件包括HTML页面代码文件、CSS页面代码文件、JS页面代码文件中的一种或多种，静态文案节点包括Text节点、CSSStyleDeclaration节点及Literal节点中的一种或多种；提取模块804还用于：在所述原始页面代码文件为HTML页面代码文件时，提取原始抽象语法树文件中Text节点的原始语言键值；和/或在所述原始页面代码文件为CSS页面代码文件时，提取原始抽象语法树文件中CSSStyleDeclaration节点的原始语言键值；和/或在所述原始页面代码文件为JS页面代码文件时，提取原始抽象语法树文件中Literal节点的原始语言键值。

在一种实施方式中，第二转换模块806还用于：获取原始抽象语法树文件中静态文案节点的原始语言键值对应的本地语言键值；利用原始语言键值对应的本地语言键值替换原始抽象语法树文件中静态文案节点的原始语言键值，得到所述本地抽象语法树文件；将所述本地抽象语法树文件转换为本地页面代码文件。

在一种实施方式中，第二转换模块806还用于：创建脚本语言对象；将原始语言键值及本地语言键值分别作为脚本语言对象中键值对的关键字及键值；将键值对中以原始语言键值为关键字相应的键值对应的本地语言键值赋值到原始抽象语法树文件中静态文案节点的原始语言键值上，得到所述本地抽象语法树文件。

在一种实施方式中，第二转换模块806还用于：在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，利用关键字的相同原始语言键值覆盖作为关键字的原始语言键值；或在监测到脚本语言对象中键值对的关键字的相同原始语言键值时，舍弃脚本语言对象中键值对的关键字的相同原始语言键值。

在一种实施方式中，本地语言键值包括第一本地语言键值及第二本地语言键值，第二转换模块806还用于：将原始语言键值作为脚本语言对象中键值对的关键字；将第一本地语言键值及第二本地语言键值作为脚本语言对象中键值对的键值；所述将键值对中以原始语言键值为关键字相应的键值对应的本地语言键值赋值到原始抽象语法树文件中静态文案节点的原始语言键值上，得到所述本地抽象语法树文件的步骤，包括：利用原始语言键值对应的第一本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第一本地抽象语法树文件；利用原始语言键值对应的第二本地语言键值，替换原始抽象语法树文件中静态文案节点的原始语言键值，得到第二本地抽象语法树文件；将所述第一本地抽象语法树文件转换为第一本地页面代码文件，及将所述第二本地抽象语法树文件转换为第二本地页面代码文件。

在一种实施方式中，所述脚本语言对象包括第一脚本语言对象及第二脚本语言对象，第二转换模块806还用于：将原始语言键值及设置的本地语言空键值分别作为第一脚本语言对象中键值对的关键字及键值；将所述第一脚本语言对象转换为表格文件；将原始语言键值对应的本地语言键值赋值到表格文件中的本地语言空键值上，得到赋值后表格文件；将赋值后表格文件转换为分别以原始语言键值及本地语言键值作为键值对中关键字及键值的第二脚本语言对象。

在一种实施方式中，上述装置还包括重定向模块，用于：在监测到统一资源定位符中包含本地字符时，重定向到本地字符对应的本地页面代码文件。

本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

本发明实施例提供了一种电子设备，具体的，该电子设备包括处理器和存储器；存储器上存储有计算机程序，计算机程序在被所述处理器运行时执行如上所述实施方式的任一项所述的方法。

图9为本发明实施例提供的一种电子设备的结构示意图，该电子设备100包括：处理器90，存储器91，总线92和通信接口93，所述处理器90、通信接口93和存储器91通过总线92连接；处理器90用于执行存储器91中存储的可执行模块，例如计算机程序。

其中，存储器91可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口93(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。

总线92可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图9中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

其中，存储器91用于存储程序，所述处理器90在接收到执行指令后，执行所述程序，前述本发明实施例任一实施例揭示的流过程定义的装置所执行的方法可以应用于处理器90中，或者由处理器90实现。

处理器90可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器90中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器90可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital SignalProcessing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器91，处理器90读取存储器91中的信息，结合其硬件完成上述方法的步骤。

本发明实施例所提供的可读存储介质的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见前述方法实施例，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。