1、國際化方案標(biāo)簽：多語言i18niplas#背景應(yīng)泰方要求，運(yùn)營系統(tǒng)、網(wǎng)上商城以及移動端服務(wù)平臺等項(xiàng)目都要做國際化，支持英文、泰文等多國語言。故研討國際化方案對項(xiàng)目進(jìn)行國際化改造。#1.后端關(guān)鍵：使用java.util.Locale類判斷地區(qū)，處理國際化差異項(xiàng)目解決方案靜態(tài)配置文件處理成zh_CN.properties（中文需要處理ASCII編碼格式）和th_TH.properties版本，取使用java.util.ResourceBundle根據(jù)地區(qū)讀錯誤提示中文翻譯成泰文，處理成中文和泰文2個錯誤枚舉類，根據(jù)地區(qū)選擇一個枚舉類日期使用java.util.DateFormat類及其子類Simp

2、leDateFormat根據(jù)地區(qū)處理數(shù)字、貨幣、百分比使用java.util.NumberFormat類根據(jù)地區(qū)處理#2.前端關(guān)鍵：perties項(xiàng)目解決方案配置文件配置*_perties國際字典，用以多國語言翻譯靜態(tài)文字使用*i18n國際化插件匹配字典重新賦值（預(yù)估工作量相當(dāng)大）動態(tài)數(shù)據(jù)中的文字后端處理后發(fā)送到前端樣式不同語言文案長度不一樣造成的樣式錯亂，對樣式要做適配性修改（預(yù)估工作量相當(dāng)大），先統(tǒng)一處理英文版本，再適配其它語言圖片例如幫助指引等，替換泰文版新圖第三方服務(wù)SDK運(yùn)營系統(tǒng)中暫時沒有數(shù)字、貨幣單位使用阿拉伯?dāng)?shù)字，貨幣單位使用，要增加貨幣格式化工具函數(shù)處理日期、時間使用泰國當(dāng)?shù)貢r

3、間npmiistaidHHraisiate#使用democonstDI18n=require(di18n-translate)constdi18n=newDI18n(locale:en,/語言環(huán)境isReplace:false,/是否開啟運(yùn)行時功能(適用于沒有使用任何構(gòu)建工具開發(fā)流程)messages:/語言映射表en:你好:Hello,xl,zh:你好:你好,xldi18n有2個翻譯方法：$t,$html/帶參數(shù)di18n.$t（你好，person:xl）/輸出Hello,xl字符串拼接的dom中使用locale表示語言環(huán)境，t()標(biāo)識需要翻譯的字段，用法如下:ettpl=+$t(你好)+e

4、tstr=di18n.$html(tpl)/字符串替換后輸出字符串str:Hello/最后再將這個dom字符串傳入到頁面當(dāng)中去document.querySelector(.box-wrapper).innerHTML=str#運(yùn)營系統(tǒng)國際化改造實(shí)戰(zhàn)相信現(xiàn)在除了最傳統(tǒng)的web前端項(xiàng)目外，大多數(shù)的前端開發(fā)都采用組件化的模式，比如小編公司使用的polymer、Vue框架，都封裝有大量的組件方便開發(fā)使用。在進(jìn)行國際化時候，為盡可能的的不改變開發(fā)模式且減少工作量，將國際化翻譯的東西封裝在組件的最底層，在組件內(nèi)部進(jìn)行改造。#以運(yùn)營系統(tǒng)為例：地址欄添加language=zh屬性用以切換區(qū)分語言Ll HYP

5、ERLINK /demo?language=%e2%80%98zh/demo?language=zh配置語言字典，實(shí)例化di18n函數(shù)對象。(方法寫在o-base七ehavior.html中，方便調(diào)用)constdi18n=newDI18n(locale:LOCALE,isReplace:true,/開啟運(yùn)行時messages:en:En,zh:ZhEnglish.jsconstEn=搜索：search,重置:reset,Chinese.jsconstEn=搜索：搜索，重置:重置，o-base-behaviors.htmlvscriptsrc=././././node_modules/di18

6、n-translate/dist/di18n.min.jsvscriptsrc=assets/i18n/Chinese.jsx/scriptOBaseBehavior=properties:.,/*國際化方法*paramarr*/i18n:function(name)consttemp=di18n.$t(name)if(temp&temp!=undefined)returndi18n.$t(name)elsereturnnameh-crud-search.htmli18n(搜索)Polymer(is:h-crud-search,behaviors:OBaseBehavior,/引入公共beha

7、vior，就可以使用i18n方法進(jìn)行字符串替換properties:.)est.htmlenzh注意事項(xiàng)：在組件里面使用i18n方法時，一定要記得引入OBaseBehavior這個公共方法實(shí)例化對象，不然i18n會轉(zhuǎn)換失敗。#Vue項(xiàng)目使用di18n-translate先進(jìn)行全局注冊：main.jswindow.LOCALE=enconstlanguage=localStorage.getltem(language)/進(jìn)行語言切換的時候用到f(language)window.LOCALE=languageconstDI18n=require(di18n-translate)constdi18n

8、=newDI18n(locale:LOCALE,/語言環(huán)境isReplace:false,/是否進(jìn)行替換(適用于沒有使用任何構(gòu)建工具開發(fā)流程)messages:/語言映射表en:你好:Hello,zh:你好:你好Vtotype.di18n=di18nVtotype.i18n=function(name)/封裝一個全局方法，可以在任何vue文件里面進(jìn)行字符串替換consttemp=di18n.$t(name)/封裝翻譯方法if(temp&temp!=undefined)returndi18n.$t(name)elsereturnname18n.vuetitlei18n(你好)enzhexportdefaultname:i18n,data()returntitle:this.i18n(飛飛),methods:changeLanguage(language)localStorage.setItem(language,language)/將