【整理】前端國際化小結

LoftySoul 發布于2019-08-01 17:37 / 1524人閱讀

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

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

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

常見型

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

定義國際化配置

根據環境讀取配置

將配置展現在頁面上

展開說：

定義國際化配置：
定義的方式有多種，多以文件的形式多帶帶保存，如json，js，properties 等，
并且將配置信息以鍵值對的形式保存備用

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

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

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

優缺點

優點：

語言包形式統一管理

工程較大時節省資源

對于支持多語言項目復用性強

缺點：

配置文件配置復雜

以鍵值對的形式定位容易產生混亂

可讀性差

后期維護時定位比較負責易出錯

不常見型

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

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

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

根據環境確定國際化標記：

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

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

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

優缺點

優點：

可讀性強

易定位

配置簡單

內容較少時效率高

缺點：

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

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

復用性差且耦合度高

極端通用型

使用google翻譯插件

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

適用項目：

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

實例：

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

項目結合：

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

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

兩個例子

普通異步項目：

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

組件式項目：

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

云服務器 GPU云服務器設計小結對象小結個人小結小結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51264.html

【整理】前端國際化小結

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

android_c 2019-08-22 11:10 評論0 收藏0
前端字符編碼小結

摘要：導語本文源于微信游戲春節王者搖心愿活動英雄語音祝福自定義輸入模塊開發過程，對踩過的前端字符編碼的坑進行記錄總結。只規定了字符編碼，而并沒有規定具體的編碼方式。導語本文源于微信游戲春節王者搖心愿活動英雄語音祝福自定義輸入模塊開發過程，對踩過的前端字符編碼的坑進行記錄總結。 Unicode 字符 Unicode（中文：萬國碼、國際碼、統一碼、單一碼）是計算機科學領域里的一項業界標準。它...

gitmilk 2019-08-22 14:54 評論0 收藏0
MyBatis 源碼分析系列文章合集

摘要：簡介我從七月份開始閱讀源碼，并在隨后的天內陸續更新了篇文章。考慮到超長文章對讀者不太友好，以及拆分文章工作量也不小等問題。經過兩周緊張的排版，一本小小的源碼分析書誕生了。我在寫系列文章中，買了一本書作為參考，這本書是技術內幕。 1.簡介我從七月份開始閱讀MyBatis源碼，并在隨后的40天內陸續更新了7篇文章。起初，我只是打算通過博客的形式進行分享。但在寫作的過程中，發現要分析的代碼...

Crazy_Coder 2019-08-19 11:08 評論0 收藏0
【2021版】想要專升本你不得不看的全干貨_吐血整理_專升本_計算機文化基礎（四）

摘要：由于屏蔽層的作用，同軸電纜有較好的抗干擾能力。表示層了解即可表示層主要為上層用戶解決用戶信息的語法表示問題，其主要功能是完成數據轉換數據壓縮和數據加密。協議實際上是一組協議，是一個完整的體系結構。 ...

Genng 2021-10-14 09:43 評論0 收藏0
2017-08-28 前端日報

摘要：前端日報精選譯高階函數利用和來編寫更易維護的代碼，從入門到放棄響應式編程入門行的電梯調度模擬器個人分享前端學習資源分享中文周刊技術周刊期知乎專欄中的內置方法知乎專欄中的柯里化前端大寶劍小結常見知識依賴收集掘金項目主域重 2017-08-28 前端日報精選【譯】高階函數：利用Filter、Map和Reduce來編寫更易維護的代碼Webpack 3，從入門到放棄響應式編程入門：50 行...

xumenger 2019-08-20 18:59 評論0 收藏0