CN108885544A - 前端页面国际化处理方法、应用服务器及计算机可读存储介质 - Google Patents

Abstract

一种前端页面国际化处理方法、应用服务器和计算机可读存储介质。该方法包括：读取页面根节点设置的属性参数，得到当前页面所需加载的国际化资源文件的路径(S402)；根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载(S404)；解析所述国际化资源文件(S406)；及将所述页面内需要国际化的内容替换为所解析出的国际化内容(S408)。通过上述方案，能够在纯前端页面中实现页面所有内容的国际化，并且提高资源文件加载效率。

Description

前端页面国际化处理方法、应用服务器及计算机可读存储 介质

技术领域

本发明涉及网页开发技术领域，尤其涉及前端页面国际化处理方法、应用服务器及计算机可读存储介质。

背景技术

如今WEB前端的功能越来越复杂，能实现的功能越来越多，对于前端技术人员的要求越来越高，前端和后端的区分更加细化。所以，纯前端页面信息的国际化需求也应运而生，使前端开发人员可以专注于前端的开发，不必过分分散精力。

目前，国际化的解决方案主要是服务器后端处理，以Java为例，Java后端对模版进行处理，输出组装好的Html文件。该解决方案需要开发人员掌握一定的后端技术，如JSP、Velocity等，并且，如果切换开发平台，所有的页面都需要重新开发。

另一种解决方案是在前端页面使用JavaScript(JS)脚本语言进行处理。主要是通过JS语言获取页面语言环境，然后加载对应的资源文件，对需要进行国际化的内容进行替换完成国际化。这种解决方案目前存在以下问题：

需要一次性加载所有的资源文件，或者每个页面加载单独的资源文件。一次性加载所有资源文件可以避免重复的国际化工作，但是会导致加载资源的时间过长，影响用户体验。若是每个页面单独加载私有资源文件可以分割资源文件，避免一次性加载速度过慢，但是会导致内容重复的国际化。例如，“确定”许多页面都会有，若是每个页面使用单独的资源文件，则会导致每个资源文件中都会有“确定”这个词的国际化，造成重复的工作。

目前的国际化方案需要在不同的页面中编写JS代码，手动为每一个需要国际化的标签重新赋值，代码量巨大，不方便使用。而且都是着重于可见的内容国际化，如页面内容，输入框内容和按钮上的显示文字等，并没有对页面元素的属性等提示性的内容实现自动的国际化实现，如<input title＝”标题”placeholder＝”提示”>中的title和placeholder。对于这些内容，目前的国际化方案是需要手动的编写JS代码进行替换。

目前还有一种国际化方法会在页面使用特定符号搭配正则表达式国际化，因为使用了自定义特殊符号当做标签，抛弃了JS语言对Html内容的原生解析方式，会使JS语言解析页面的效率下降，降低页面加载效率。

发明内容

有鉴于此，本发明的主要目的在于提出一种前端页面国际化处理方法及对应的应用服务器，旨在解决如何在纯前端页面中实现页面所有内容的国际化，并且提高资源文件加载效率的技术问题。

为实现上述目的，本发明提供一种前端页面国际化处理方法，该方法包括步骤：读取页面根节点设置的属性参数，得到当前页面所需加载的国际化资源文件的路径；根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载；解析所述国际化资源文件；及将所述页面内需要国际化的内容替换为所解析出的国际化内容。

可选地，该方法在所述读取页面根节点设置的属性参数的步骤之前还包括步骤：配置所述页面对应的国际化资源文件；在所述页面根节点设置属性参数，以对应当前页面所需加载的国际化资源文件的路径。

可选地，在所述配置所述页面对应的国际化资源文件的步骤中，所述国际化资源文件内以键值对key-value的模式存储国际化内容，所述国际化资源文件以文件名加语言的方式命名，另外，配置一个不加语言后缀的国际化资源资源文件，存储预设的默认国际化内容，作为默认的国际化资源文件。

