【整理】前端国际化小结

近期在做国际化的改造,做了相应的调研,简单做下项目前端国际化的小结

国际化可以分为前端国际化和后端国际化,也可以是前后端组合的国际化
后端多为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/translate/#googtrans/en/zh-CN&topic=7011755

适用项目:

内容庞大且不在乎准确性,时效性强,更新频繁,支持世界语言

实例:

阿里国际卖场 https://www.aliexpress.com/

这里写图片描述

项目结合:

  1. 以异步code形式传递信息的,适合做前端国际化
  2. 同步模板式的项目,可使用后端做国际化,如果想轻后端,也可以做前端国际化或者前后端结合做国际化

两个例子

  1. 普通异步项目:
    nej/jquery项目
    如果仅需要支持中文和英文,建议使用第二种形式,如果需要支持多国语言,建议使用第一种形式,code错误码可以添加标记定向到国际版错误信息
  2. 组件式项目:
    Regular/Angular/React...项目
    因为数据双向绑定和组件化的特点,可以将国际化版本做在组件里, 通过标记继承控制版本的显示,利用路由系统解析hash值,如:
    '#/cn/s1' : 中文页面S1
    '#/s1' : 页面S1
    '#/en/s1' : 英文页面S1
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,042评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,490评论 18 139
  • 可能因为最近有点累有点颓,就想起一些人。 我一直对“人是平行线”这句话印象深刻。有多少人在某点上热烈地相遇相拥,然...
    笑哈哈冬瓜阅读 1,035评论 0 2
  • 不知道是受到节日氛围的影响,还是今天真的自己人品大爆发,总觉得,今天是幸运的一天,也矫情的发文纪念一下,谢谢一路走...
    muzi_33阅读 314评论 0 2
  • - 若一心向着平易近人靠近,再燥再骄的性子也好慢慢平和下来。
    风嘻嘻阅读 141评论 0 0