使用jquery.i18n.properties.js实现js国际化

前两天接到一个任务，把以前的作过的一个系统实现国际化，以前的系统用的是Spring框架，国际化仍是比较简单的。可是有一些提示是写在js文件里面的，搜了一些，发现一个js国际化的框架jquery.i18n.properties.js，用了一些仍是比较方便的。

首先引入js文件，这个框架是依赖jquery的，因此jquery也要先引入，因为项目用了requireJs，因此在main文件里引入一下就能够了

require.config({
    baseUrl: contextPath + "/js",
    paths: {
        jquery: 'util/jquery-1.9.1',
        jqueryi18n: 'util/jquery.i18n.properties'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'jqueryi18n': {
            deps: [ "jquery" ],
            exports: 'jqueryi18n'
        }
    }
});

其次在资源文件目录下创建一个文件夹放properties文件

因为系统能够手动切换语言，因此把语言设置写道cookie里面，

var setLanguageCookie = function (language) {
    var d = new Date();
    d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = "language=" + escape(language) + "; " + expires + "; path=/";
};

调用jquery.i18n.properties.js的$.i18n.properties()方法。若是cookie里有语言的设置就用cookie里的，若是没有就用浏览器的语言。

var lan = navigator.language || navigator.userLanguage;
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
    var temp = arrStr[i].split("=");
    if (temp[0] == 'language') {
        lan = unescape(temp[1]);
    }
}
$.i18n.properties({
    name: 'message',
    path: contextPath + '/i18n/',
    mode: 'map',
    language: lan
});

用Spring的记得把i18n这个资源目录加到配置文件里面

<mvc:resources mapping="/i18n/**" location="/resources/i18n/"/>

使用CookieLocaleResolver来读取cookie的值，配置一下cookieName

<bean id="localeResolver" class="org.springframework.web.servlet.i18n.CookieLocaleResolver">
    <property name="cookieName" value="language"/>
</bean>

在message_en.properties和message_zh.properties里面写入key：site.success

site.success=Success!

site.success=成功！

以上这些配置好了以后就能够使用了，调用$.i18n.prop(key)来显示不一样语言的提示

alert($.i18n.prop('site.success'));

英文环境下：

中文环境下：