前端国际化

前言

从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标签充满活力。