可选地，所述配置所述页面对应的国际化资源文件的步骤还包括：将多个页面通用的国际化内容存储在一个公共的国际化资源文件内。

可选地，所述预设顺序为：公共的默认国际化资源文件、公共的对应语言环境的国际化资源文件、页面私有的默认国际化资源文件、页面私有的对应语言环境的国际化资源文件。

可选地，所述在所述页面根节点设置属性参数的步骤具体包括：为所述页面中每一个需要国际化的内容的标签设置一个data-*属性参数，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储，所述data-*属性参数的值为所述国际化资源文件中的key值。

可选地，所述在所述页面根节点设置属性参数的步骤还包括：若需要国际化的内容不是输入框的值或标签内的内容，而是标签的一个属性，则在所述data-*属性参数中再添加一个额外的配置项来标识该标签需被国际化的属性值；若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性按顺序对应。

可选地，所述解析所述国际化资源文件的步骤具体包括：将所述国际化资源文件内存储的内容解析成key-value模式，使用公共Map进行存储，其中，key对应所述国际化资源文件中的key值，value为所述国际化资源文件中对应的国际化内容，所述公共Map中的key值是唯一的，后加载的国际化资源文件中的key会覆盖先加载的国际化资源文件中的key。

可选地，所述将所述页面内需要国际化的内容替换为所解析出的国际化内容的步骤具体包括：遍历所述页面中所有设置了data-*属性参数的标签，根据所述data-*属性参数从所述公共Map中查询对应的key值，从而得到对应的国际化内容，将所述页面中需要国际化的内容替换为所得到的国际化内容。

为实现上述目的，本发明还提出一种应用服务器，所述应用服务器包括：存储器、处理器、音频设备及存储在所述存储器上并可在所述处理器上运行的前端页面国际化处理程序，所述前端页面国际化处理程序被所述处理器执行时实现如上述的前端页面国际化处理方法的步骤。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有前端页面国际化处理程序，所述前端页面国际化处理程序被处理器执行时实现如上述的前端页面国际化处理方法的步骤。

本发明提出的前端页面国际化处理方法、应用服务器及计算机可读存储介质，能够完全分离网站前后端页面，使前端页面完整的独立出来，与后端服务的平台、开发语言完全无关而实施前端静态页面的国际化。使用Html5标准的自定义数据data-*属性参数，通过静态页面的配置，直接使用公共JS文件读取并遍历页面data-*属性配置，不再需要为每个页面单独编写JS文件，方便的将需要国际化的内容替换为对应的语言内容，简化了前端国际化的工作量，提高了开发效率。并且可以实现页面内容与提示信息、标签自定义属性等提示性内容的国际化，满足了一些页面的特殊需求。

本发明使用了公共的国际化资源文件与页面私有的国际化资源文件双重加载的方式，能够同时加载不同目录下的公共国际化资源文件，对于一些通用的国际化资源统一加载，页面私有的国际化资源按需加载来实现对于国际化语言数据重复劳作的减少与页面加载效率之间的平衡。并且充分的利用了JS的原生解析方式和ajax的特性，保证了页面解析效率。同时，基于浏览器的特性，ajax会自动缓存加载的国际化资源文件，第二次打开相同页面再次国际化的时候，不需要重复的下载国际化资源文件，会自动从缓存中读取。充分利用了浏览器自身的缓存机制，使得页面第二次加载的效率更进一步的提升。

附图说明

图1为本发明第一实施例提出的一种应用服务器的架构示意图；

图2为本发明第二实施例提出的一种前端页面国际化处理程序的模块示意图；

图3为本发明第三实施例提出的一种前端页面国际化处理程序的模块示意图；

图4为本发明第四实施例提出的一种前端页面国际化处理方法的流程图；

图5为本发明第五实施例提出的一种前端页面国际化处理方法的流程图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及工业实用性更加清楚、明白，以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

第一实施例

