基于js的APP多语言处理

153 阅读3分钟

本文出自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>
    // js中利用模板引擎替换显示内容
    $api.html($api.byId("vipFeature"), template("tpl-vip-feature", layout));

如果要替换的内容很少,也可以 div class="btn btn-next" id="btnNext">默认显示内容 // js中直接替换html元素的innerTEXT api.text(api.byId('btnNext'), layout.text_1);

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