js 前端实现国际化配置

         最近项目中需求配置国际化，再网上找了相关资料，最后选择了i18n来处理国际化，可是在使用过程中碰到了兼容性的问题，后来想想就自己用js实现了一个简单的国际化配置，具体实现步骤如下：

1，参考i18n的实施过程，其实就是配置一个静态文件，然后再动态的去读取其中的值，最后在根据读取到的值更新相应的字段即可。

2,



我将静态配置文件放在lib/i18n下，其中en里面配置的是静态的英文配置，zh是相应的中文字段，

如果有其他语言可以在添加相应的文件夹，而静态文件就是一个返回js对象的js文件，里面写好相应的

字段来配置值，



而所有需要变换语言的地方我都配置了相应的class及一个自定义属性

<thead>
<tr>
<th class="i18n" data-title="HeadImage" style="width: 80px">头像</th>
<th class="i18n" data-title="userName">姓名</th>
<th class="i18n" data-title="ContactWay">联系方式</th>
<th class="i18n" data-title="time">申请时间</th>
<th class="i18n" data-title="status">状态</th>
<th class="i18n" data-title="action">操作</th>
</tr>

其中data-title所指向配置文件中的对象的属性名

再需要转换语言时，就可以

object[$(".i18n").attr("data-title")]来获取相应的值并赋值

由于一般国际化需要将当期视图的所有静态字段转换，我将每个页面都单独配置了一个文件



具体转换步骤我单独写在了myi18n.js里面，以下就是代码

changeLan:function (options) {
var name = options.name||"index";//本项目默认文件为index.properties
var lan = options.lan;
var callbacks = options.callback;
var path = "lib/i18n/"+lan+"/"+name;
requirejs([path],
function (lanObject) {
callbacks(lanObject);
})
},

common:function (options) {
var callback = function (object) {
var insertEle = $(".i18n"),errArr=[];
for(var i=0,l=insertEle.length;i<l;i++){
var item = $(insertEle[i]);
var text = object[item.attr('data-title')];
if(!text){
errArr.push((item.attr('data-title')+" not found"));
}else{
item.html(text);
}

}

// insertEle.each(function() {
//     var item = $(this);
//     // 根据i18n元素的 name 获取内容写入
//     item.html($.i18n.prop(item.attr('data-title')));
// });
var insertInputEle = $(".i18n-input");
for(var i=0,l=insertInputEle.length;i<l;i++){
var item = $(insertInputEle[i]);
var selectAttr = item.attr('selectattr');
var attrName = selectAttr.split("_")[1];
if (!attrName) {
attrName = "value";
};
var text = object[item.attr('selectattr')];
if(!text){
errArr.push((item.attr('selectattr')+" not found"))
}else{
item.attr(attrName, object[item.attr('selectattr')]);
}

}
if(errArr.length !== 0){
console.log(errArr);
}

// insertInputEle.each(function() {
//     var item = $(this);
//     var selectAttr = item.attr('selectattr');
//     var attrName = selectAttr.split("_")[1];
//     if (!attrName) {
//         attrName = "value";
//     };
//     item.attr(attrName, $.i18n.prop(item.attr('selectattr')));
// });
}
options.callback = callback;
this.changeLan(options);
}

以上就是我做国际化文件的一个心得，如果大家有什么好的建议请多多指教