在jQueryMobile中实现多语言支持

随着 移动技术的普及，基于 jQuery 并且针对移动平台的 JavaScript 框架 jQuery Mobile 应运而生。jQuery Mobile 不仅承袭了 jQuery 的诸多优点，更为移动平台定制了许多皮肤和开发部件，大大减轻了开发人员的工作量。随着 HTML5 技术的日渐完善，加上 JavaScript 技术本身具有的跨平台特性，jQuery Mobile 或者类似的框架必然拥有更加广泛的市场，这从 Adobe 放弃移动 Flash 和 Microsoft 边缘化 SilverLight 的决定中可见一斑。

 

虽然 jQuery Mobile 已经显得非常完善与强大，但很让人意外的是它竟然没有提供一套标准的方法来支持多语言的处理。多语言支持对于一个大型网站，尤其是企业级的面向全球的网站是必须具备的功能, 很多其他的框架比如 Dojo 就内置了对该功能的支持。有鉴于此，本文将讨论提供一种简单有效的方法来实现针对 jQuery Mobile 的多语言支持。该方法参考了传统意义上在 server 端实现的多语言支持方法和 Dojo 对多语言支持的方法，并且已在多个企业网站上部署实践。

本文假设读者对 jQuery 和 jQuery Mobile 已经有一定的认识和使用经验，对 HTML5 和 CSS3 也有相当的了解，因此对于上述技术的特定 API 不再赘述。如有疑问，请自行查阅相关文档或者与笔者联系。本文最后会提供本文所使用的程序源代码。

基本思路

简单来说，多语言支持就是为所有在网站上能找到的文字做一张映射表，根据用户的语言选择来显示同个关键字所对应的不同的值。多语言支持是在网站的开发初期就需要考虑的问题，因为该映射表将包含整个网站的文字内容，如果在开发过程中才决定创建和使用这样的映射表，就会耗费大量的时间去修改已经完成的网页，这还不包括重新测试的时间。

我们的基本思路可以概括为以下几个步骤：

1. 创建映射表

   前文已经提到，映射表将包含所有该网站会用到的文字内容，在任何一个页面被创建之前，该映射表就应该已经存在，以便为页面提供需要的文字。由于该映射表需要在客户端被 jQuery 读取，我们建议使用 XML 格式或者 JSON 格式来创建该映射表。

2. 为 jQuery Mobile 的 HTML 页面插入新的标签

   jQuery Mobile 本身不支持多语言，所以我们需要一个新的标签来提示该 HTML 的内容需要被映射表中的内容所替换，以及该内容所对应的关键字是什么。该标签可以是任意非 HTML 标准的标签值，比如 langID。

3. 在 jQuery Mobile 页面的创建过程中插入映射表的文字内容

   jQuery Mobile 和 jQuery 不同，它的页面创建过程包含多个不同的阶段，比如 pagebeforecreate、pagecreate、pageinit 等。通常情况下我们会在 pageinit 中修改 HTML 的内容或者加入事件处理的方法。但是对于映射表内容的替换，必须在 pageinit 之前完成。因为在 pageinit 中 jQuery Mobile 已经完成创建各个部件，这个时候再去直接修改 HTML 内容会导致已经被创建的部件无法正常显示。

4. 处理 jQuery Mobile 的动态内容

   很多 jQuery Mobile 的部件包含了特殊的文字，比如一个输入框的提示信息，往往不是在 HTML 中直接体现的，或者不能简单的加以替换，这个时候就需要使用 JavaScript 的程序来修改这样的内容。

具体步骤

接下来我们用 jQueryMobile 制作一个登陆界面，对前文提到的四个步骤进行具体解释。每个步骤还会包含示例的效果截屏图。

1. 创建映射表

   前文提到映射表可以是 XML 格式或者 JSON 格式，以方便 jQuery 读取。在我们的例子中，我们将推荐使用 JSON 格式，这样不仅方便读取，而且方便在 JavaScript 程序中作为对象直接使用。

   在我们的例子中，我们将同时支持中文和英文语言。所以我们会创建两份映射表，分别对应中文和英文。事实上你也可以把所有语言放入一个映射表，但是出于管理的方便性和防止映射表过于庞大，我们推荐使用不同的映射表文件对应不同的语言。

   在登录界面，我们需要显示以下的中英文文字内容：

   • 登陆界面的标题，比如：登录 / Login
   • 登录界面的介绍，比如：请输入您的用户名和密码/ Please provide your username and password
   • 用户名标签，比如：用户名 / User Name
   • 密码标签，比如：密码 / Password
   • 登录按钮的标签，比如：登录 / Login

   这样的话我们的映射表将相应显示以下的内容：

   清单 1.中文映射表 text_cn.json

   {"Login" : {"Title" : "登录", "Description" : "请输入您的用户名和密码", "Lable_User_Name" : "用户名", "Label_Password" : "密码", "Label_Login_button" : "登录", "Tip_User_Name" : "手机号或者电子邮箱地址"}}

   清单 2.英文映射表 text_en.json

   {"Login" : {"Title" : "Login","Description" : "Please provide your username and password", "Lable_User_Name" : "User Name", "Label_Password" : "Password", "Label_Login_button" : "Login", "Tip_User_Name" : "Mobile number or email address"}}

   注意两份映射表的 key 必须保持一致。

2. 插入新的标签

   首先我们将使用 jQuery Mobile 的创建一个简单的登录界面，主要由 2 个输入框部件和 1 个按钮部件组成，其中还包括了页眉和介绍内容。HTML 的内容如下：

   页眉

   Title

   介绍内容

   Description

   用户名和密码输入框

   User Name Label
   Password Label
   

   登录按钮

   	3KB	
   						    

   上一篇：Log4j2使用教程

   下一篇：knockoutjs学习篇(一)