如图1所示，是本发明提出的一种应用服务器2的架构示意图。本实施例中，所述应用服务器2可包括，但不仅限于，可通过系统总线相互通信连接存储器11、处理器12、网络接口13。需要指出的是，图1仅示出了具有组件11-13的应用服务器2，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述应用服务器2的内部存储单元，例如该应用服务器2的硬盘或内存。在另一些实施例中，所述存储器11也可以是所述应用服务器2的外部存储设备，例如该应用服务器2上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述应用服务器2的内部存储单元也包括其外部存储设备。本实施例中，所述存储器11通常用于存储安装于所述应用服务器2的操作系统和各类应用软件，例如前端页面国际化处理程序200的程序代码等。此外，所述存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器12通常用于控制所述应用服务器2的总体操作。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行所述前端页面国际化处理程序200等。

所述网络接口13可包括无线网络接口或有线网络接口，该网络接口13通常用于在所述应用服务器2与其他电子设备之间建立通信连接。

第二实施例

如图2所示，本发明第二实施例提出一种前端页面国际化处理程序200。

本实施例中，所述前端页面国际化处理程序200包括一系列的存储于存储器11上的计算机程序指令，当该计算机程序指令被处理器12执行时，可以实现本发明各实施例的前端页面国际化处理操作。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，所述前端页面国际化处理程序200可以被划分为一个或多个模块。例如，在图2中，所述前端页面国际化处理程序200可以被分割成读取模块202、加载模块204、解析模块206及替换模块208。其中：

所述读取模块202设置为读取页面根节点设置的属性参数，得到当前页面所需加载的国际化资源文件的路径。

具体地，当需要加载静态页面时，使用公共JS读取该页面根节点设置的data-*属性参数，得到该页面所需加载的国际化资源文件的路径。

所述data-*属性参数，例如data-i18n，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储。其中，所述路径为客户端(浏览器)下载所述国际化资源文件的URL路径。所述data-*属性参数的值为国际化资源文件中的key值。若需要国际化的内容不是输入框的值或标签内内容，而是标签的一个属性，例如title或placeholder，则在所述data-*属性参数中需要再添加一个额外的配置项来标识该标签需被国际化的属性值，例如data-i18n-options。

若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性需要按顺序对应。例如，<a title＝”标题”data-i18n＝”key1,key2”data-i18n-options＝”title,html”>链接</a>表示该标签的title属性“标题”和标签内内容“链接”被国际化为key1和key2对应的国际化资源文件中内容。

所述加载模块204设置为根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载。

具体地，当得到当前页面所需加载的国际化资源文件的路径后，根据该页面的语言环境，获取对应的国际化资源文件。可以通过ajax技术获取所述国际化资源文件。

所述预设顺序为：公共国际化资源文件>页面私有的默认国际化资源文件>页面私有的对应语言环境的国际化资源文件。例如，针对某一页面，有三个公共的国际化资源文件common.properties、common_zh_CN.properties、common_en_US.properties，分别为公共的默认国际化资源文件、公共的中文国际化资源文件、公共的英文公国际化资源文件，还有三个该页面私有的国际化资源文件home.properties、home_zh_CN.properties、home_en_US.properties，分别为该页面私有的默认国际化资源文件、私有的中文国际化资源文件、私有的英文国际化资源文件。在加载过程中，会先加载公共的默认国际化资源文件common.properties，再根据语言环境加载对应语言环境的公共的国际化资源文件，例如中文，则加载公共的中文国际化资源文件common_zh_CN.properties，至此，公共的国际化资源文件加载完成。然后，加载该页面私有的国际化资源文件home.properties和私有的中文国际化资源文件home_zh_CN.properties，如此该页面对应的所有国际化资源文件加载完成。

通过配置公共的国际化资源文件和页面私有的国际化资源文件以及定义所述预设顺序，公共的国际化资源文件不需要重复加载，减少了一些通用的内容重复的国际化。

在本实施例中，针对同一页面，最后加载的国际化资源文件优先级最高。

所述解析模块206设置为解析所述国际化资源文件。

