@dxtmisha/wiki 0.39.6 → 0.39.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/defineProperty-Bjg6wMoX.js +39 -0
- package/dist/library.d.ts +0 -1
- package/dist/library.js +25 -25
- package/dist/media.js +12 -0
- package/dist/storybook.js +26929 -11
- package/package.json +1 -1
- package/src/library.ts +0 -1
- package/src/media/functional/functional-basic/api/api.en.mdx +45 -0
- package/src/media/functional/functional-basic/api/api.ru.mdx +45 -0
- package/src/media/functional/functional-basic/api/api.vi.mdx +45 -0
- package/src/media/functional/functional-basic/classes/Api/Api.en.mdx +54 -54
- package/src/media/functional/functional-basic/classes/Api/Api.ru.mdx +54 -54
- package/src/media/functional/functional-basic/classes/Api/Api.vi.mdx +54 -54
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.en.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.ru.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.vi.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.en.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.ru.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.vi.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.en.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.ru.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.vi.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.en.mdx +28 -14
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.ru.mdx +33 -19
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.vi.mdx +33 -19
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.en.mdx +56 -0
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.ru.mdx +56 -0
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.vi.mdx +55 -0
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.en.mdx +101 -49
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.ru.mdx +101 -49
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.vi.mdx +98 -47
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.en.mdx +44 -26
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.ru.mdx +45 -27
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.vi.mdx +44 -26
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.en.mdx +50 -21
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.ru.mdx +54 -25
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.vi.mdx +55 -26
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.en.mdx +29 -32
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.ru.mdx +33 -36
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.vi.mdx +33 -36
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.en.mdx +34 -53
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.ru.mdx +33 -52
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.vi.mdx +39 -58
- package/src/media/functional/functional-basic/classes/Cache/Cache.en.mdx +7 -4
- package/src/media/functional/functional-basic/classes/Cache/Cache.ru.mdx +7 -4
- package/src/media/functional/functional-basic/classes/Cache/Cache.vi.mdx +28 -25
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.en.mdx +45 -53
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.ru.mdx +46 -54
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.vi.mdx +47 -55
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.en.mdx +13 -1
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.ru.mdx +13 -1
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.vi.mdx +13 -0
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.en.mdx +88 -44
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.ru.mdx +88 -44
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.vi.mdx +85 -41
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.en.mdx +43 -22
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.ru.mdx +46 -25
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.vi.mdx +43 -22
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.en.mdx +84 -0
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.ru.mdx +84 -0
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.vi.mdx +100 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.en.mdx +153 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.ru.mdx +153 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.vi.mdx +153 -0
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.en.mdx +32 -25
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.ru.mdx +32 -25
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.vi.mdx +32 -27
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.en.mdx +36 -4
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.ru.mdx +36 -4
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.vi.mdx +36 -4
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.en.mdx +101 -70
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.ru.mdx +100 -69
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.vi.mdx +101 -70
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.en.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.ru.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.vi.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.en.mdx +44 -96
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.ru.mdx +44 -96
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.vi.mdx +44 -96
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.en.mdx +49 -28
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.ru.mdx +21 -0
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.vi.mdx +63 -42
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.en.mdx +97 -109
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.ru.mdx +86 -98
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.vi.mdx +99 -111
- package/src/media/functional/functional-basic/classes/Geo/Geo.en.mdx +3 -3
- package/src/media/functional/functional-basic/classes/Geo/Geo.ru.mdx +5 -5
- package/src/media/functional/functional-basic/classes/Geo/Geo.vi.mdx +5 -5
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.en.mdx +83 -40
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.ru.mdx +83 -40
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.vi.mdx +87 -44
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.en.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.ru.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.vi.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.en.mdx +56 -105
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.ru.mdx +53 -102
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.vi.mdx +55 -105
- package/src/media/functional/functional-basic/classes/Hash/Hash.en.mdx +18 -7
- package/src/media/functional/functional-basic/classes/Hash/Hash.ru.mdx +18 -7
- package/src/media/functional/functional-basic/classes/Hash/Hash.vi.mdx +18 -7
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.en.mdx +54 -0
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.ru.mdx +54 -0
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.vi.mdx +54 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.en.mdx +78 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.ru.mdx +78 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.vi.mdx +78 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.en.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.ru.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.vi.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.en.mdx +131 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.ru.mdx +131 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.vi.mdx +131 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.en.mdx +97 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.ru.mdx +97 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.vi.mdx +97 -0
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.en.mdx +13 -5
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.ru.mdx +13 -5
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.vi.mdx +13 -5
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.en.mdx +37 -19
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.ru.mdx +37 -19
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.vi.mdx +35 -17
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.en.mdx +31 -19
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.ru.mdx +31 -19
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.vi.mdx +32 -20
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.en.mdx +29 -15
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.ru.mdx +28 -14
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.vi.mdx +28 -14
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.en.mdx +7 -3
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.ru.mdx +7 -3
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.vi.mdx +7 -3
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.en.mdx +17 -13
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.ru.mdx +17 -13
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.vi.mdx +17 -13
- package/src/media/functional/functional-basic/functions/createElement/createElement.en.mdx +2 -0
- package/src/media/functional/functional-basic/functions/createElement/createElement.ru.mdx +2 -0
- package/src/media/functional/functional-basic/functions/createElement/createElement.vi.mdx +2 -0
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.en.mdx +1 -3
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.ru.mdx +1 -3
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.vi.mdx +1 -3
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.en.mdx +13 -10
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.ru.mdx +14 -11
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.vi.mdx +12 -9
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.en.mdx +14 -13
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.ru.mdx +15 -14
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.vi.mdx +14 -13
- package/src/media/functional/functional-basic/functions/forEach/forEach.en.mdx +1 -1
- package/src/media/functional/functional-basic/functions/forEach/forEach.ru.mdx +1 -1
- package/src/media/functional/functional-basic/functions/forEach/forEach.vi.mdx +1 -1
- package/src/media/functional/functional-basic/functions/frame/frame.en.mdx +7 -4
- package/src/media/functional/functional-basic/functions/frame/frame.ru.mdx +6 -3
- package/src/media/functional/functional-basic/functions/frame/frame.vi.mdx +7 -4
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.en.mdx +34 -0
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.ru.mdx +34 -0
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.vi.mdx +35 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.en.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.ru.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.vi.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.en.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.ru.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.vi.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.en.mdx +17 -3
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.ru.mdx +17 -3
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.vi.mdx +18 -4
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.en.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.ru.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.vi.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.en.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.ru.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.vi.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.en.mdx +11 -4
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.ru.mdx +14 -7
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.vi.mdx +13 -6
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.en.mdx +3 -2
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.ru.mdx +3 -2
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.vi.mdx +3 -2
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.en.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.ru.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.vi.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toString/toString.en.mdx +28 -0
- package/src/media/functional/functional-basic/functions/toString/toString.ru.mdx +28 -0
- package/src/media/functional/functional-basic/functions/toString/toString.vi.mdx +28 -0
- package/src/media/functional/ui/about/about.en.mdx +45 -0
- package/src/media/functional/ui/about/about.ru.mdx +45 -0
- package/src/media/functional/ui/about/about.vi.mdx +45 -0
- package/src/media/functional/ui/component/component.en.mdx +104 -0
- package/src/media/functional/ui/component/component.ru.mdx +106 -0
- package/src/media/functional/ui/component/component.vi.mdx +104 -0
- package/src/media/functional/ui/setup/setup.en.mdx +72 -0
- package/src/media/functional/ui/setup/setup.ru.mdx +72 -0
- package/src/media/functional/ui/setup/setup.vi.mdx +72 -0
- package/src/media/functional/ui/wiki-data.en.mdx +114 -0
- package/src/media/functional/ui/wiki-data.ru.mdx +114 -0
- package/src/media/functional/ui/wiki-data.vi.mdx +114 -0
- package/dist/WikiStorybookDescriptions-IKMchHA-.js +0 -26959
package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.en.mdx
CHANGED
|
@@ -4,102 +4,83 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
4
4
|
|
|
5
5
|
# BroadcastMessage Class
|
|
6
6
|
|
|
7
|
-
A class for handling
|
|
7
|
+
A class for handling messaging between different browser contexts (tabs, windows, iframes) using the `BroadcastChannel` API. It provides a convenient interface for sending and receiving data with automatic channel lifecycle management and error handling.
|
|
8
|
+
|
|
9
|
+
Features automatic prefix naming to prevent conflicts and integrates with `ErrorCenter` for monitoring initialization failures.
|
|
8
10
|
|
|
9
11
|
## Key Features
|
|
10
12
|
|
|
11
|
-
- **Cross-
|
|
12
|
-
- **Callback
|
|
13
|
-
- **
|
|
14
|
-
- **
|
|
15
|
-
- **
|
|
16
|
-
- **ErrorCenter Integration** — centralized error reporting when the `BroadcastChannel` fails to initialize.
|
|
17
|
-
- **Direct Access** — provide access to the underlying `BroadcastChannel` instance when needed.
|
|
13
|
+
- **Cross-Context Communication** — simple data synchronization between all windows of the same origin.
|
|
14
|
+
- **Callback-Based** — automatic processing of incoming messages and errors through registered callback functions.
|
|
15
|
+
- **Runtime Safety** — built-in DOM environment checking prevents errors during Server-Side Rendering (SSR).
|
|
16
|
+
- **Channel Isolation** — automatic unique prefixing for channel names via `DataStorage`.
|
|
17
|
+
- **Strong Typing** — full TypeScript generics support to ensure message data integrity.
|
|
18
18
|
|
|
19
19
|
## Initialization
|
|
20
20
|
|
|
21
|
-
To initialize the object, call the `BroadcastMessage(name, callback, callbackError, errorCenter)
|
|
21
|
+
To initialize the object, call the constructor `BroadcastMessage(name, callback, callbackError, errorCenter)`.
|
|
22
22
|
|
|
23
23
|
### Generic Constraints
|
|
24
24
|
|
|
25
25
|
- `Message = any` — the type of the message payload.
|
|
26
26
|
|
|
27
27
|
**Parameters:**
|
|
28
|
-
- `name: string` — unique name
|
|
28
|
+
- `name: string` — unique channel name.
|
|
29
29
|
- `callback?: (event: MessageEvent<Message>) => void` — callback function executed when a message is received.
|
|
30
30
|
- `callbackError?: (event: MessageEvent<Message>) => void` — callback function executed when a message error occurs.
|
|
31
|
-
- `errorCenter: ErrorCenterInstance` —
|
|
31
|
+
- `errorCenter: ErrorCenterInstance` — error center instance (defaults to: `ErrorCenter.getItem()`).
|
|
32
32
|
|
|
33
33
|
```typescript
|
|
34
|
-
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
34
|
+
import { BroadcastMessage } from '@dxtmisha/functional-basic'
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
const messenger = new BroadcastMessage(
|
|
36
|
+
const messenger = new BroadcastMessage<string>(
|
|
38
37
|
'my-channel',
|
|
39
|
-
(event) => console.log('Received:', event.data)
|
|
40
|
-
(error) => console.error('Error:', error)
|
|
38
|
+
(event) => console.log('Received:', event.data)
|
|
41
39
|
)
|
|
42
|
-
|
|
43
|
-
// 2. Sending a message
|
|
44
|
-
messenger.post({ type: 'UPDATE', value: 100 })
|
|
45
40
|
```
|
|
46
41
|
|
|
47
|
-
##
|
|
42
|
+
## Methods
|
|
48
43
|
|
|
49
|
-
###
|
|
44
|
+
### Action
|
|
50
45
|
|
|
51
|
-
Sends a message to all listeners
|
|
46
|
+
- `post(message: Message): this` — Sends a message to all listeners in the same channel.
|
|
47
|
+
- `destroy(): this` — Closes the channel and stops listening for messages.
|
|
52
48
|
|
|
53
|
-
|
|
54
|
-
- `message: Message` — the data to send.
|
|
55
|
-
|
|
56
|
-
**Returns:** `this` — for method chaining.
|
|
49
|
+
### Configuration and Access
|
|
57
50
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
## Configuration & Access
|
|
63
|
-
|
|
64
|
-
- `getChannel(): BroadcastChannel | undefined` — Returns the underlying `BroadcastChannel` instance (or `undefined` if not in DOM runtime).
|
|
65
|
-
- `setCallback(callback: (event: MessageEvent<Message>) => void): this` — Updates or sets the callback function for receiving messages.
|
|
66
|
-
- `setCallbackError(callbackError: (event: MessageEvent<Message>) => void): this` — Updates or sets the callback function for message errors.
|
|
51
|
+
- `getChannel(): BroadcastChannel | undefined` — Returns the underlying `BroadcastChannel` instance.
|
|
52
|
+
- `setCallback(callback: Function): this` — Updates the function for processing incoming messages.
|
|
53
|
+
- `setCallbackError(callbackError: Function): this` — Updates the function for processing message errors.
|
|
67
54
|
|
|
68
55
|
## Examples
|
|
69
56
|
|
|
70
|
-
###
|
|
57
|
+
### Syncing State Between Tabs
|
|
71
58
|
|
|
72
|
-
```
|
|
59
|
+
```typescript
|
|
73
60
|
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
74
61
|
|
|
75
|
-
// In
|
|
76
|
-
const authChannel = new BroadcastMessage('auth-status', (event) => {
|
|
62
|
+
// In all application tabs
|
|
63
|
+
const authChannel = new BroadcastMessage<string>('auth-status', (event) => {
|
|
77
64
|
if (event.data === 'LOGOUT') {
|
|
78
65
|
authModule.clearSession()
|
|
79
|
-
window.location.
|
|
66
|
+
window.location.reload()
|
|
80
67
|
}
|
|
81
68
|
})
|
|
82
69
|
|
|
83
|
-
// When user logs out in
|
|
70
|
+
// When a user logs out in one of the tabs
|
|
84
71
|
function onLogout() {
|
|
85
72
|
authChannel.post('LOGOUT')
|
|
86
73
|
}
|
|
87
74
|
```
|
|
88
75
|
|
|
89
|
-
###
|
|
76
|
+
### Updating Data Handler on the Fly
|
|
90
77
|
|
|
91
|
-
```
|
|
92
|
-
const
|
|
93
|
-
'notifications',
|
|
94
|
-
(event) => showToast(event.data.message),
|
|
95
|
-
(error) => console.error('Failed to receive notification:', error)
|
|
96
|
-
)
|
|
78
|
+
```typescript
|
|
79
|
+
const messenger = new BroadcastMessage('data-sync')
|
|
97
80
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
logToService(error)
|
|
81
|
+
messenger.setCallback((event) => {
|
|
82
|
+
console.log('New data received:', event.data)
|
|
101
83
|
})
|
|
102
84
|
|
|
103
|
-
|
|
104
|
-
notifications.post({ message: 'New message received!' })
|
|
85
|
+
messenger.post({ id: 1, status: 'active' })
|
|
105
86
|
```
|
package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.ru.mdx
CHANGED
|
@@ -4,17 +4,17 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
4
4
|
|
|
5
5
|
# Класс BroadcastMessage
|
|
6
6
|
|
|
7
|
-
Класс для работы с сообщениями между
|
|
7
|
+
Класс для работы с сообщениями между различными контекстами браузера (вкладками, окнами, iframe) с использованием API `BroadcastChannel`. Предоставляет удобный интерфейс для отправки и получения данных с автоматическим управлением жизненным циклом канала и обработкой ошибок.
|
|
8
|
+
|
|
9
|
+
Включает автоматическое префиксное именование для предотвращения конфликтов и интегрируется с `ErrorCenter` для мониторинга сбоев инициализации.
|
|
8
10
|
|
|
9
11
|
## Ключевые особенности
|
|
10
12
|
|
|
11
|
-
- **Межконтекстное взаимодействие** — простая
|
|
12
|
-
- **На основе колбэков** —
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
- **Интеграция с ErrorCenter** — централизованная отчетность об ошибках в случае сбоя инициализации `BroadcastChannel`.
|
|
17
|
-
- **Прямой доступ** — предоставление доступа к базовому экземпляру `BroadcastChannel` при необходимости.
|
|
13
|
+
- **Межконтекстное взаимодействие** — простая синхронизация данных между всеми окнами одного и того же источника (origin).
|
|
14
|
+
- **На основе колбэков** — автоматическая обработка входящих сообщений и ошибок через регистрируемые функции обратного вызова.
|
|
15
|
+
- **Безопасность выполнения** — встроенная проверка среды DOM предотвращает ошибки при серверном рендеринге (SSR).
|
|
16
|
+
- **Изоляция каналов** — автоматическое добавление уникального префикса к именам каналов через `DataStorage`.
|
|
17
|
+
- **Строгая типизация** — полная поддержка TypeScript дженериков для обеспечения целостности данных сообщения.
|
|
18
18
|
|
|
19
19
|
## Инициализация
|
|
20
20
|
|
|
@@ -26,80 +26,61 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
26
26
|
|
|
27
27
|
**Параметры:**
|
|
28
28
|
- `name: string` — уникальное имя канала связи.
|
|
29
|
-
- `callback?: (event: MessageEvent<Message>) => void` — функция обратного
|
|
30
|
-
- `callbackError?: (event: MessageEvent<Message>) => void` — функция обратного
|
|
31
|
-
- `errorCenter: ErrorCenterInstance` — экземпляр центра ошибок
|
|
29
|
+
- `callback?: (event: MessageEvent<Message>) => void` — функция обратного вызова при получении сообщения.
|
|
30
|
+
- `callbackError?: (event: MessageEvent<Message>) => void` — функция обратного вызова при ошибке сообщения.
|
|
31
|
+
- `errorCenter: ErrorCenterInstance` — экземпляр центра ошибок (по умолчанию: `ErrorCenter.getItem()`).
|
|
32
32
|
|
|
33
33
|
```typescript
|
|
34
|
-
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
34
|
+
import { BroadcastMessage } from '@dxtmisha/functional-basic'
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
const messenger = new BroadcastMessage(
|
|
36
|
+
const messenger = new BroadcastMessage<string>(
|
|
38
37
|
'my-channel',
|
|
39
|
-
(event) => console.log('Получено:', event.data)
|
|
40
|
-
(error) => console.error('Ошибка:', error)
|
|
38
|
+
(event) => console.log('Получено:', event.data)
|
|
41
39
|
)
|
|
42
|
-
|
|
43
|
-
// 2. Отправка сообщения
|
|
44
|
-
messenger.post({ type: 'UPDATE', value: 100 })
|
|
45
40
|
```
|
|
46
41
|
|
|
47
|
-
##
|
|
42
|
+
## Методы
|
|
48
43
|
|
|
49
|
-
###
|
|
44
|
+
### Действие
|
|
50
45
|
|
|
51
|
-
Отправляет сообщение всем слушателям в том же канале.
|
|
46
|
+
- `post(message: Message): this` — Отправляет сообщение всем слушателям в том же канале.
|
|
47
|
+
- `destroy(): this` — Закрывает канал и прекращает прослушивание сообщений.
|
|
52
48
|
|
|
53
|
-
|
|
54
|
-
- `message: Message` — данные для отправки.
|
|
55
|
-
|
|
56
|
-
**Возвращает:** `this` — для цепочки вызовов.
|
|
49
|
+
### Настройка и доступ
|
|
57
50
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
## Настройка и доступ
|
|
63
|
-
|
|
64
|
-
- `getChannel(): BroadcastChannel | undefined` — Возвращает базовый экземпляр `BroadcastChannel` (или `undefined` вне среды браузера).
|
|
65
|
-
- `setCallback(callback: (event: MessageEvent<Message>) => void): this` — Обновляет или устанавливает функцию обратного вызова для получения сообщений.
|
|
66
|
-
- `setCallbackError(callbackError: (event: MessageEvent<Message>) => void): this` — Обновляет или устанавливает функцию обратного вызова для ошибок сообщений.
|
|
51
|
+
- `getChannel(): BroadcastChannel | undefined` — Возвращает базовый экземпляр `BroadcastChannel`.
|
|
52
|
+
- `setCallback(callback: Function): this` — Обновляет функцию обработки входящих сообщений.
|
|
53
|
+
- `setCallbackError(callbackError: Function): this` — Обновляет функцию обработки ошибок.
|
|
67
54
|
|
|
68
55
|
## Примеры
|
|
69
56
|
|
|
70
57
|
### Синхронизация состояния между вкладками
|
|
71
58
|
|
|
72
|
-
```
|
|
59
|
+
```typescript
|
|
73
60
|
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
74
61
|
|
|
75
|
-
// Во
|
|
76
|
-
const authChannel = new BroadcastMessage('auth-status', (event) => {
|
|
62
|
+
// Во всех вкладках приложения
|
|
63
|
+
const authChannel = new BroadcastMessage<string>('auth-status', (event) => {
|
|
77
64
|
if (event.data === 'LOGOUT') {
|
|
78
65
|
authModule.clearSession()
|
|
79
|
-
window.location.
|
|
66
|
+
window.location.reload()
|
|
80
67
|
}
|
|
81
68
|
})
|
|
82
69
|
|
|
83
|
-
// При выходе пользователя
|
|
70
|
+
// При выходе пользователя в одной из вкладок
|
|
84
71
|
function onLogout() {
|
|
85
72
|
authChannel.post('LOGOUT')
|
|
86
73
|
}
|
|
87
74
|
```
|
|
88
75
|
|
|
89
|
-
###
|
|
76
|
+
### Обновление обработчика на лету
|
|
90
77
|
|
|
91
|
-
```
|
|
92
|
-
const
|
|
93
|
-
'notifications',
|
|
94
|
-
(event) => showToast(event.data.message),
|
|
95
|
-
(error) => console.error('Не удалось получить уведомление:', error)
|
|
96
|
-
)
|
|
78
|
+
```typescript
|
|
79
|
+
const messenger = new BroadcastMessage('data-sync')
|
|
97
80
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
logToService(error)
|
|
81
|
+
messenger.setCallback((event) => {
|
|
82
|
+
console.log('Данные получены:', event.data)
|
|
101
83
|
})
|
|
102
84
|
|
|
103
|
-
|
|
104
|
-
notifications.post({ message: 'Получено новое сообщение!' })
|
|
85
|
+
messenger.post({ id: 1, status: 'active' })
|
|
105
86
|
```
|
package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.vi.mdx
CHANGED
|
@@ -1,105 +1,86 @@
|
|
|
1
1
|
import {Meta} from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/vi/functional-basic/Classes/BroadcastMessage -
|
|
3
|
+
<Meta title='@dxtmisha/vi/functional-basic/Classes/BroadcastMessage - Tin nhắn BroadcastChannel'/>
|
|
4
4
|
|
|
5
5
|
# Lớp BroadcastMessage
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Lớp để xử lý tin nhắn giữa các ngữ cảnh trình duyệt khác nhau (tab, cửa sổ, iframe) bằng cách sử dụng API `BroadcastChannel`. Nó cung cấp một giao diện thuận tiện để gửi và nhận dữ liệu với việc quản lý vòng đời kênh tự động và xử lý lỗi.
|
|
8
|
+
|
|
9
|
+
Bao gồm tính năng đặt tên tiền tố tự động để ngăn chặn xung đột và tích hợp với `ErrorCenter` để theo dõi các lỗi khởi tạo.
|
|
8
10
|
|
|
9
11
|
## Các tính năng chính
|
|
10
12
|
|
|
11
|
-
- **Giao tiếp đa ngữ cảnh** —
|
|
12
|
-
- **Dựa trên Callback** —
|
|
13
|
-
- **
|
|
14
|
-
- **
|
|
15
|
-
- **
|
|
16
|
-
- **Tích hợp ErrorCenter** — báo cáo lỗi tập trung khi `BroadcastChannel` không khởi tạo được.
|
|
17
|
-
- **Truy cập trực tiếp** — cung cấp quyền truy cập vào thực thể `BroadcastChannel` gốc khi cần thiết.
|
|
13
|
+
- **Giao tiếp đa ngữ cảnh** — đồng bộ hóa dữ liệu đơn giản giữa tất cả các cửa sổ của cùng một nguồn (origin).
|
|
14
|
+
- **Dựa trên Callback** — tự động xử lý các tin nhắn đến và lỗi thông qua các hàm callback đã đăng ký.
|
|
15
|
+
- **An toàn khi thực thi** — kiểm tra môi trường DOM tích hợp giúp ngăn chặn lỗi trong quá trình Server-Side Rendering (SSR).
|
|
16
|
+
- **Cô lập kênh** — tự động thêm tiền tố duy nhất cho tên kênh thông qua `DataStorage`.
|
|
17
|
+
- **Kiểu dữ liệu mạnh mẽ** — hỗ trợ đầy đủ TypeScript generics để đảm bảo tính toàn vẹn của dữ liệu tin nhắn.
|
|
18
18
|
|
|
19
19
|
## Khởi tạo
|
|
20
20
|
|
|
21
21
|
Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `BroadcastMessage(name, callback, callbackError, errorCenter)`.
|
|
22
22
|
|
|
23
|
-
### Generic Constraints
|
|
23
|
+
### Ràng buộc Generic (Generic Constraints)
|
|
24
24
|
|
|
25
|
-
- `Message = any` — kiểu
|
|
25
|
+
- `Message = any` — kiểu của tải trọng tin nhắn.
|
|
26
26
|
|
|
27
27
|
**Tham số:**
|
|
28
|
-
- `name: string` — tên duy nhất
|
|
29
|
-
- `callback?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi nhận được
|
|
30
|
-
- `callbackError?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi xảy ra lỗi
|
|
31
|
-
- `errorCenter: ErrorCenterInstance` — thực thể
|
|
28
|
+
- `name: string` — tên kênh duy nhất.
|
|
29
|
+
- `callback?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi nhận được tin nhắn.
|
|
30
|
+
- `callbackError?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi xảy ra lỗi tin nhắn.
|
|
31
|
+
- `errorCenter: ErrorCenterInstance` — thực thể trung tâm lỗi (mặc định: `ErrorCenter.getItem()`).
|
|
32
32
|
|
|
33
33
|
```typescript
|
|
34
|
-
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
34
|
+
import { BroadcastMessage } from '@dxtmisha/functional-basic'
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
const messenger = new BroadcastMessage(
|
|
36
|
+
const messenger = new BroadcastMessage<string>(
|
|
38
37
|
'my-channel',
|
|
39
|
-
(event) => console.log('
|
|
40
|
-
(error) => console.error('Lỗi:', error)
|
|
38
|
+
(event) => console.log('Nhận được:', event.data)
|
|
41
39
|
)
|
|
42
|
-
|
|
43
|
-
// 2. Gửi một thông điệp
|
|
44
|
-
messenger.post({ type: 'UPDATE', value: 100 })
|
|
45
40
|
```
|
|
46
41
|
|
|
47
|
-
##
|
|
42
|
+
## Các phương thức
|
|
48
43
|
|
|
49
|
-
###
|
|
44
|
+
### Hành động
|
|
50
45
|
|
|
51
|
-
Gửi
|
|
46
|
+
- `post(message: Message): this` — Gửi tin nhắn đến tất cả những người đang lắng nghe trong kênh đã cho.
|
|
47
|
+
- `destroy(): this` — Đóng kênh và ngừng lắng nghe tin nhắn.
|
|
52
48
|
|
|
53
|
-
|
|
54
|
-
- `message: Message` — dữ liệu cần gửi.
|
|
55
|
-
|
|
56
|
-
**Trả về:** `this` — để hỗ trợ gọi chuỗi phương thức (method chaining).
|
|
49
|
+
### Cấu hình và Truy cập
|
|
57
50
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
- `getChannel(): BroadcastChannel | undefined` — Trả về thực thể `BroadcastChannel` cơ bản.
|
|
52
|
+
- `setCallback(callback: Function): this` — Cập nhật hàm xử lý tin nhắn đến.
|
|
53
|
+
- `setCallbackError(callbackError: Function): this` — Cập nhật hàm xử lý lỗi tin nhắn.
|
|
61
54
|
|
|
62
|
-
##
|
|
55
|
+
## Ví dụ
|
|
63
56
|
|
|
64
|
-
|
|
65
|
-
- `setCallback(callback: (event: MessageEvent<Message>) => void): this` — Cập nhật hoặc thiết lập hàm callback để nhận thông điệp.
|
|
66
|
-
- `setCallbackError(callbackError: (event: MessageEvent<Message>) => void): this` — Cập nhật hoặc thiết lập hàm callback cho các lỗi thông điệp.
|
|
57
|
+
### Đồng bộ hóa trạng thái giữa các Tab
|
|
67
58
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
### Đồng bộ hóa trạng thái giữa các tab
|
|
71
|
-
|
|
72
|
-
```javascript
|
|
59
|
+
```typescript
|
|
73
60
|
import { BroadcastMessage } from '@dxtmisha/functional'
|
|
74
61
|
|
|
75
|
-
// Trong
|
|
76
|
-
const authChannel = new BroadcastMessage('auth-status', (event) => {
|
|
62
|
+
// Trong tất cả các tab của ứng dụng
|
|
63
|
+
const authChannel = new BroadcastMessage<string>('auth-status', (event) => {
|
|
77
64
|
if (event.data === 'LOGOUT') {
|
|
78
65
|
authModule.clearSession()
|
|
79
|
-
window.location.
|
|
66
|
+
window.location.reload()
|
|
80
67
|
}
|
|
81
68
|
})
|
|
82
69
|
|
|
83
|
-
// Khi người dùng đăng xuất ở
|
|
70
|
+
// Khi người dùng đăng xuất ở một trong các tab
|
|
84
71
|
function onLogout() {
|
|
85
72
|
authChannel.post('LOGOUT')
|
|
86
73
|
}
|
|
87
74
|
```
|
|
88
75
|
|
|
89
|
-
###
|
|
76
|
+
### Cập nhật trình xử lý dữ liệu tức thì
|
|
90
77
|
|
|
91
|
-
```
|
|
92
|
-
const
|
|
93
|
-
'notifications',
|
|
94
|
-
(event) => showToast(event.data.message),
|
|
95
|
-
(error) => console.error('Không thể nhận thông báo:', error)
|
|
96
|
-
)
|
|
78
|
+
```typescript
|
|
79
|
+
const messenger = new BroadcastMessage('data-sync')
|
|
97
80
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
logToService(error)
|
|
81
|
+
messenger.setCallback((event) => {
|
|
82
|
+
console.log('Dữ liệu mới nhận được:', event.data)
|
|
101
83
|
})
|
|
102
84
|
|
|
103
|
-
|
|
104
|
-
notifications.post({ message: 'Đã nhận tin nhắn mới!' })
|
|
85
|
+
messenger.post({ id: 1, status: 'active' })
|
|
105
86
|
```
|
|
@@ -4,6 +4,8 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
4
4
|
|
|
5
5
|
# Cache Class
|
|
6
6
|
|
|
7
|
+
> **⚠️ Deprecated** — This class is obsolete and should not be used. / Этот класс устарел и не рекомендуется к использованию.
|
|
8
|
+
|
|
7
9
|
A lightweight, memory-based caching mechanism. It provides an efficient way to execute expensive data-fetching functions only when necessary, relying on "comparison arrays" to trigger cache invalidation and recalculation.
|
|
8
10
|
|
|
9
11
|
## Key Features
|
|
@@ -26,9 +28,11 @@ const cache = new Cache()
|
|
|
26
28
|
const user = cache.get('user', () => 'Admin', [1])
|
|
27
29
|
```
|
|
28
30
|
|
|
29
|
-
##
|
|
31
|
+
## Methods
|
|
32
|
+
|
|
33
|
+
### Action
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
#### `get`
|
|
32
36
|
|
|
33
37
|
Use the `get()` method to retrieve a cached value or calculate it if it doesn't exist or is stale.
|
|
34
38
|
|
|
@@ -53,7 +57,7 @@ const unchanged = cache.get('user', () => `User ${++counter}`, [1])
|
|
|
53
57
|
const changed = cache.get('user', () => `User ${++counter}`, [2])
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
#### `getAsync`
|
|
57
61
|
|
|
58
62
|
Functions identically to `get()`, but designed for async calls.
|
|
59
63
|
|
|
@@ -81,4 +85,3 @@ const u1Cached = await fetchUser(5)
|
|
|
81
85
|
// Dependency `id` changed (5 !== 6), hits the network again
|
|
82
86
|
const u2 = await fetchUser(6)
|
|
83
87
|
```
|
|
84
|
-
|
|
@@ -4,6 +4,8 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
4
4
|
|
|
5
5
|
# Класс Cache
|
|
6
6
|
|
|
7
|
+
> **⚠️ Устарел** — Этот класс устарел и не рекомендуется к использованию.
|
|
8
|
+
|
|
7
9
|
Легковесный механизм кэширования в памяти. Он предоставляет эффективный способ выполнения ресурсоемких функций получения данных только при необходимости, полагаясь на «массивы сравнения» для запуска инвалидации и пересчета кэша.
|
|
8
10
|
|
|
9
11
|
## Ключевые особенности
|
|
@@ -26,9 +28,11 @@ const cache = new Cache()
|
|
|
26
28
|
const user = cache.get('user', () => 'Admin', [1])
|
|
27
29
|
```
|
|
28
30
|
|
|
29
|
-
##
|
|
31
|
+
## Методы
|
|
32
|
+
|
|
33
|
+
### Действие
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
#### `get`
|
|
32
36
|
|
|
33
37
|
Используйте метод `get()` для получения кэшированного значения или его вычисления, если оно не существует или устарело.
|
|
34
38
|
|
|
@@ -53,7 +57,7 @@ const unchanged = cache.get('user', () => `Пользователь ${++counter}
|
|
|
53
57
|
const changed = cache.get('user', () => `Пользователь ${++counter}`, [2])
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
#### `getAsync`
|
|
57
61
|
|
|
58
62
|
Работает идентично `get()`, но предназначен для асинхронных вызовов.
|
|
59
63
|
|
|
@@ -81,4 +85,3 @@ const u1Cached = await fetchUser(5)
|
|
|
81
85
|
// Зависимость `id` изменилась (5 !== 6), снова идет в сеть
|
|
82
86
|
const u2 = await fetchUser(6)
|
|
83
87
|
```
|
|
84
|
-
|
|
@@ -4,13 +4,15 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
4
4
|
|
|
5
5
|
# Lớp Cache
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
> **⚠️ Đã lỗi thời** — Lớp này đã lỗi thời và không nên được sử dụng.
|
|
8
|
+
|
|
9
|
+
Một cơ chế lưu trữ đệm trong bộ nhớ (memory-based) nhẹ nhàng. Nó cung cấp một cách hiệu quả để thực thi các hàm truy xuất dữ liệu tốn kém chỉ khi cần thiết, dựa trên "mảng so sánh" (comparison arrays) để kích hoạt việc hủy bỏ và tính toán lại bộ nhớ đệm.
|
|
8
10
|
|
|
9
11
|
## Các tính năng chính
|
|
10
12
|
|
|
11
|
-
-
|
|
12
|
-
- **
|
|
13
|
-
- **Hỗ trợ
|
|
13
|
+
- **Đánh giá theo yêu cầu** — các hàm chỉ được thực thi khi giá trị được lưu trong bộ nhớ đệm bị thiếu hoặc bị hủy bỏ.
|
|
14
|
+
- **Hủy bỏ theo mảng so sánh** — tự động tính toán lại bộ nhớ đệm nếu mảng phụ thuộc được cung cấp thay đổi (tương tự như mảng phụ thuộc của `useMemo` hoặc `useEffect` trong React).
|
|
15
|
+
- **Hỗ trợ không đồng bộ** — hoạt động liền mạch với việc truy xuất dữ liệu dựa trên `Promise`.
|
|
14
16
|
|
|
15
17
|
## Khởi tạo
|
|
16
18
|
|
|
@@ -26,43 +28,45 @@ const cache = new Cache()
|
|
|
26
28
|
const user = cache.get('user', () => 'Admin', [1])
|
|
27
29
|
```
|
|
28
30
|
|
|
29
|
-
##
|
|
31
|
+
## Các phương thức
|
|
32
|
+
|
|
33
|
+
### Hành động
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
#### `get`
|
|
32
36
|
|
|
33
|
-
Sử dụng phương thức `get()`
|
|
37
|
+
Sử dụng phương thức `get()` để truy xuất một giá trị được lưu trong bộ nhớ đệm hoặc tính toán nó nếu nó không tồn tại hoặc đã cũ.
|
|
34
38
|
|
|
35
39
|
**Tham số:**
|
|
36
|
-
- `name: string` — mã định danh
|
|
37
|
-
- `callback: () => T` —
|
|
38
|
-
- `comparison?: any[]` —
|
|
40
|
+
- `name: string` — một mã định danh duy nhất cho mục nhập bộ nhớ đệm.
|
|
41
|
+
- `callback: () => T` — hàm tính toán giá trị.
|
|
42
|
+
- `comparison?: any[]` — mảng phụ thuộc tùy chọn. Nếu bất kỳ giá trị nào trong mảng này thay đổi so với lần gọi cuối cùng, bộ nhớ đệm sẽ bị hủy và `callback` sẽ chạy lại.
|
|
39
43
|
|
|
40
|
-
**Trả về:** `T` —
|
|
44
|
+
**Trả về:** `T` — giá trị đã lưu đệm hoặc giá trị mới được tính toán.
|
|
41
45
|
|
|
42
46
|
```javascript
|
|
43
47
|
let counter = 0
|
|
44
48
|
|
|
45
|
-
//
|
|
49
|
+
// Sẽ đánh giá và lưu trữ "User 1"
|
|
46
50
|
const user1 = cache.get('user', () => `User ${++counter}`, [1])
|
|
47
51
|
|
|
48
|
-
// KHÔNG
|
|
52
|
+
// KHÔNG đánh giá lại, trả về "User 1" đã lưu đệm
|
|
49
53
|
const unchanged = cache.get('user', () => `User ${++counter}`, [1])
|
|
50
54
|
|
|
51
|
-
// Mảng
|
|
52
|
-
//
|
|
55
|
+
// Mảng phụ thuộc thay đổi từ [1] thành [2]
|
|
56
|
+
// Sẽ đánh giá lại và lưu trữ "User 2"
|
|
53
57
|
const changed = cache.get('user', () => `User ${++counter}`, [2])
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
#### `getAsync`
|
|
57
61
|
|
|
58
|
-
|
|
62
|
+
Hoạt động tương tự như `get()`, nhưng được thiết kế cho các cuộc gọi không đồng bộ.
|
|
59
63
|
|
|
60
64
|
**Tham số:**
|
|
61
|
-
- `name: string` — mã định danh bộ
|
|
62
|
-
- `callback: () => Promise<T>` — hàm
|
|
63
|
-
- `comparison?: any[]` —
|
|
65
|
+
- `name: string` — một mã định danh duy nhất cho mục nhập bộ nhớ đệm.
|
|
66
|
+
- `callback: () => Promise<T>` — hàm không đồng bộ tính toán giá trị.
|
|
67
|
+
- `comparison?: any[]` — mảng phụ thuộc tùy chọn.
|
|
64
68
|
|
|
65
|
-
**Trả về:** `Promise<T>` —
|
|
69
|
+
**Trả về:** `Promise<T>` — giá trị không đồng bộ đã lưu đệm hoặc giá trị mới được tính toán.
|
|
66
70
|
|
|
67
71
|
```javascript
|
|
68
72
|
async function fetchUser(id) {
|
|
@@ -72,13 +76,12 @@ async function fetchUser(id) {
|
|
|
72
76
|
}, [id])
|
|
73
77
|
}
|
|
74
78
|
|
|
75
|
-
//
|
|
79
|
+
// Cuộc gọi đầu tiên truy cập mạng
|
|
76
80
|
const u1 = await fetchUser(5)
|
|
77
81
|
|
|
78
|
-
//
|
|
82
|
+
// Cuộc gọi thứ hai trả về dữ liệu đã lưu đệm ngay lập tức (không truy cập mạng)
|
|
79
83
|
const u1Cached = await fetchUser(5)
|
|
80
84
|
|
|
81
|
-
//
|
|
85
|
+
// Phụ thuộc `id` thay đổi (5 !== 6), truy cập mạng một lần nữa
|
|
82
86
|
const u2 = await fetchUser(6)
|
|
83
87
|
```
|
|
84
|
-
|