【整理】前端國際化小結

近期在作國際化的改造，作了相應的調研，簡單作下項目前端國際化的小結

國際化能夠分爲前端國際化和後端國際化，也能夠是先後端組合的國際化
後端多爲spring國際化，這裏不作展開，百度一下處處都是

常見型

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

1. 定義國際化配置
2. 根據環境讀取配置
3. 將配置展示在頁面上

展開說：

1. 定義國際化配置：
   定義的方式有多種，多以文件的形式單獨保存，如json，js，properties 等，
   而且將配置信息以鍵值對的形式保存備用
2. 根據環境讀取配置：
   所謂環境說白了就是用戶選擇的標誌，形式以下：
   hash型：#cn; #en; #us
   saerch型：?lan=cn; ?lan=en; ?lan=us
   url/meta型： 163.com/cn/; 163.com/en
   緩存型：緩存形式多爲cookie，默認cn，用戶從新設定後將緩存更新
3. 將配置展示在頁面上：
   使用三方插件或者本身編寫插件將配置信息映射到頁面上，
   可使用，juery.i18n.js 或 react、angular國際化插件等regular暫無插件
   插件的基本原理都是作字典查詢鍵值匹配替換。

   以上三步任意組合均可以完成國際化的任務，只是效率各有不一樣，可根據項目作自由組合

優缺點

優勢：

1. 語言包形式統一管理
2. 工程較大時節省資源
3. 對於支持多語言項目複用性強

缺點：

1. 配置文件配置複雜
2. 以鍵值對的形式定位容易產生混亂
3. 可讀性差
4. 後期維護時定位比較負責易出錯

不常見型

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

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

   `<a class='i18n'>登陸|登入|Sign in|サインイン|로그인</a>`

2. 根據環境肯定國際化標記：

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

3. 根據國際化標記顯示相應信息

   全局搜索class=i18n的元素，保留相應信息

優缺點

優勢：

1. 可讀性強
2. 易定位
3. 配置簡單
4. 內容較少時效率高

缺點：

1. 項目工程量大後會浪費資源
2. 隨着支持的語言種類繁多後不容易維護
3. 複用性差且耦合度高

極端通用型

使用google翻譯插件

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

適用項目：

內容龐大且不在意準確性，時效性強，更新頻繁，支持世界語言

實例：

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

項目結合：

1. 以異步code形式傳遞信息的，適合作前端國際化
2. 同步模板式的項目，可以使用後端作國際化，若是想輕後端，也能夠作前端國際化或者先後端結合作國際化

兩個例子

1. 普通異步項目：

   **nej/jquery項目**
   若是僅須要支持中文和英文，建議使用第二種形式，若是須要支持多國語言，建議使用第一種形式，code錯誤碼能夠添加標記定向到國際版錯誤信息

2. 組件式項目：

   **Regular/Angular/React...項目**
   由於數據雙向綁定和組件化的特色，能夠將國際化版本作在組件裏，    經過標記繼承控制版本的顯示，利用路由系統解析hash值，如： 
       '#/cn/s1' : 中文頁面S1
       '#/s1' : 頁面S1
       '#/en/s1' : 英文頁面S1