本文出自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);
至此,这个插件基本的应用应该是没有什么问题了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。