前端國際化

前言

從10年接觸編程就開始接觸國際化這個概念，然而這些年全面用到國際化的項目並非不少，且都是些螺絲釘式的工做。15年底，部門項目須要推國際化，前端這塊由我來主導。雖然難度不高，但仍是拿出來分享下。

選擇方式:

目前瞭解到的前端國際化有如下兩種方式：

一、按語言種類分別開發前端界面：

這種方式貌似給人一種很low的感受且覺着文件會無限多。然而在通常項目中語言種類並不會特別多，實現中英文兩種便可知足大部分需求；而且這種方式若是配合上不一樣的網站風格，不但能夠解決中英文字符長度差別問題，並且能夠兼顧不一樣羣體的視覺感觀。但該方式後期維護中須要付出至關於維護語言種類相同倍數的前端代碼；

二、使用配置文件：

使用一套界面，一樣的樣式文件，調用相對應的語言文件進行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標籤充滿活力。