具体地，加载国际化资源文件成功后，将所述国际化资源文件内存储的内容解析成键值对(key-value)模式，使用公共Map进行存储。其中，key对应资源文件中的key值，value为资源文件中对应的国际化内容。所述公共Map提供了一种映射关系，其中的元素是以key-value的形式存储的，能够实现根据key快速查找value。所述公共Map中的key值是唯一的，不能重复，若有相同的key，后加载的国际化资源文件中的key会覆盖先加载的国际化资源文件中的key。因此，若对应语言环境的国际化资源文件中没有相应的国际化内容，会获取默认的国际化资源文件中的对应值。

所述替换模块208设置为将所述页面内需要国际化的内容替换为所解析出的国际化内容。

具体地，当解析完毕所述国际化资源文件后，遍历所述页面中所有设置了data-*属性参数的标签，根据所述data-*属性参数从所述公共Map中查询对应的key值，从而得到对应的国际化内容，将所述页面中需要国际化的内容替换为所得到的国际化内容。

遍历标签时，若标签没有设置对应的data-*属性参数，则使用默认属性来国际化，将需要国际化的内容替换为默认国际化内容。若标签属于input、select、textarea，则为输入控件，替换输入框值为所述国际化内容。若是其他标签，则替换标签内的内容为所述国际化内容。内容国际化不仅能国际化文本，也可以替换图片或其他Html内容，使不同的语言环境展示不同的图片。

第三实施例

如图3所示，是本发明第三实施例提出一种前端页面国际化处理程序200的模块示意图。本实施例中，所述前端页面国际化处理程序200除了包括第二实施例中的所述读取模块202、加载模块204、解析模块206及替换模块208之外，还包括配置模块210和设置模块212。

所述配置模块210设置为配置所述页面对应的国际化资源文件。

具体地，所述国际化资源文件内以key-value的模式存储国际化内容，所述国际化资源文件以文件名加语言的方式命名。另外，所述配置模块210还可以配置一个不加语言后缀的国际化资源资源文件，存储预设的默认国际化内容，作为默认的国际化资源文件。当后续找不到对应的语言的国际化资源文件或在在对应的语言的国际化资源文件中找不到国际化内容时，可以从所述默认国际化资源文件中获取默认的国际化内容。

在其他实施例中，所述配置模块210配置所述国际化资源文件时，可以将多个页面通用的国际化内容存储在一个公共的国际化资源文件内。例如“日期”、“确定”、“取消”等词汇对应的国际化内容，可以存放在所述公共的国际化资源文件内，供所有页面调用。

所述设置模块212设置为在页面根节点设置属性参数，以对应当前页面所需加载的国际化资源文件的路径。

具体地，在本实施例中，在待国际化的静态页面的根节点中增加data-*属性，并为该页面中每一个需要国际化的内容的标签设置一个data-*属性参数，例如data-i18n，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储。其中，所述路径为客户端(浏览器)下载所述国际化资源文件的URL路径。所述data-*属性参数的值为国际化资源文件中的key值。若需要国际化的内容不是输入框的值或标签内内容，而是标签的一个属性，例如title或placeholder，则在所述data-*属性参数中需要再添加一个额外的配置项来标识该标签需被国际化的属性值，例如data-i18n-options。

若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性需要按顺序对应。例如，<a title＝”标题”data-i18n＝”key1,key2”data-i18n-options＝”title,html”>链接</a>表示该标签的title属性“标题”和标签内内容“链接”被国际化为key1和key2对应的国际化资源文件中内容。

若是一行文本只有部分内容需要国际化，可以使用一个行内标签包裹待国际化元素。例如<a><i data-i18n＝”key2”>链接</i>：123456</a>，只针对被<i></i>标签包裹的内容“链接”国际化，对i标签外的内容不会国际化。

通过data-*属性参数设置需要国际化的Html页面，使该页面所有Html标签可以使用一个公共的JS文件，一次设置后不需要对js进行额外的操作。

