阿里飞冰(ice)框架下国际化实践

简介: 阿里飞冰国际化方案

基本思路

阿里飞冰采用的是React基本框架,因而国际化方案采用yahoo的React-Intl包,其提供了IntlProvider的类,用于包裹组件。因而基本思路就是通过localStorage存储一个lang值,用于提供给IntlProvider的属性locale进行语言的识别,在locales模块目录下维护各个不同的语言配置即可,通过按钮的选择改变lang值,即可对全局环境进行语言切换。

目录结构

  • 语言配置文件: src/locales
  • 设置lang工具函数: src/utils/locale.js
  • 配置转换函数: src/utils/localeConfig.js
  • 全局语言包裹组件: src/components/LocaleProvider
  • 语言选择框组件: src/components/LocaleSelect

踩坑案例

飞冰ice的Dialog组件导致的上下文丢失

[bug描述] 在PageHead中按钮点击,是通过jsx传输的包裹格式,在飞冰Dialog点击后会出现导致包裹在全局最外层的<LocaleProvider></LocaleProvider>丢失,错误为Uncaught Error:[React Intl] Could not find required 'intl' object <IntlProvider> heads to exit in the component ancestry.

[bug分析] jsx和js中的ast转换中造成场景性质的bug,原因在于项目书写过程中的js和jsx混合使用,对于前期未考虑到国际化场景

[解决方案] 在工具函数库localeConfig中实现confirmLocale函数,用于在js中的字符串转换

总结

相较于Vue的国际化Vue-i18n来说,React的国际化较为复杂,其依赖包也有很多,如'React i18n'、'Intl'等,本次国际化过程较为繁复,其本身难度倒不大,关键在于前期未考虑到要做国际化的需求,导致js和jsx混合使用,有的需要在config.js转换,而有的则需要在jsx中做转换,在某些场景中还会出现bug,因而后续过程中的项目如果考虑到国际化场景,需要提前留出预备量,任何的框架设计与实现需要做好度的把控,过渡设计和缺少设计都不能很好的达到业务效果,后期的反复工作就会增加,做好系统设计是每一个工程师都应该提升的能力。

相关文章
|
6月前
|
人工智能 Java API
Spring AI 抢先体验,5 分钟玩转 Java AI 应用开发
Spring Cloud Alibaba AI 以 Spring AI 为基础,并在此基础上提供阿里云通义系列大模型全面适配,让用户在 5 分钟内开发基于通义大模型的 Java AI 应用。
226422 23
|
3月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
4月前
|
人工智能 API 决策智能
智胜未来:国内大模型+Agent应用案例精选,以及主流Agent框架开源项目推荐
【7月更文挑战第8天】智胜未来:国内大模型+Agent应用案例精选,以及主流Agent框架开源项目推荐
1258 9
智胜未来:国内大模型+Agent应用案例精选,以及主流Agent框架开源项目推荐
|
3月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
60 0
|
3月前
|
存储 测试技术 C#
Blazor WebAssembly 开启离线应用开发新时代!C# 与.NET 助力,打造高性能跨平台新体验!
【8月更文挑战第31天】在互联网快速发展的今天,用户对Web应用体验的要求日益提高,尤其在无网络环境下使用应用的需求愈发明显。Blazor WebAssembly 应运而生,它基于 WebAssembly 技术,允许开发者利用 C# 和 .NET 构建交互式 Web 应用,无需服务器支持即可在浏览器中运行,从而实现离线使用。Blazor WebAssembly 具有使用熟悉的技术栈、高性能、离线支持以及跨平台等优势。开发者可通过安装开发工具、创建项目、编写代码、调试测试及发布应用几个步骤来进行开发。这为离线应用开发开启了新篇章。
62 0
|
3月前
|
Java UED 自然语言处理
Struts 2 国际化竟有如此神奇魔力?快来揭开多语言支持的 Web 应用神秘面纱
【8月更文挑战第31天】在全球化背景下,Web应用需适应多种语言环境。Struts 2凭借其强大的国际化(i18n)支持,简化了多语言应用开发。通过不同语言的资源文件,它能自动匹配用户语言偏好,优化用户体验并扩展用户群。下面是一个示例:创建`messages.properties`(英语)与`messages_zh_CN.properties`(中文),并在Struts 2的Action类及JSP页面中调用`getText()`方法及Struts标签展示相应语言内容。此外,在struts.xml中指定资源文件,以确保框架正确加载对应语言包。通过这些步骤,开发者可以轻松实现应用的多语言支持。
61 0
|
移动开发 前端开发 程序员
有哪些代码开源平台值得推荐?
开源是程序员最高的浪漫
|
6月前
|
监控 Java 中间件
蚂蚁金服:开源增强版 SpringBoot 的研发框架
蚂蚁金服:开源增强版 SpringBoot 的研发框架
79 1
|
12月前
|
消息中间件 NoSQL Java
顶级!13位专家力荐Spring5为企业级开发提供一站式方案
Spring作为一个互联网公司的必备框架,毫无疑问,在Java开发中占据了十分重要的位置!它可以解决企业应用开发的复杂性,为此提供解决方案。Spring的发展日新月异,满足了企业发展的需要。 Spring已经成为Java应用研发框架的事实标准,多年来在各个行业信息化建设中表现优异。从基础再到深入浅出,用极其简单的例子详解了Spring 的每个知识点,更重要的是每一个知识点都有极其详细生动的例子搭配讲解,特别是Spring AOP业务和系统功能分离的思想。 此文档从Spring基础篇、Spring5新特性篇、Spring系统集成篇,介绍了Spring5企业级开发实战的详细内容,由于篇幅限制,
51 0
|
敏捷开发 缓存 人工智能