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);
}

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