在其他实施例中，也可以通过设置其他自定义的属性参数，然后在后续使用JS的getAttribute或jQuery的attr方法来读取所述自定义的属性参数。所述自定义的属性参数中所配置的内容也可以使用数组或特定标点符号的字符串来定义。其他格式的配置与所述json格式的data-*属性参数类似，在此不再赘述。

在所述配置模块210和所述设置模块212完成对所述页面对应的国际化资源文件的配置和data-*属性参数的设置后，在加载所述页面会根据所述data-*属性参数自动读取对应的国际化资源文件，从而输出国际化后的内容。

第四实施例

如图4所示，本发明第四实施例提出一种前端页面国际化处理方法。该方法包括以下步骤：

S402，读取页面根节点设置的属性参数，得到当前页面所需加载的国际化资源文件的路径。

具体地，当需要加载静态页面时，使用公共JS读取该页面根节点设置的data-*属性参数，得到该页面所需加载的国际化资源文件的路径。

所述data-*属性参数，例如data-i18n，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储。其中，所述路径为客户端(浏览器)下载所述国际化资源文件的URL路径。所述data-*属性参数的值为国际化资源文件中的key值。若需要国际化的内容不是输入框的值或标签内内容，而是标签的一个属性，例如title或placeholder，则在所述data-*属性参数中需要再添加一个额外的配置项来标识该标签需被国际化的属性值，例如data-i18n-options。

若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性需要按顺序对应。例如，<a title＝”标题”data-i18n＝”key1,key2”data-i18n-options＝”title,html”>链接</a>表示该标签的title属性“标题”和标签内内容“链接”被国际化为key1和key2对应的国际化资源文件中内容。

S404，根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载。

具体地，当得到当前页面所需加载的国际化资源文件的路径后，根据该页面的语言环境，获取对应的国际化资源文件。可以通过ajax技术获取所述国际化资源文件。

所述预设顺序为：公共的默认国际化资源文件、公共的对应语言环境的国际化资源文件、页面私有的默认国际化资源文件、页面私有的对应语言环境的国际化资源文件。例如，针对某一页面，有三个公共的国际化资源文件common.properties、common_zh_CN.properties、common_en_US.properties，分别为公共的默认国际化资源文件、公共的中文国际化资源文件、公共的英文公国际化资源文件，还有三个该页面私有的国际化资源文件home.properties、home_zh_CN.properties、home_en_US.properties，分别为该页面私有的默认国际化资源文件、私有的中文国际化资源文件、私有的英文国际化资源文件。在加载过程中，会先加载公共的默认国际化资源文件common.properties，再根据语言环境加载对应语言环境的公共的国际化资源文件，例如中文，则加载公共的中文国际化资源文件common_zh_CN.properties，至此，公共的国际化资源文件加载完成。然后，加载该页面私有的国际化资源文件home.properties和私有的中文国际化资源文件home_zh_CN.properties，如此该页面对应的所有国际化资源文件加载完成。

通过配置公共的国际化资源文件和页面私有的国际化资源文件以及定义所述预设顺序，公共的国际化资源文件不需要重复加载，减少了一些通用的内容重复的国际化。

在本实施例中，针对同一页面，最后加载的国际化资源文件优先级最高。

S406，解析所述国际化资源文件。

具体地，加载国际化资源文件成功后，将所述国际化资源文件内存储的内容解析成key-value模式，使用公共Map进行存储。其中，key对应资源文件中的key值，value为资源文件中对应的国际化内容。所述公共Map提供了一种映射关系，其中的元素是以key-value的形式存储的，能够实现根据key快速查找value。所述公共Map中的key值是唯一的，不能重复，若有相同的key，后加载的国际化资源文件中的key会覆盖先加载的国际化资源文件中的key。因此，若对应语言环境的国际化资源文件中没有相应的国际化内容，会获取默认的国际化资源文件中的对应值。

S408，将所述页面内需要国际化的内容替换为所解析出的国际化内容。

