工程化与框架系列（28）--前端国际化实现

前端国际化实现 🌍

引言

前端国际化（i18n）是现代Web应用中的重要组成部分，它能够让应用支持多语言和多地区的用户使用。本文将深入探讨前端国际化的实现方案和最佳实践，包括文本翻译、日期时间格式化、货币处理等方面。

国际化概述

前端国际化主要包括以下方面：

• 文本翻译：界面文字的多语言支持
• 日期时间：不同地区的日期时间格式
• 货币处理：不同地区的货币格式
• 数字格式：不同地区的数字表示方式
• 文字方向：从左到右（LTR）和从右到左（RTL）的布局支持

国际化工具实现

国际化管理器

// 国际化管理器类
class I18nManager {private static instance: I18nManager;private currentLocale: string;private messages: Map<string, Record<string, string>>;private numberFormatter: Intl.NumberFormat;private dateFormatter: Intl.DateTimeFormat;private currencyFormatter: Intl.NumberFormat;private constructor() {this.currentLocale = 'en-US';this.messages = new Map();// 初始化格式化器this.numberFormatter = new Intl.NumberFormat(this.currentLocale);this.dateFormatter = new Intl.DateTimeFormat(this.currentLocale);this.currencyFormatter = new Intl.NumberFormat(this.currentLocale, {style: 'currency',currency: 'USD'});// 初始化事件分发this.initializeEventDispatcher();}// 获取单例实例static getInstance(): I18nManager {if (!I18nManager.instance) {I18nManager.instance = new I18nManager();}return I18nManager.instance;}// 设置语言环境setLocale(locale: string): void {this.currentLocale = locale;// 更新格式化器this.numberFormatter = new Intl.NumberFormat(locale);this.dateFormatter = new Intl.DateTimeFormat(locale);this.currencyFormatter = new Intl.NumberFormat(locale, {style: 'currency',currency: this.getCurrencyCode(locale)});// 触发语言变更事件this.dispatchLocaleChange();}// 获取当前语言环境getLocale(): string {return this.currentLocale;}// 加载语言包loadMessages(locale: string, messages: Record<string, string>): void {this.messages.set(locale, messages);}// 获取翻译文本translate(key: string, params?: Record<string, any>): string {const messages = this.messages.get(this.currentLocale);if (!messages) {return key;}let text = messages[key] || key;// 替换参数if (params) {Object.entries(params).forEach(([key, value]) => {text = text.replace(`{${key}}`, String(value));});}return text;}// 格式化数字formatNumber(value: number): string {return this.numberFormatter.format(value);}// 格式化日期formatDate(date: Date, options?: Intl.DateTimeFormatOptions): string {if (options) {return new Intl.DateTimeFormat(this.currentLocale, options).format(date);}return this.dateFormatter.format(date);}// 格式化货币formatCurrency(value: number): string {return this.currencyFormatter.format(value);}// 获取文字方向getTextDirection(): 'ltr' | 'rtl' {return ['ar', 'he'].includes(this.currentLocale.split('-')[0])? 'rtl': 'ltr';}// 初始化事件分发private initializeEventDispatcher(): void {document.addEventListener('DOMContentLoaded', () => {this.updateDocumentDirection();});}// 更新文档方向private updateDocumentDirection(): void {document.documentElement.dir = this.getTextDirection();document.documentElement.lang = this.currentLocale;}// 触发语言变更事件private dispatchLocaleChange(): void {const event = new CustomEvent('localechange', {detail: { locale: this.currentLocale }});document.dispatchEvent(event);// 更新文档方向this.updateDocumentDirection();}// 获取货币代码private getCurrencyCode(locale: string): string {const region = locale.split('-')[1] || 'US';const currencyMap: Record<string, string> = {'US': 'USD','GB': 'GBP','EU': 'EUR','CN': 'CNY','JP': 'JPY'// 添加更多货币映射};return currencyMap[region] || 'USD';}
}// 使用示例
const i18n = I18nManager.getInstance();// 加载英文语言包
i18n.loadMessages('en-US', {'greeting': 'Hello, {name}!','farewell': 'Goodbye!','items_count': 'You have {count} items.'
});// 加载中文语言包
i18n.loadMessages('zh-CN', {'greeting': '你好，{name}！','farewell': '再见！','items_count': '你有 {count} 个物品。'
});// 切换语言
i18n.setLocale('zh-CN');// 使用翻译
console.log(i18n.translate('greeting', { name: 'John' })); // 输出：你好，John！
console.log(i18n.translate('items_count', { count: 5 })); // 输出：你有 5 个物品。// 格式化数字和日期
console.log(i18n.formatNumber(1234567.89)); // 输出：1,234,567.89
console.log(i18n.formatDate(new Date())); // 输出：2024/2/20
console.log(i18n.formatCurrency(99.99)); // 输出：¥99.99

组件国际化

// 国际化组件装饰器
function withI18n<T extends { new (...args: any[]): any }>(Component: T
) {return class extends Component {private i18n: I18nManager;private localeChangeHandler: () => void;constructor(...args: any[]) {super(...args);this.i18n = I18nManager.getInstance();this.localeChangeHandler = this.onLocaleChange.bind(this);// 监听语言变更事件document.addEventListener('localechange', this.localeChangeHandler);}// 组件销毁时移除事件监听disconnectedCallback() {document.removeEventListener('localechange', this.localeChangeHandler);if (super.disconnectedCallback) {super.disconnectedCallback();}}// 语言变更处理private onLocaleChange(): void {this.requestUpdate();}// 翻译辅助方法protected t(key: string, params?: Record<string, any>): string {return this.i18n.translate(key, params);}// 格式化数字protected formatNumber(value: number): string {return this.i18n.formatNumber(value);}// 格式化日期protected formatDate(date: Date): string {return this.i18n.formatDate(date);}// 格式化货币protected formatCurrency(value: number): string {return this.i18n.formatCurrency(value);}};
}// 国际化文本组件
@withI18n
class I18nText extends HTMLElement {private key: string;private params: Record<string, any>;constructor() {super();this.key = '';this.params = {};}// 观察的属性static get observedAttributes() {return ['key', 'params'];}// 属性变化处理attributeChangedCallback(name: string,oldValue: string,newValue: string) {if (name === 'key') {this.key = newValue;} else if (name === 'params') {try {this.params = JSON.parse(newValue);} catch (e) {this.params = {};}}this.updateContent();}// 更新内容private updateContent(): void {this.textContent = this.t(this.key, this.params);}
}// 注册组件
customElements.define('i18n-text', I18nText);// 国际化日期组件
@withI18n
class I18nDate extends HTMLElement {private date: Date;private format: Intl.DateTimeFormatOptions;constructor() {super();this.date = new Date();this.format = {};}// 观察的属性static get observedAttributes() {return ['value', 'format'];}// 属性变化处理attributeChangedCallback(name: string,oldValue: string,newValue: string) {if (name === 'value') {this.date = new Date(newValue);} else if (name === 'format') {try {this.format = JSON.parse(newValue);} catch (e) {this.format = {};}}this.updateContent();}// 更新内容private updateContent(): void {this.textContent = this.formatDate(this.date);}
}// 注册组件
customElements.define('i18n-date', I18nDate);// 使用示例
const template = `<div><i18n-text key="greeting" params='{"name":"John"}'></i18n-text><i18n-date value="2024-02-20"></i18n-date></div>
`;

路由国际化

// 国际化路由管理器
class I18nRouter {private static instance: I18nRouter;private i18n: I18nManager;private routes: Map<string, I18nRoute>;private currentRoute: I18nRoute | null;private constructor() {this.i18n = I18nManager.getInstance();this.routes = new Map();this.currentRoute = null;this.initializeRouter();}// 获取单例实例static getInstance(): I18nRouter {if (!I18nRouter.instance) {I18nRouter.instance = new I18nRouter();}return I18nRouter.instance;}// 注册路由registerRoute(route: I18nRoute): void {this.routes.set(route.name, route);}// 获取路由URLgetRouteUrl(name: string,params?: Record<string, string>): string {const route = this.routes.get(name);if (!route) {throw new Error(`Route "${name}" not found`);}const locale = this.i18n.getLocale();let path = route.paths[locale] || route.paths['en-US'];// 替换路径参数if (params) {Object.entries(params).forEach(([key, value]) => {path = path.replace(`:${key}`, value);});}return `/${locale}${path}`;}// 导航到路由navigate(name: string,params?: Record<string, string>): void {const url = this.getRouteUrl(name, params);window.history.pushState(null, '', url);this.handleRoute();}// 初始化路由器private initializeRouter(): void {// 监听popstate事件window.addEventListener('popstate', () => {this.handleRoute();});// 监听语言变更document.addEventListener('localechange', () => {this.updateRoute();});// 处理初始路由this.handleRoute();}// 处理路由private handleRoute(): void {const path = window.location.pathname;const [, locale, ...segments] = path.split('/');// 设置语言if (locale && locale !== this.i18n.getLocale()) {this.i18n.setLocale(locale);}// 查找匹配的路由const matchedRoute = this.findMatchingRoute(segments.join('/'));if (matchedRoute) {this.currentRoute = matchedRoute;this.renderRoute(matchedRoute);}}// 更新当前路由private updateRoute(): void {if (this.currentRoute) {const params = this.extractRouteParams();this.navigate(this.currentRoute.name, params);}}// 查找匹配的路由private findMatchingRoute(path: string): I18nRoute | null {const locale = this.i18n.getLocale();for (const route of this.routes.values()) {const routePath = route.paths[locale] || route.paths['en-US'];if (this.matchPath(path, routePath)) {return route;}}return null;}// 匹配路径private matchPath(path: string, pattern: string): boolean {const pathSegments = path.split('/');const patternSegments = pattern.split('/');if (pathSegments.length !== patternSegments.length) {return false;}return patternSegments.every((segment, index) => {if (segment.startsWith(':')) {return true;}return segment === pathSegments[index];});}// 提取路由参数private extractRouteParams(): Record<string, string> {if (!this.currentRoute) {return {};}const locale = this.i18n.getLocale();const routePath = this.currentRoute.paths[locale] || this.currentRoute.paths['en-US'];const currentPath = window.location.pathname.split('/').slice(2).join('/');const params: Record<string, string> = {};const pathSegments = currentPath.split('/');const patternSegments = routePath.split('/');patternSegments.forEach((segment, index) => {if (segment.startsWith(':')) {const paramName = segment.slice(1);params[paramName] = pathSegments[index];}});return params;}// 渲染路由private renderRoute(route: I18nRoute): void {const params = this.extractRouteParams();route.component.render(params);}
}// 路由配置接口
interface I18nRoute {name: string;paths: Record<string, string>;component: {render: (params: Record<string, string>) => void;};
}// 使用示例
const router = I18nRouter.getInstance();// 注册路由
router.registerRoute({name: 'home',paths: {'en-US': '/home','zh-CN': '/首页'},component: {render: () => {document.getElementById('app')!.innerHTML = `<h1><i18n-text key="home_title"></i18n-text></h1>`;}}
});router.registerRoute({name: 'product',paths: {'en-US': '/product/:id','zh-CN': '/产品/:id'},component: {render: (params) => {document.getElementById('app')!.innerHTML = `<h1><i18n-text key="product_title" params='{"id":"${params.id}"}'></i18n-text></h1>`;}}
});// 导航到路由
router.navigate('home');
router.navigate('product', { id: '123' });

最佳实践与建议

1. 文本管理

   • 使用键值对管理文本
   • 支持参数替换
   • 处理复数形式
   • 维护翻译文档

2. 格式处理

   • 使用Intl API
   • 处理时区问题
   • 支持不同数字系统
   • 考虑货币转换

3. 布局适配

   • 支持RTL布局
   • 处理文本长度变化
   • 适配不同字体
   • 考虑文化差异

4. 性能优化

   • 按需加载语言包
   • 缓存翻译结果
   • 优化重渲染
   • 减少格式化开销

总结

前端国际化需要考虑以下方面：

1. 文本翻译管理
2. 日期时间处理
3. 货币数字格式化
4. 布局方向适配
5. 性能优化策略

通过合理的架构设计和优化措施，可以构建出优秀的国际化应用。

学习资源

1. Intl API文档
2. i18n最佳实践
3. RTL布局指南
4. 区域设置标准
5. 国际化测试方法

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