在 jQuery Mobile 中实现多语言支持（1）简介

look_w

随着移动技术的普及，基于 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 不再赘述。如有疑问，请自行查阅相关文档或者与笔者联系。本文最后会提供本文所使用的程序源代码。
基本思路简单来说，多语言支持就是为所有在网站上能找到的文字做一张映射表，根据用户的语言选择来显示同个关键字所对应的不同的值。多语言支持是在网站的开发初期就需要考虑的问题，因为该映射表将包含整个网站的文字内容，如果在开发过程中才决定创建和使用这样的映射表，就会耗费大量的时间去修改已经完成的网页，这还不包括重新测试的时间。
我们的基本思路可以概括为以下几个步骤：

• 创建映射表                        前文已经提到，映射表将包含所有该网站会用到的文字内容，在任何一个页面被创建之前，该映射表就应该已经存在，以便为页面提供需要的文字。由于该映射表需要在客户端被                        jQuery 读取，我们建议使用 XML 格式或者 JSON 格式来创建该映射表。
  
• 为 jQuery Mobile 的 HTML 页面插入新的标签 jQuery Mobile                        本身不支持多语言，所以我们需要一个新的标签来提示该 HTML                        的内容需要被映射表中的内容所替换，以及该内容所对应的关键字是什么。该标签可以是任意非 HTML 标准的标签值，比如                        langID。
  
• 在 jQuery Mobile 页面的创建过程中插入映射表的文字内容 jQuery Mobile 和 jQuery                        不同，它的页面创建过程包含多个不同的阶段，比如 pagebeforecreate、pagecreate、pageinit                        等。通常情况下我们会在 pageinit 中修改 HTML 的内容或者加入事件处理的方法。但是对于映射表内容的替换，必须在                        pageinit 之前完成。因为在 pageinit 中 jQuery Mobile 已经完成创建各个部件，这个时候再去直接修改                        HTML 内容会导致已经被创建的部件无法正常显示。
  
• 处理 jQuery Mobile 的动态内容 很多 jQuery Mobile                        的部件包含了特殊的文字，比如一个输入框的提示信息，往往不是在 HTML 中直接体现的，或者不能简单的加以替换，这个时候就需要使用                        JavaScript 的程序来修改这样的内容。