前端国际化i18n客户端实现
发布时间
阅读量：
阅读量
前端国际化i18n客户端实现——jquery.i18n.properties国际化客户端实例
一、引入文件包
下载i18n :
https://github.com/jquery-i18n-properties/jquery-i18n-properties
将下载文件到项目中
此处bundle文件下的.properties文件是需要自定义国际化内容的；每个文件的文件名字定义需遵循规则：Messages为资源文件的名称（此名称可自定义），后续新增语言都由Messages开头；下划线 “_” 连接的为语言编码；
引入项目中需要先引入jquery文件
二、代码中初始化国际化
html代码中使用data-i18n属性，i18n可自定义
<span data-i18n="lang_back"></span>
<input type="text" data-i18n-placeholder="lang_input_placeholder">编辑 .properties 文件，中文与英文两个文件需对应，如下：
Messages_zh_CN.properties 文件
lang_back = 返回
lang_input_placeholder = 输入内容Messages_en.properties 文件
lang_back = Back
lang_input_placeholder = input content初始化代码
$.i18n.properties({
name: 'Messages', //资源名称
path: './dist/i18n/bundle/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: 'en', //对应设置的语言
async:true, //异步获取，默认为true，可以不设置
callback: function() {
try {
//初始化页面元素 设置input中placeholder属性
$('[data-i18n-placeholder]').each(function () {
$(this).attr('placeholder', $.i18n.prop($(this).data('i18n-placeholder')));
});
//设置代码中对应内容
$("[data-i18n]").each(function(){
$(this).html($.i18n.prop($(this).data("i18n")));
});
}catch(err){
console.log(err);
}
}
});三、遇到的问题
- bundle文件夹中的Message.propertises文件为中转文件，此文件必须存在，内容可为空；
- bundle文件夹中的语言文件内容必须做对应，即在项目文件的代码存在属性 “lang_i18n” 对应值，必须在语言文件中都存在；
- 代码文件都编辑好后，在pc端无环境下运行会报错；解决方案：将文件放置在服务器环境中运行；移动端代码将代码在移动端设备上运行；
四、补充——获取设备当前使用的语言
直接上代码
//获取设备浏览器当前语言
var getLanguagetype = function(){
if(navigator.appName == "Netscape"){
var navLanguage = navigator.language;
return navLanguage;
}
return false;
}
var langtype = getLanguagetype(); //此处可根据 langtype 获取当前终端设备的语言类型总结：刚开始学习，查了不少blog，但都不是自己需要的，以上是通过自己实践，并能很好的运行在自己项目中；希望看到本blog的你，能给你以参考，抱拳!
全部评论 (0)
还没有任何评论哟~