基于js的APP多语言处理

本文出自 APICloud 官方论坛，
感谢论坛版主哼哼哈兮 的分享。

本期分享一个 js 的多语言处理插件 i18n.js，此插件是基于 JQuery.i18n.properties 修改而来的。

实现的原理就是在本地放置一个或多个语言资源文件，然后通过 js 加载这些资源文件并反序列化成 json 对象，再根据资源文件中定义的键名去替换页面中需要显示的地方。
再说说用法：1、在页面中引入 i18n.js，加载后会给 window 对象增加一个名叫 i18n 的属性，是个对象。2、加载资源文件
 
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 // 资源文件加载后的回调函数
 });
复制代码

3、资源文件加载完成后，会在 i18n.localize 对象中得到加载结果。如资源文件名为默认的 Layout，则会得到 i18n.localize.Layout 这个对象，它是一个包含资源文件中所有键值对信息的对象，属性名为资源文件中的键名，属性值为资源文件中的键值。
4、资源文件名称为 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);

至此，这个插件基本的应用应该是没有什么问题了。