dojo 龙形主标识

简介

Dojo 的 i18n 包解决了围绕 Web 应用程序国际化的各种常见需求和挑战。

虽然它的大部分功能可以用作独立模块，但它旨在用于 Dojo 应用程序，以帮助渲染本地化的小部件，包括高级消息、日期和数字格式化。

功能 描述
每个小部件的本地化 每个小部件实例都可以指定自己的区域设置，允许在单个应用程序中显示来自多个区域设置的数据。如果没有指定，小部件将回退到当前根区域设置。
细粒度消息捆绑 捆绑包可以分解并本地作用域到单个小部件，并且可以延迟加载，只有在使用给定区域设置时才加载。这允许消息捆绑包从应用程序中所有其他资源的相同层分离和捆绑交付中受益。
特定于区域设置的消息、日期和数字格式化 使用行业标准的 Unicode CLDR 格式化 规则。所需的 CLDR 数据在构建时会自动注入到应用程序中。
对区域设置更改的响应式反应 类似于 Dojo 应用程序中的其他响应式状态更改，消息可以在更改区域设置时自动重新加载，并重新渲染受影响的小部件。如果将 i18n 用作独立模块，则可以通过侦听器回调对区域设置更改事件进行操作。
回退区域设置检测 确保如果未显式设置根覆盖，则可以使用默认区域设置。系统区域设置（或在服务器端运行时的进程/主机区域设置）与 .dojorc 中定义的区域设置列表匹配。如果支持系统区域设置，则将其设置为默认值。否则，将使用 .dojorc 中定义的默认区域设置。

基本用法

国际化小部件

  • 从单个默认语言（英语）开始。

.dojorc

{
	"build-app": {
		"locale": "en"
	}
}

src/widgets/MyI18nWidget.tsx

基于函数的变体

import { create, tsx } from '@dojo/framework/core/vdom';
import i18n from '@dojo/framework/core/middleware/i18n';

import myWidgetMessageBundle from '../nls/en/MyI18nWidget.ts';

const factory = create({ i18n });

export default factory(function MyI18nWidget({ middleware: { i18n } }) {
	const { messages } = i18n.localize(myWidgetMessageBundle);

	return <div title={messages.title}>{messages.content}</div>;
});

基于类的变体

import { WidgetBase } from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';

import I18nMixin from '@dojo/framework/core/mixins/I18n';
import myWidgetMessageBundle from '../nls/en/MyI18nWidget.ts';

export default class MyI18nWidget extends I18nMixin(WidgetBase) {
	protected render() {
		const { messages } = this.localizeBundle(myWidgetMessageBundle);

		return <div title={messages.title}>{messages.content}</div>;
	}
}

src/nls/en/MyI18nWidget.ts

export default {
	messages: {
		title: 'Hello',
		content: 'This is an internationalized widget'
	}
};

添加小部件语言本地化捆绑包

  • 支持两种区域设置 - 英语作为默认语言，以及法语翻译，该翻译将为任何将 fr 设置为其主要语言的用户激活。
  • 除非为应用程序专门设置了区域设置，否则将根据浏览器区域设置（如果可用）使用适当的 supportedLocale。
  • 要使用 i18n 运行应用程序构建，您需要将 cldr-data 作为依赖项安装到您的应用程序中，否则构建将失败。

.dojorc

{
	"build-app": {
		"locale": "en",
		"supportedLocales": [ "fr" ]
	}
}

src/nls/en/MyI18nWidget.ts

export default {
	locales: {
		fr: () => import('../fr/MyI18nWidget')
	},
	messages: {
		title: 'Hello',
		content: 'This is an internationalized widget'
	}
};

src/nls/fr/MyI18nWidget.ts

export default {
	title: 'Bonjour',
	content: 'Ceci est un widget internationalisé'
};

请注意，fs 语言捆绑包只是返回消息捆绑包，而不是包含消息捆绑包的对象，如默认区域设置文件。

在应用程序中指定根区域设置

在应用程序中仅使用基于函数的小部件和 i18n 中间件意味着不需要向应用程序的 main.ts/main.tsx 入口点添加引导代码。相反，可以在顶级 App 小部件中设置默认应用程序区域设置，使用来自 @dojo/framework/core/middleware/i18n 的 i18n 中间件。当尚未定义区域设置时，可以设置默认区域设置。

src/App.tsx

import { create, tsx } from '@dojo/framework/core/vdom';

const factory = create({ i18n });

export default factory(function App({ middleware: { i18n } }) {
	if (!i18n.get()) {
		i18n.set({ locale: 'en-us', rtl: false });
	}
	return <div>{/* the application widgets */}</div>;
});

但是，如果应用程序使用任何基于类的小部件，例如来自 @dojo/widgets 套件的小部件，则需要在应用程序注册表中定义默认区域设置详细信息。这可以使用来自 @dojo/framework/core/mixins/I18n 的 registryI18nInjector 实用程序函数来完成。

src/main.tsx

import renderer, { tsx } from '@dojo/framework/core/vdom';
import Registry from '@dojo/framework/core/Registry';
import { registerI18nInjector } from '@dojo/framework/core/mixins/I18n';

import App from './App';

const registry = new Registry();
registerI18nInjector({ locale: 'en-us', rtl: false }, registry);

const r = renderer(() => <App />);
r.mount({ registry });

在应用程序中更改区域设置

  • 使用 i18n 中间件 允许用户在支持的区域设置之间进行选择，并通过中间件的 .set API 执行区域设置更改。

提醒：当同时使用基于类的小部件和基于函数的小部件时，此中间件应与 registeri18nInjector 一起使用，以响应式地将区域设置更改传播到所有支持 i18n 的小部件。

src/widgets/LocaleChanger.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import i18n from '@dojo/framework/core/middleware/i18n';

const factory = create({ i18n });

export default factory(function LocaleChanger({ middleware: { i18n } }) {
	return (
		<div>
			<button
				onclick={() => {
					i18n.set({ locale: 'en' });
				}}
			>
				English
			</button>
			<button
				onclick={() => {
					i18n.set({ locale: 'fr' });
				}}
			>
				French
			</button>
		</div>
	);
});