码迷,mamicode.com
首页 > 其他好文 > 详细

【整理】前端国际化小结

时间:2020-01-18 16:18:50      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:适合   方式   sae   基本原理   sign   文件中   exp   hash   content   

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

国际化可以分为前端国际化和后端国际化,也可以是前后端组合的国际化
后端多为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/tr...

适用项目:

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

实例:

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

技术图片

项目结合:

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

两个例子

  1. 普通异步项目:

    **nej/jquery项目**
    如果仅需要支持中文和英文,建议使用第二种形式,如果需要支持多国语言,建议使用第一种形式,code错误码可以添加标记定向到国际版错误信息
  2. 组件式项目:

    **Regular/Angular/React...项目**
    因为数据双向绑定和组件化的特点,可以将国际化版本做在组件里,    通过标记继承控制版本的显示,利用路由系统解析hash值,如: 
        ‘#/cn/s1‘ : 中文页面S1
        ‘#/s1‘ : 页面S1
        ‘#/en/s1‘ : 英文页面S1
    

【整理】前端国际化小结

标签:适合   方式   sae   基本原理   sign   文件中   exp   hash   content   

原文地址:https://www.cnblogs.com/homehtml/p/12209027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!