具体地，当解析完毕所述国际化资源文件后，遍历所述页面中所有设置了data-*属性参数的标签，根据所述data-*属性参数从所述公共Map中查询对应的key值，从而得到对应的国际化内容，将所述页面中需要国际化的内容替换为所得到的国际化内容。

遍历标签时，若标签没有设置对应的data-*属性参数，则使用默认属性来国际化，将需要国际化的内容替换为默认国际化内容。若标签属于input、select、textarea，则为输入控件，替换输入框值为所述国际化内容。若是其他标签，则替换标签内的内容为所述国际化内容。内容国际化不仅能国际化文本，也可以替换图片或其他Html内容，使不同的语言环境展示不同的图片。

第五实施例

如图5所示，本发明第五实施例提出一种前端页面国际化处理方法。本实施例中，所述前端页面国际化处理方法的步骤S506-S512与第四实施例的步骤S402-S408相类似，区别在于该方法还包括步骤S502-S504。

该方法包括以下步骤：

S502，配置所述页面对应的国际化资源文件。

具体地，所述国际化资源文件内以key-value的模式存储国际化内容，所述国际化资源文件以文件名加语言的方式命名。另外，所述配置模块210还可以配置一个不加语言后缀的国际化资源资源文件，存储预设的默认国际化内容，作为默认的国际化资源文件。当后续找不到对应的语言的国际化资源文件或在在对应的语言的国际化资源文件中找不到国际化内容时，可以从所述默认国际化资源文件中获取默认的国际化内容。

在其他实施例中，所述配置模块210配置所述国际化资源文件时，可以将多个页面通用的国际化内容存储在一个公共的国际化资源文件内。例如“日期”、“确定”、“取消”等词汇对应的国际化内容，可以存放在所述公共的国际化资源文件内，供所有页面调用。

S504，在页面根节点设置属性参数，以对应当前页面所需加载的国际化资源文件的路径。

具体地，在本实施例中，在待国际化的静态页面的根节点中增加data-*属性，并为该页面中每一个需要国际化的内容的标签设置一个data-*属性参数，例如data-i18n，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储。其中，所述路径为客户端(浏览器)下载所述国际化资源文件的URL路径。所述data-*属性参数的值为国际化资源文件中的key值。若需要国际化的内容不是输入框的值或标签内的内容，而是标签的一个属性，例如title或placeholder，则在所述data-*属性参数中需要再添加一个额外的配置项来标识该标签需被国际化的属性值，例如data-i18n-options。

若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性需要按顺序对应。例如，<a title＝”标题”data-i18n＝”key1,key2”data-i18n-options＝”title,html”>链接</a>表示该标签的title属性“标题”和标签内内容“链接”被国际化为key1和key2对应的国际化资源文件中内容。

若是一行文本只有部分内容需要国际化，可以使用一个行内标签包裹待国际化元素。例如<a><i data-i18n＝”key2”>链接</i>：123456</a>，只针对被<i></i>标签包裹的内容“链接”国际化，对i标签外的内容不会国际化。

通过data-*属性参数设置需要国际化的Html页面，使该页面所有Html标签可以使用一个公共的JS文件，一次设置后不需要对js进行额外的操作。

在其他实施例中，也可以通过设置其他自定义的属性参数，然后在后续使用JS的getAttribute或jQuery的attr方法来读取所述自定义的属性参数。所述自定义的属性参数中所配置的内容也可以使用数组或特定标点符号的字符串来定义。其他格式的配置与所述json格式的data-*属性参数类似，在此不再赘述。

S506，读取页面根节点设置的属性参数，得到所述国际化资源文件的路径。

具体地，当需要加载静态页面时，使用公共JS读取该页面根节点设置的data-*属性参数，得到该页面所需加载的国际化资源文件的路径。

S508，根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载。

具体地，当得到当前页面所需加载的国际化资源文件的路径后，根据该页面的语言环境，获取对应的国际化资源文件。可以通过ajax技术获取所述国际化资源文件。

