基於js的APP多語言處理

本文出自APICloud官方論壇，
感謝論壇版主哼哼哈兮 的分享。

本期分享一個js的多語言處理插件i18n.js，此插件是基於JQuery.i18n.properties修改而來的。


實現的原理就是在本地放置一個或多個語言資源文件，而後經過js加載這些資源文件並反序列化成json對象，再根據資源文件中定義的鍵名去替換頁面中須要顯示的地方。

再說說用法：
一、在頁面中引入i18n.js，加載後會給window對象增長一個名叫 i18n 的屬性，是個對象。
二、加載資源文件
 
i18n.init({
 name: name, // 資源文件名稱，默認爲Layout
 language: lang, // 語言名稱，格式規範爲：{語言}_{區域}或{語言}，如zh_CN,zh,en,en_US
 path: 'widget://res/lang/', // 資源文件路徑，默認值爲：widget://res/lang/5.      mode: 'map', // 加載的語言資源是以何種形式返回，js 對象變量或map，默認值：vars
 debug: api.debug,  // 是否開啓調試模式
 callback: fnComplete // 資源文件加載後的回調函數
 });
複製代碼

三、資源文件加載完成後，會在 i18n.localize 對象中獲得加載結果。如資源文件名爲默認的Layout，則會獲得 i18n.localize.Layout這個對象，它是一個包含資源文件中全部鍵值對信息的對象，屬性名爲資源文件中的鍵名，屬性值爲資源文件中的鍵值。
四、資源文件名稱爲 xxx.res, 如Layout.res, Layout_zh.res或Layout_zh_CN.res
  內容格式如：

#這裏是註釋內容，i18n.init執行加載時會忽略
text_1= 某個中文字符
text_2=仍是中文
複製代碼
想了解更多詳情的能夠參看JQuery.i18n.properties 文檔

最後附上一個相對完整的處理流程，以供參考，也歡迎有更好的建議提出。

APP啓動時獲取語言偏好設置：

var lang = api.getPrefs({

sync: true,
        key: 'language'
    });
    if (!lang) {
        // 初次進來選系統語言
        var sysLang = navigator.language.replace("-", "_");
        for (var i = 0; i < App.consts.languages.length; i++) {
            if (App.consts.languages.value === sysLang) {
                lang = App.consts.languages;
                break;
            }
        }
        // 若是系統語言不在支持的語言中，所默認置爲支持語言的第一個
        if (!lang) {
            lang = App.consts.languages[0];
        }
        api.setPrefs({
            key: 'language',
            value: JSON.stringify(lang)
        });
    } else {
        lang = JSON.parse(lang);

        }
根據獲取的語言加載對應的資源文件：
// 加載佈局所需語言資源文件

var layout = App.getLayoutRes();
    if (!layout) {
        App.loadLanguage(lang.value, 'Layout', function() {
            App.setLayoutRes(i18n.localize.Layout);
        });

        }
最後用加載出來的結果去替換頁面中須要根據語言顯示的地方，無論是用模板引擎也好仍是一個個去獲取html元素後修改innerTEXT都行：

<div id="container">
                <script id="tpl-exp" type="text/html">
                    <ul class="feature">
                        <li>
                            <p>{{text_1}} -<span>{{text_2}}</span></p>
                        </li>
                        <li>
                            <p>{{text_1}} -<span>{{text_2}}</span></p>
                        </li>
                    </ul>
                    <div class="btn">
                        {{text_1}}
                    </div>

</script>

</div>


    // js中利用模板引擎替換顯示內容
    $api.html($api.byId("vipFeature"), template("tpl-vip-feature", layout));

若是要替換的內容不多，也能夠
<div class="btn btn-next" id="btnNext">默認顯示內容</div>
// js中直接替換html元素的innerTEXT
$api.text($api.byId('btnNext'), layout.text_1);

至此，這個插件基本的應用應該是沒有什麼問題了。