使用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'));

英文環境下：

中文環境下：