【整理】前端國際化小結(jié)

android_c 發(fā)布于2019-08-22 11:10 / 3511人閱讀

摘要：近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項目前端國際化的小結(jié)國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化后端多為國際化，這里不做展開，百度一下到處都是常見型常見的前端國際化方法步驟如下原理定義國際化配置根據(jù)環(huán)境讀取

近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項目前端國際化的小結(jié)

國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化
后端多為spring國際化，這里不做展開，百度一下到處都是

常見型

常見的前端國際化方法步驟如下：（原理）

定義國際化配置

根據(jù)環(huán)境讀取配置

將配置展現(xiàn)在頁面上

展開說：

定義國際化配置：
定義的方式有多種，多以文件的形式多帶帶保存，如json，js，properties 等，
并且將配置信息以鍵值對的形式保存?zhèn)溆?/p>

根據(jù)環(huán)境讀取配置：
所謂環(huán)境說白了就是用戶選擇的標(biāo)志，形式如下：
hash型：#cn; #en; #us
saerch型：?lan=cn; ?lan=en; ?lan=us
url/meta型： 163.com/cn/; 163.com/en
緩存型：緩存形式多為cookie，默認(rèn)cn，用戶重新設(shè)定后將緩存更新

將配置展現(xiàn)在頁面上：
使用三方插件或者自己編寫插件將配置信息映射到頁面上，
可以使用，juery.i18n.js 或 react、angular國際化插件等regular暫無插件
插件的基本原理都是做字典查詢鍵值匹配替換。

以上三步任意組合都可以完成國際化的任務(wù)，只是效率各有不同，可根據(jù)項目做自由組合

優(yōu)缺點

優(yōu)點：

語言包形式統(tǒng)一管理

工程較大時節(jié)省資源

對于支持多語言項目復(fù)用性強

缺點：

配置文件配置復(fù)雜

以鍵值對的形式定位容易產(chǎn)生混亂

可讀性差

后期維護(hù)時定位比較負(fù)責(zé)易出錯

不常見型

不常見的方法步驟如下：（原理）

將國際化配置分散在各個文件中如：

`登錄|登入|Sign in|サインイン|???`

根據(jù)環(huán)境確定國際化標(biāo)記：

cn:0, tw:1, en:2, jp:3, kr:4

根據(jù)國際化標(biāo)記顯示相應(yīng)信息

全局搜索class=i18n的元素，保留相應(yīng)信息

優(yōu)缺點

優(yōu)點：

可讀性強

易定位

配置簡單

內(nèi)容較少時效率高

缺點：

項目工程量大后會浪費資源

隨著支持的語言種類繁多后不容易維護(hù)

復(fù)用性差且耦合度高

極端通用型

使用google翻譯插件

https://support.google.com/tr...

適用項目：

內(nèi)容龐大且不在乎準(zhǔn)確性，時效性強，更新頻繁，支持世界語言

實例：

阿里國際賣場 https://www.aliexpress.com/

項目結(jié)合：

以異步code形式傳遞信息的，適合做前端國際化

同步模板式的項目，可使用后端做國際化，如果想輕后端，也可以做前端國際化或者前后端結(jié)合做國際化

兩個例子

普通異步項目：

**nej/jquery項目**
如果僅需要支持中文和英文，建議使用第二種形式，如果需要支持多國語言，建議使用第一種形式，code錯誤碼可以添加標(biāo)記定向到國際版錯誤信息

組件式項目：

**Regular/Angular/React...項目**
因為數(shù)據(jù)雙向綁定和組件化的特點，可以將國際化版本做在組件里，    通過標(biāo)記繼承控制版本的顯示，利用路由系統(tǒng)解析hash值，如： 
    "#/cn/s1" : 中文頁面S1
    "#/s1" : 頁面S1
    "#/en/s1" : 英文頁面S1