liupangustest

i18n

功能

• 支持浏览器端和node端的多语言
• 支持多种语言查询和转换
• 待写

开始

安装

npm install @tuya-fe/i18n

初始化

init方法进行初始化

例子：

import __ from '@tuya-fe/i18n'

__.init({
    defaultLocale: 'en', // 可选，系统会默认判断语言，若判断失效，显示该设置的默认语言，不设置默认en
    <!-- req,  // node环境必选，用于服务端 HTTP response object of server -->
    headers: '', // node环境下req的headers
    localeUrl, // 必选，查询多语言后台接口URL
}).then(() => {
    // doSomethingOthers
})

使用

1）基本的使用

一、查询

推荐：get方法

例子：

__.get(key)

{
    'TITLE': 涂鸦智能
}

render () {
    return (
        <div>{ __.get['TITLE'] }</div> // 涂鸦智能
    )
}

为了保持兼容旧写法，也可以（不推荐）：

__.title

二、切换语言

switch(locale)方法

例子：locale为语系唯一标识，比如 'zh','en'

__.switch('en')

2）包含变量

如下例子，包含变量name，在get方法中注入变量name的值tuya

{'key': 'i love {name}' }

__.get('key', { name: 'tuya' })
// i love tuya

3) 包含复数和数字分隔符等

采用业界通用的ICU Message syntax语法

如下例子，变量name分别为0，1和1000000

{ "key": "I have {num, plural, =0 {no books.} =1 {one photo.} other {# books.}}" }

__.get('key', {num:0}); // "I have no books."
__.get('key', {num:1}); // "I have one book."
__.get('key', {num:1000000}); // "I have 1,000,000 books."

3）货币

语法： { name, type, format }

format可选，若format省略，type为number，则会返回格式化后的数字分隔符

若format是该货币的一种，则会返回相关联的货币格式

例子，变量name为car，type为number以及format为USD

{ "key": "My car is { car, number, USD }" }

__.get('key', { car:123456.78 }); // My car is $123,456.78

方案

语言包缺失提示

1）语言包为空，控制台提示

2）__.get(key)，若指定key不存在时，控制台提示

定位语言

• 1、依据cookie查找语言，若为空，执行第2步
• 2、根据请求头accept-language权值大小选择语言，若无匹配，显示默认语言
• 3、待补充

浏览器端缓存策略

采用localForage进行缓存当前环境的多语言

• 异步存储
• 离线存储
• 优雅降级
• 存储多种类型

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。

node端存储

redis

语言包发布、变更等处理

根据接口返回的数据版本标识，更新前端数据

缓存被清空、语言包为空和key出错等异常场景

异常场景处理

迁移问题

待确认

遗留问题

待定