前端国际化

淩亂°似流年 2022-01-20 08:01 285阅读 0赞

## 前言 ##

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

主程序加上注释也仅仅70行，很简易。

### 步骤三：替换文本 ###

#### 配置使用的语言种类 ####

I18N.setLanguage('en-us');   //设置当前使用的语言为美式英语
    复制代码

#### 替换HTML文本 ####

##### 首先需要将HTML中原文本更换为\{ \{i18n-\*\}\}格式的标记，举个栗子： #####

//格式上在借鉴angularjs双向绑定的同时附加特定的标识
 标题 替换为 {
 {i18n-title}}
 复制代码

##### 然后在获取到这段HTML的string格式文件后进行匹配 #####

//这里直接用jQuery的get方式进行示例
 //假设test.html可包含的文本为：{ {i18n-title}}
 //语言资源文件使用步骤一示例的数据
 $.get(‘test.html’, function(htmlSrc){
 var html = I18N.parse(htmlSrc, 'page1');
 console.log(html); //将输出title
 $('body').html(html);
 });
 复制代码

#### 替换JS中的文本 ####

> 用于拼接字符串时处理含文本的字符，简单的举个栗子：

//调用方法:getText(pageName, key, v1, v2, v3) 参数v1,v2,v3用于处理动态数据，可为空，字符串格式，只存在v1时可为数组
 var _src = ''
 + I18N.getText('page2', 'title', ['listManager.js', '10'])
 +'';
 console.log(_src ); //将输出 10 people use listManager.js
 复制代码

### 推荐个表格组件: [GridManager][] ###

> 快速、灵活的对Table标签进行实例化，让Table标签充满活力。

[GridManager]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbaukh789%2FGridManager