前端国际化

前言

从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 st