前端页面国际化解决方案小记

###方案1:jquery-lang.js
jquery-lang.js项目的地址为: https://github.com/coolbloke1324/jquery-lang-js

这是一个基于jQuery的在客户端实现国际化多语言切换的插件。使用比较方便。前段时间在工作中使用了这个插件。

插件目录如下:

1
2
3
4
5
6
jquery-lang-js
|-- jquery-lang.js
|-- jquery-cookie.js
|-- langpack
|-- ch_nonDynamic.js
|-- ch.json

ch.json或者ch_nonDynamic.js文件中定义语言包,HTML中相应的所有短语添加lang="en"属性,如下所示:

1
<span lang="en">Translate me</span>

在确保加载完相应资源后,执行下列语句,初始化当前语言(这里采用的是预先下载语言包的方式,也可以按需加载语言包,后者更为推荐):

1
window.lang = new Lang('en');

切换语言的方法,从英文(en)切换到中文(ch):

1
<a href="#lang-en" onclick="window.lang.change('ch'); return false;">Switch to Chinese</a>

###方案2:Format.JS

Format.JS项目网站: http://formatjs.io/

jquery-lang.js只是对字符串进行逐一替换,但Format.JS的功能则更为强大:除了翻译常规字符串,它还可以根据不同的语言,对日期、时间、数字等数值类型或字符串进行相应的格式化。

Format.JS既可以运行在浏览器端,也提供对Node.js环境下的支持。

【待有机会再继续研究】

Share