介绍

Dojo 的中间件系统提供了一种以响应式方式管理异步或命令式 API 的方法，以及影响任何组合的基于函数的小部件或其他中间件的行为和属性 API。

框架提供了几个核心和可选的中间件，但是应用程序开发人员可以轻松地编写自己的中间件。

功能	描述
响应式 DOM 访问	通过中间件，基于函数的小部件可以与对应于其输出节点的 DOM 部分的具体信息和 API 进行交互。
小部件渲染生命周期控制	中间件可以控制 Dojo 渲染管道的任何组合小部件的部分，例如在小部件需要渲染更新时使它们失效。小部件渲染也可以暂停和恢复，允许在等待关键信息变得可用时短路渲染输出。
各种框架提供的中间件	Dojo 提供可选的中间件，允许小部件实现一系列功能，例如响应和控制焦点、简单值缓存、响应元素交叉和调整大小事件、CSS 主题、国际化和构建时渲染等。
轻松组合和重用	中间件设计与基于函数的小部件紧密结合，允许在小部件层次结构中进行一致的组合，以及在开发自定义中间件时进行重用。

基本用法

创建中间件

使用与定义基于函数的小部件相同的create() 原语来定义中间件
可以选择定义一个属性接口，该接口会增强组合中间件的小部件的属性接口。属性值在创建组合小部件的实例时给出。
返回一个简单的函数引用，该函数定义了中间件的 API，其他组合的小部件或中间件可以与之交互

src/middleware/myMiddleware.ts

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

const factory = create().properties<{ middlewareProp?: boolean }>();

export const myMiddleware = factory(({ properties }) => {
	return () => {
		return properties().middlewareProp ? 'Conditional is true' : 'Conditional is false';
	};
});

export default myMiddleware;

组合中间件

组合中间件并返回一个对象以公开更复杂的 API
使用核心invalidator 中间件将组合的小部件标记为需要重新渲染

src/middleware/myComposingMiddleware.ts

import { create, invalidator } from '@dojo/framework/core/vdom';
import myMiddleware from './myMiddleware';

const factory = create({ myMiddleware, invalidator });

export const myComposingMiddleware = factory(({ middleware: { myMiddleware, invalidator } }) => {
	return {
		get() {
			return myMiddleware();
		},
		set() {
			invalidator();
		}
	};
});

export default myComposingMiddleware;

使用任何使用的中间件的附加属性来增强小部件的属性接口
在使用组合它们的小部件时传入中间件属性

src/widgets/MyWidget.tsx

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

const factory = create({ myComposingMiddleware });

export default factory(function MyWidget({ properties, middleware: { myComposingMiddleware } }) {
	return (
		<virtual>
			<div>{`Middleware property value: ${properties.middlewareProp}`}</div>
			<div>{`Middleware usage: ${myComposingMiddleware.get()}`}</div>
		</virtual>
	);
});

src/main.tsx

import renderer, { tsx } from '@dojo/framework/core/vdom';
import MyWidget from './widgets/MyWidget';

const r = renderer(() => <MyWidget middlewareProp={true} />);
r.mount();

介绍

基本用法

创建中间件

组合中间件

在小部件中使用中间件