【整理】前端国际化小结

LoftySoul 发布于2019-08-01 17:37 / 1410人阅读

摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取

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

国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化
后端多为spring国际化，这里不做展开，百度一下到处都是

常见型

常见的前端国际化方法步骤如下：（原理）

定义国际化配置

根据环境读取配置

将配置展现在页面上

展开说：

定义国际化配置：
定义的方式有多种，多以文件的形式多带带保存，如json，js，properties 等，
并且将配置信息以键值对的形式保存备用

根据环境读取配置：
所谓环境说白了就是用户选择的标志，形式如下：
hash型：#cn; #en; #us
saerch型：?lan=cn; ?lan=en; ?lan=us
url/meta型： 163.com/cn/; 163.com/en
缓存型：缓存形式多为cookie，默认cn，用户重新设定后将缓存更新

将配置展现在页面上：
使用三方插件或者自己编写插件将配置信息映射到页面上，
可以使用，juery.i18n.js 或 react、angular国际化插件等regular暂无插件
插件的基本原理都是做字典查询键值匹配替换。

以上三步任意组合都可以完成国际化的任务，只是效率各有不同，可根据项目做自由组合

优缺点

优点：

语言包形式统一管理

工程较大时节省资源

对于支持多语言项目复用性强

缺点：

配置文件配置复杂

以键值对的形式定位容易产生混乱

可读性差

后期维护时定位比较负责易出错

不常见型

不常见的方法步骤如下：（原理）

将国际化配置分散在各个文件中如：

`登录|登入|Sign in|サインイン|로그인`

根据环境确定国际化标记：

cn:0, tw:1, en:2, jp:3, kr:4

根据国际化标记显示相应信息

全局搜索class=i18n的元素，保留相应信息

优缺点

优点：

可读性强

易定位

配置简单

内容较少时效率高

缺点：

项目工程量大后会浪费资源

随着支持的语言种类繁多后不容易维护

复用性差且耦合度高

极端通用型

使用google翻译插件

https://support.google.com/tr...

适用项目：

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

实例：

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

项目结合：

以异步code形式传递信息的，适合做前端国际化

同步模板式的项目，可使用后端做国际化，如果想轻后端，也可以做前端国际化或者前后端结合做国际化

两个例子

普通异步项目：

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

组件式项目：

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

私有云混合云设计小结对象小结个人小结小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51264.html

【整理】前端国际化小结

摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为spr...

android_c 2019-08-22 11:10 评论0 收藏0
前端字符编码小结

摘要：导语本文源于微信游戏春节王者摇心愿活动英雄语音祝福自定义输入模块开发过程，对踩过的前端字符编码的坑进行记录总结。只规定了字符编码，而并没有规定具体的编码方式。导语本文源于微信游戏春节王者摇心愿活动英雄语音祝福自定义输入模块开发过程，对踩过的前端字符编码的坑进行记录总结。 Unicode 字符 Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一项业界标准。它...

gitmilk 2019-08-22 14:54 评论0 收藏0
MyBatis 源码分析系列文章合集

摘要：简介我从七月份开始阅读源码，并在随后的天内陆续更新了篇文章。考虑到超长文章对读者不太友好，以及拆分文章工作量也不小等问题。经过两周紧张的排版，一本小小的源码分析书诞生了。我在写系列文章中，买了一本书作为参考，这本书是技术内幕。 1.简介我从七月份开始阅读MyBatis源码，并在随后的40天内陆续更新了7篇文章。起初，我只是打算通过博客的形式进行分享。但在写作的过程中，发现要分析的代码...

Crazy_Coder 2019-08-19 11:08 评论0 收藏0
【2021版】想要专升本你不得不看的全干货_吐血整理_专升本_计算机文化基础（四）

摘要：由于屏蔽层的作用，同轴电缆有较好的抗干扰能力。表示层了解即可表示层主要为上层用户解决用户信息的语法表示问题，其主要功能是完成数据转换数据压缩和数据加密。协议实际上是一组协议，是一个完整的体系结构。 ...

Genng 2021-10-14 09:43 评论0 收藏0
2017-08-28 前端日报

摘要：前端日报精选译高阶函数利用和来编写更易维护的代码，从入门到放弃响应式编程入门行的电梯调度模拟器个人分享前端学习资源分享中文周刊技术周刊期知乎专栏中的内置方法知乎专栏中的柯里化前端大宝剑小结常见知识依赖收集掘金项目主域重 2017-08-28 前端日报精选【译】高阶函数：利用Filter、Map和Reduce来编写更易维护的代码Webpack 3，从入门到放弃响应式编程入门：50 行...

xumenger 2019-08-20 18:59 评论0 收藏0