媒介

从10年打仗编程就最先打仗国际化这个观点，但是这些年周全用到国际化的项目并非许多，且都是些螺丝钉式的事情。15岁终，部门项目须要推国际化，前端这块由我来主导。虽然难度不高，但照样拿出来分享下。

挑选体式格局:

现在相识到的前端国际化有以下两种体式格局：

1、按言语品种离别开辟前端界面：

这类体式格局貌似给人一种很low的觉得且觉着文件会无穷多。但是在平常项目中言语品种并不会迥殊多，完成中英文两种即可满足大部分需求；而且这类体式格局假如配合上差别的网站作风，不只能够处置惩罚中英文字符长度差别题目，而且能够统筹差别群体的视觉感观。但该体式格局后期保护中须要支付相当于保护言语品种雷同倍数的前端代码；

2、运用设置文件：

运用一套界面，一样的款式文件，挪用相对应的言语文件举行DOM衬着。该体式格局能够疾速完成，且只需保护一套前端文件。单页运用发起运用该要领。

如另有更好的体式格局，愿望能够发出来进修下。

我的挑选：上岸，注册等零丁存在于体系外围的功用模块运用第一种体式格局，别的主体功用挑选的是第二种体式格局。

第一种体式格局只须要按言语分类成多份文件，这里就直接跳过。单说第二种体式格局，该怎样完成。

完成步骤：

步骤一：预备言语资本文件

原则上须要恪守一个界面对应一个资本文件，再经由过程一个一致进口文件举行资本整合。举个栗子：

page1对应的资本文件

var page1 = {
    title:{
        'zh-cn':'题目',
        'en-us':'title'
    }
}

page2对应的资本文件

var page2 = {
    words:{
        'zh-cn':'{0}共有{1}人运用',
        'en-us':'{1} people use {0}'
    }
}

整合文件

var i18nData = {
    page1:page1,
    page2:page2,
}

步骤二：引入主JS

自已完成了一个I18N对象，少码字多贴代码，直接上code~

var I18N = {
    /*
    *   @存储言语数据
    * */
    DATA : LD
    /*
    *   @ 运用的言语
    * */
    ,language: 'zh-cn'
    /*
    *   @ 修正运用的言语
    * */
    ,setLanguage: function(language){
        this.language = language;
    }
    /*
     *   @剖析string 言语标记  用于剖析html中的{{i18n-}}
     *   str:html string
     *   pageName:页面称号 、
     * */
    ,parse: function(str, pageName){
        var _this = this;
        if(!pageName){
            console.error('I18N剖析失利，缘由pageName='+pageName);
            return;
        }
        if(!_this.language){
            console.error('I18N剖析失利，缘由language='+_this.language);
            return;
        }
        var key= '',
        parseStr = '';
        parseStr = str.replace(/{{i18n-(.+?)}}/g, function(t){
            key = t.slice(7, t.length - 2);
            try{
                return _this.DATA[pageName][key][_this.language] || '';
            }catch (e){
                console.warn(pageName + '未找到与'+ key +'相婚配的'+ _this.language +'言语');
                return '';
            }
        });
        return parseStr;
    }
    /*
    *   天生所需的文本信息 适用于js内部变动DOM时运用
     *   pageName:页面称号
     *   key: 指向的文本索引
     *   v1,v2,v3:可为空，字符串花样，只存在v1时可为数组
    * */
    ,getText: function(pageName, key, v1, v2, v3){
        var _this = this;
        var intrusion = [];
        //处置惩罚参数，完成多态化
        if(arguments.length == 3 && typeof(arguments[2]) == 'object'){
            intrusion = arguments[2];
        }
        else if(arguments.length > 2){
            for(var i=2; i< arguments.length; i++){
            intrusion.push(arguments[i]);
            }
        }
        var _lg = '';
        try{
            _lg = _this.DATA[pageName][key][_this.language] || '';
            if(!intrusion || intrusion.length == 0){
                return _lg;
            }
            _lg = _lg.replace(/{d+}/g, function( word ){
                return intrusion[word.match(/d+/)];
            });
            return _lg;
        }catch (e){
            console.warn('未找到与'+ key +'相婚配的'+ _this.language +'言语');
            return '';
        }
    }
};

主程序加上解释也仅仅70行，很浅易。

步骤三：替代文本

设置运用的言语品种

I18N.setLanguage('en-us');   //设置当前运用的言语为美式英语

替代HTML文本

起首须要将HTML华夏文本更换为{{i18n-*}}花样的标记，举个栗子：

//花样上在自创angularjs双向绑定的同时附加特定的标识
<span>题目</span> 替代为 <span>{{i18n-title}}</span>

然后在获取到这段HTML的string花样文件后举行婚配

//这里直接用jQuery的get体式格局举行示例
//假定test.html可包括的文本为：<span>{{i18n-title}}</span>
//言语资本文件运用步骤一示例的数据
$.get(‘test.html’, function(htmlSrc){
       var html =  I18N.parse(htmlSrc, 'page1');
       console.log(html);  //将输出<span>title</span>
       $('body').html(html);
});

替代JS中的文本

用于拼接字符串时处置惩罚含文本的字符，简朴的举个栗子：

//挪用要领:getText(pageName, key, v1, v2, v3) 参数v1,v2,v3用于处置惩罚动态数据，可为空，字符串花样，只存在v1时可为数组
var _src = '<span>'
  + I18N.getText('page2', 'title', ['listManager.js', '10'])
  +'</span>';
console.log(_src ); //将输出 10 people use listManager.js

引荐个表格组件: GridManager

疾速、天真的对Table标签举行实例化，让Table标签充满活力。