所述预设顺序为：公共的默认国际化资源文件、公共的对应语言环境的国际化资源文件、页面私有的默认国际化资源文件、页面私有的对应语言环境的国际化资源文件。例如，针对某一页面，有三个公共的国际化资源文件common.properties、common_zh_CN.properties、common_en_US.properties，分别为公共的默认国际化资源文件、公共的中文国际化资源文件、公共的英文公国际化资源文件，还有三个该页面私有的国际化资源文件home.properties、home_zh_CN.properties、home_en_US.properties，分别为该页面私有的默认国际化资源文件、私有的中文国际化资源文件、私有的英文国际化资源文件。在加载过程中，会先加载公共的默认国际化资源文件common.properties，再根据语言环境加载对应语言环境的公共的国际化资源文件，例如中文，则加载公共的中文国际化资源文件common_zh_CN.properties，至此，公共的国际化资源文件加载完成。然后，加载该页面私有的国际化资源文件home.properties和私有的中文国际化资源文件home_zh_CN.properties，如此该页面对应的所有国际化资源文件加载完成。

通过配置公共的国际化资源文件和页面私有的国际化资源文件以及定义所述预设顺序，公共的国际化资源文件不需要重复加载，减少了一些通用的内容重复的国际化。

在本实施例中，针对同一页面，最后加载的国际化资源文件优先级最高。

S510，解析所述国际化资源文件。

具体地，加载国际化资源文件成功后，将所述国际化资源文件内存储的内容解析成key-value模式，使用公共Map进行存储。其中，key对应资源文件中的key值，value为资源文件中对应的国际化内容。所述公共Map提供了一种映射关系，其中的元素是以key-value的形式存储的，能够实现根据key快速查找value。所述公共Map中的key值是唯一的，不能重复，若有相同的key，后加载的国际化资源文件中的key会覆盖先加载的国际化资源文件中的key。因此，若对应语言环境的国际化资源文件中没有相应的国际化内容，会获取默认的国际化资源文件中的对应值。

S512，将所述页面内需要国际化的内容替换为所解析出的国际化内容。

具体地，当解析完毕所述国际化资源文件后，遍历所述页面中所有设置了data-*属性参数的标签，根据所述data-*属性参数从所述公共Map中查询对应的key值，从而得到对应的国际化内容，将所述页面中需要国际化的内容替换为所得到的国际化内容。

遍历标签时，若标签没有设置对应的data-*属性参数，则使用默认属性来国际化，将需要国际化的内容替换为默认国际化内容。若标签属于input、select、textarea，则为输入控件，替换输入框值为所述国际化内容。若是其他标签，则替换标签内的内容为所述国际化内容。内容国际化不仅能国际化文本，也可以替换图片或其他Html内容，使不同的语言环境展示不同的图片。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件来实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明，比如作为一个实施例的特征可用于另一实施例而得到又一实施例。凡在运用本发明的技术构思之内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。

工业实用性

本发明提出的前端页面国际化处理方法、应用服务器及计算机可读存储介质，能够完全分离网站前后端页面，使前端页面完整的独立出来，与后端服务的平台、开发语言完全无关而实施前端静态页面的国际化。使用Html5标准的自定义数据data-*属性参数，通过静态页面的配置，直接使用公共JS文件读取并遍历页面data-*属性配置，不再需要为每个页面单独编写JS文件，方便的将需要国际化的内容替换为对应的语言内容，简化了前端国际化的工作量，提高了开发效率。并且可以实现页面内容与提示信息、标签自定义属性等提示性内容的国际化，满足了一些页面的特殊需求。

此外，本发明使用了公共的国际化资源文件与页面私有的国际化资源文件双重加载的方式，能够同时加载不同目录下的公共国际化资源文件，对于一些通用的国际化资源统一加载，页面私有的国际化资源按需加载来实现对于国际化语言数据重复劳作的减少与页面加载效率之间的平衡。并且充分的利用了JS的原生解析方式和ajax的特性，保证了页面解析效率。同时，基于浏览器的特性，ajax会自动缓存加载的国际化资源文件，第二次打开相同页面再次国际化的时候，不需要重复的下载国际化资源文件，会自动从缓存中读取。充分利用了浏览器自身的缓存机制，使得页面第二次加载的效率更进一步的提升。

