Dojo предоставляет Система промежуточного программного обеспечения То, что вы можете использовать в разработке виджетов для ваших приложений. Есть всесторонний список Доступно промежуточное ПО То, что вы можете использовать для управления состоянием локального видетета, стилью или DOM, связанной с информацией.
Помесление действительно интересна, потому что их можно использовать для того, чтобы помочь вам взаимодействовать с DOM или со свойствами вашего виджета.
Вы можете создать промежуточное программное обеспечение так же, как виджет, за исключением вместо того, чтобы возвращать Vnode, вы можете вернуть объект или функцию, которые можно использовать для выполнения дополнительной работы для вашего виджета.
Документация Dojo касается Создание собственного промежуточного программного обеспечения Отказ Как вы могли бы реализовать собственные пользовательские промежуточные программы для своих собственных виджетов?
Проверенная промежуточная программа
Может быть, я создаю некоторые виджеты на основе формы, и я хочу предоставить мою собственную проверку. Например, я мог бы захотеть подтвердить, что номер телефона введен правильно.
В этом случае я заинтересован в упаковке ввода в какой-то форме проверки. Так что я собираюсь создать PhoneValidator Виджет, чтобы обернуть DOM вход Отказ Результат будет выглядеть что-то подобное.
// src/widgets/PhoneNumber.tsx
import { create, tsx } from "@dojo/framework/core/vdom";
import icache from "@dojo/framework/core/middleware/icache";
import PhoneValidator from "./PhoneValidator";
import * as css from "./styles/PhoneNumber.m.css";
const factory = create({ icache });
export const PhoneNumber = factory(function PhoneNumber({
middleware: { icache }
}) {
// use local phone value to pass to validator
const phone = icache.getOrSet("phone", "");
return (
{
icache.set("phone", (e.target as HTMLInputElement).value);
}}
/>
);
});
export default PhoneNumber;
Идея вот что я просто хочу PhoneValidator Чтобы поместить красный или зеленый план на мой вклад, чтобы дать мне знать, если это действительный номер телефона или нет. Это довольно просто, но это то, что я мог бы повторно использовать в нескольких приложениях.
// src/widgets/PhoneValidator.tsx
import { create, tsx } from "@dojo/framework/core/vdom";
import phoneNumberMiddleware from "../middleware/phoneNumberMiddleware";
import * as css from "./styles/PhoneValidator.m.css";
interface Properties {
phone: string;
}
const factory = create({ phoneNumberMiddleware }).properties();
export const PhoneValidator = factory(function PhoneValidator({
children,
middleware: { phoneNumberMiddleware }
}) {
const { valid, value } = phoneNumberMiddleware();
let validCss = "";
if (value.length) {
validCss = valid ? css.valid : css.invalid;
}
return {children()};
});
export default PhoneValidator;
PhoneValidator использует немного промежуточного программного обеспечения, которая возвращает Действительно Имущество, которое является либо правда или ложный . Это также вернет ценность номера телефона, который был проверен. На основании того, действует ли номер телефона или нет, он будет использовать некоторые CSS для красной или зеленой границы.
Обратите внимание, что я никогда не пропускаю Телефон свойство на промежуточное программное обеспечение. Предоставю phonenumbermiddleware Как промежуточное программное обеспечение для PhoneValidator Виджет, промежуточное программное обеспечение будет иметь доступ к свойствам виджета. Давайте посмотрим, как это выглядит.
// src/middleware/phoneNumberMiddleware.tsx
import { create } from "@dojo/framework/core/vdom";
const factory = create().properties<{ phone?: string }>();
export const phoneNumberMiddleware = factory(({ properties }) => {
return () => {
// extract the `phone` value from the properties of
// the parent widget
const { phone } = properties();
// test the phone number
const valid = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/.test(phone || "");
return {
valid,
value: phone
};
};
});
export default phoneNumberMiddleware;
Промежуточное программное обеспечение возвращает функцию, которая проверит номер телефона и возвращает, действительно ли это или нет.
Вот что это выглядит в примере приложения.
Геолокационная промежуточная программа
Вы также можете сделать удовольствие от промежуточного программного обеспечения, которая взаимодействует с домом ваших виджетов. Например, есть пересечение и Изменить размер промежуточное ПО.
Вы можете использовать подобный шаблон, чтобы захватить геолокацию браузеров.
// src/middleware/geolocation.ts
import { create } from "@dojo/framework/core/vdom";
import icache from "@dojo/framework/core/middleware/icache";
const factory = create({ icache });
type Coords = Pick;
// utility to get current geolocation
const getGeolocation = async (): Promise => {
return new Promise(resolve => {
if (!("geolocation" in navigator)) {
resolve({ latitude: 0, longitude: 0 });
} else {
navigator.geolocation.getCurrentPosition(({ coords }) => {
const { latitude, longitude } = coords;
resolve({ latitude, longitude });
});
}
});
};
// default coordinates
const defaultCoordinates = { latitude: 0, longitude: 0 };
export const geolocation = factory(({ middleware: { icache } }) => {
return (): Coords => {
// get current value or default
const coords = icache.getOrSet("coords", defaultCoordinates);
if (coords.latitude === 0 && coords.longitude === 0) {
// only get location if it is not the default
getGeolocation().then(results => {
if (
coords.latitude !== results.latitude &&
coords.longitude !== results.longitude
) {
// only update cache if different from current value
// this will invalidate the widget
icache.set("coords", results);
}
});
}
return coords;
};
});
export default geolocation;
Это промежуточное программное обеспечение использует icache промежуточное программное обеспечение, так что, когда свойства геолокации обновляются, он будет недействительным промежуточным программным обеспечением, и это будет в свою очередь, недействительна виджет, чтобы он мог рерандер новыми данными.
// src/main.tsx
import { renderer, create, tsx } from "@dojo/framework/core/vdom";
import "@dojo/themes/dojo/index.css";
import Hello from "./widgets/Hello";
import geolocation from "./middleware/geolocation";
const factory = create({ geolocation });
const App = factory(function App({ middleware: { geolocation } }) {
// get my geolocation middleware values
const { latitude, longitude } = geolocation();
return (
{"Start editing to see some magic happen \u2728"}
- Latitude: {latitude.toFixed(3)}
- Longitude: {longitude.toFixed(3)}
);
});
Вот демо того, как это выглядит. Возможно, вам может потребоваться открыть его в новом окне, чтобы получить ваше местоположение.
Резюме
Существует множество способов создавать промежуточное ПО для ваших приложений. Ориентация устройства, интерактивность мыши, медиа-запросы, аппаратные устройства, перетаскивание, падение, полный экран, аутентификация и многое другое. Я с нетерпением жду всех различных способов промежуточного программного обеспечения может быть реализован в виджеты Dojo!
Оригинал: “https://dev.to/odoenet/custom-dojo-middleware-l19”