当前位置: 首页 > Web前端 > HTML

【整理】前端国际化总结

时间:2023-04-03 01:14:40 HTML

最近在做国际化转型,做了相应的研究。我简单总结一下项目的前端国际化。国际化可以分为前端国际化和后端国际化,也可以是前端国际化和后端国际化的结合。后端多为Spring国际化,这里不展开,百度??通用到处都是常见的前端国际化方法步骤如下:(原理)定义国际化配置根据环境读取配置并在页面显示配置展开:定义国际化配置:定义的方式有很多种,大部分都是以文件的形式单独保存,比如json、js、properties等,以键值对的形式保存配置信息方便后面根据环境读取配置:所谓环境就是用户明明选择的flag的格式如下:hashtype:#cn;#zh;#us搜索类型:?lan=cn;兰=恩;?lan=usurl/元类型:163.com/cn/;163.com/en缓存类型:缓存格式多为cookies,默认为cn。用户重置后,缓存会更新,配置会显示在页面上:使用第三方插件或写插件将配置信息映射到页面,可以使用juery.i18n。js或react、angular国际化插件等常规插件的基本原理是做字典查询键值匹配和替换。以上三步任意组合即可完成国际化任务,但效率不同,可根据项目自由组合优缺点优缺点:语言包形式统一管理在项目较大时节省资源,复用性强用于支持多语言项目缺点:配置文件配置复杂。以键值对的形式定位,容易混淆。可读性差。在后期维护中定位更负责。容易出错。不常见的类型。`Login|Login|Signin|saインイン|???`根据环境判断国际化标志:cn:0,tw:1,en:2,jp:3,kr:4根据国际化标志显示相应的信息。全局搜索class=i18n的元素,并保留对应信息。语言种类繁多,不易维护。复用性差,耦合度高。极其通用。使用google翻译插件https://support.google.com/tr...适用项目:内容庞大且不在乎准确性,时效性强,更新频繁,支持世界语言例如:阿里国际商城https://www.速卖通结合.com/projects:信息以异步代码的形式传递,适用于前端国际化和同步模板项目。国际化的两个例子普通异步项目:**nej/jquery项目**如果只需要支持中文和英文,建议使用第二种形式。如果需要支持多国语言,建议使用第一种形式,代码错误码可以加上标记,指向国际版错误信息组件项目:**Regular/Angular/React...项目**因为双向数据绑定和组件化的特点,可以在组件中做国际化版本,通过标记继承显示控制版本,使用路由系统解析hash值,如:'#/cn/s1':中文页面S1'#/s1':页面S1'#/en/s1':英文页面S1