因此，具有工业实用性。

Claims (11)

1.一种前端页面国际化处理方法，应用于应用服务器中，该方法包括步骤：

读取页面根节点设置的属性参数，得到当前页面所需加载的国际化资源文件的路径；

根据所述路径获取对应的国际化资源文件，并按预设顺序进行加载；

解析所述国际化资源文件；及

将所述页面内需要国际化的内容替换为所解析出的国际化内容。

2.根据权利要求1所述的前端页面国际化处理方法，其中，该方法在所述读取页面根节点设置的属性参数的步骤之前还包括步骤：

配置所述页面对应的国际化资源文件；

在所述页面根节点设置属性参数，以对应当前页面所需加载的国际化资源文件的路径。

3.根据权利要求2所述的前端页面国际化处理方法，其中，在所述配置所述页面对应的国际化资源文件的步骤中，所述国际化资源文件内以键值对key-value的模式存储国际化内容，所述国际化资源文件以文件名加语言的方式命名，另外，配置一个不加语言后缀的国际化资源资源文件，存储预设的默认国际化内容，作为默认的国际化资源文件。

4.根据权利要求3所述的前端页面国际化处理方法，其中，所述配置所述页面对应的国际化资源文件的步骤还包括：将多个页面通用的国际化内容存储在一个公共的国际化资源文件内。

5.根据权利要求4所述的前端页面国际化处理方法，其中，所述预设顺序为：公共的默认国际化资源文件、公共的对应语言环境的国际化资源文件、页面私有的默认国际化资源文件、页面私有的对应语言环境的国际化资源文件。

6.根据权利要求2所述的前端页面国际化处理方法，其中，所述在所述页面根节点设置属性参数的步骤具体包括：

为所述页面中每一个需要国际化的内容的标签设置一个data-*属性参数，配置当前页面所需加载的国际化资源文件的路径，以json格式进行存储，所述data-*属性参数的值为所述国际化资源文件中的key值。

7.根据权利要求6所述的前端页面国际化处理方法，其中，所述在所述页面根节点设置属性参数的步骤还包括：

若需要国际化的内容不是输入框的值或标签内的内容，而是标签的一个属性，则在所述data-*属性参数中再添加一个额外的配置项来标识该标签需被国际化的属性值；

若需要国际化该标签的多个属性，则在所述data-*属性参数中使用英文逗号分隔多个key值，并且在所述额外的配置项中使用英文逗号分隔每一个被国际化的标签属性，所述多个key值与多个标签属性按顺序对应。

8.根据权利要求2所述的前端页面国际化处理方法，其中，所述解析所述国际化资源文件的步骤具体包括：

将所述国际化资源文件内存储的内容解析成key-value模式，使用公共Map进行存储，其中，key对应所述国际化资源文件中的key值，value为所述国际化资源文件中对应的国际化内容，所述公共Map中的key值是唯一的，后加载的国际化资源文件中的key会覆盖先加载的国际化资源文件中的key。

9.根据权利要求8所述的前端页面国际化处理方法，其中，所述将所述页面内需要国际化的内容替换为所解析出的国际化内容的步骤具体包括：

遍历所述页面中所有设置了data-*属性参数的标签，根据所述data-*属性参数从所述公共Map中查询对应的key值，从而得到对应的国际化内容，将所述页面中需要国际化的内容替换为所得到的国际化内容。

10.一种应用服务器，所述应用服务器包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端页面国际化处理程序，所述前端页面国际化处理程序被所述处理器执行时实现如权利要求1至9中任一项所述的前端页面国际化处理方法的步骤。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有前端页面国际化处理程序，所述前端页面国际化处理程序被处理器执行时实现如权利要求1至9中任一项所述的前端页面国际化处理方法的步骤。