国际化方案——精选推荐.pdfVIP

国际化⽅案 标签：多语⾔ i18n iplas #背景 应泰⽅要求，运营系统、⽹上商城以及移动端服务平台等项⽬都要做国际化，⽀持英⽂、泰⽂等多国语⾔。故研讨国际化⽅案对项⽬进⾏国 际化改造。 ##1.后端 关键：使⽤java.util.Locale类判断地区，处理国际化差异 项⽬ 解决⽅案 处理成zh_CN.properties（中⽂需要处理ASCII编码格式）和th_TH.properties版本，使⽤java.util.ResourceBundle根据地区读 静态配置⽂件 取 错误提⽰ 中⽂翻译成泰⽂，处理成中⽂和泰⽂2个错误枚举类，根据地区选择⼀个枚举类 ⽇期 使⽤java.util.DateFormat类及其⼦类SimpleDateFormat根据地区处理 数字、货币、百分 使⽤java.util.NumberFormat类根据地区处理 ⽐ ##2.前端 关键：perties 项⽬ 解决⽅案 配置⽂件 配置*_perties 国际字典，⽤以多国语⾔翻译 静态⽂字 使⽤*i18n国际化插件匹配字典重新赋值（预估⼯作量相当⼤） 动态数据中的⽂字 后端处理后发送到前端 样式 不同语⾔⽂案长度不⼀样造成的样式错乱，对样式要做适配性修改（预估⼯作量相当⼤），先统⼀处理英⽂版本，再适配其它语⾔ 图⽚ 例如帮助指引等，替换泰⽂版新图 第三⽅服务SDK 运营系统中暂时没有 数字、货币单位 使⽤阿拉伯数字，货币单位使⽤฿，要增加货币格式化⼯具函数处理 ⽇期、时间 使⽤泰国当地时间 npm install di18n-translate ###使⽤demo const DI18n = require(di18n-translate) const di18n = new DI18n({ locale: en, // 语⾔环境 isReplace: false, // 是否开启运⾏时功能(适⽤于没有使⽤任何构建⼯具开发流程) messages: { // 语⾔映射表 en: { 你好: Hello, {xl} }, zh: { 你好: 你好, {xl} } } }) di18n有2个翻译⽅法: $t, $html // 带参数 di18n.$t(你好, {person: xl}) // 输出 Hello, xl 字符串拼接的dom中使⽤locale表⽰语⾔环境，t()标识需要翻译的字段，⽤法如下: let tpl = div class=wrapper ${locale} + img src=/images/${locale}/test.png + p$t(你好)/p + /div let str = di18n.$html(tpl) // 字符串替换后输出字符串str: div class=wrapper en img src=/images/en/test.png pHello/p /div // 最后再将这个dom字符串传⼊到页⾯当中去 document.querySelector(.box-wrapper).innerHTML = str #运营系统国际化改造实战 相信现在除了最传统的web前端项⽬外，⼤多数的前端开发都采⽤组件化的模式，⽐如⼩编公司使⽤的polymer、Vue框架，都封装有⼤量 的组件⽅便开发使⽤。在进⾏国际化时候，为尽可能的的不改变开发模式且减少⼯作量，将国际化翻译的东西封装在组件的最底层，在组件 内部进⾏改造。 ##以运营系统为例： 地址栏添加language=‘zh‘属性⽤以切换区分语⾔，如/demo?language=‘zh‘ 配置语⾔字典，实例化di18n函数对象。 （⽅法写在o-base-behavior.html中，⽅便调⽤） const di18n = new DI18n({ loc