emitter-master v1.1.0
emitter-master
Support for offline publishing and subscribing events
Usage
import { Emitter } from "emitter-master"
Emitter.sender("A<->B", 123) // You can send before you receive, which is a characteristic of the library
const ret = await Emitter.receiver("A<->B" ) // This is returned immediately in any case, or null in the case of no value
// or
const clear = Emitter.receiver("A<->B",function(val){
console.log(val)
})
// You can also give the default value when there is no message
const ret2 = await Emitter.receiver("A->B", default_value) // Note that the second argument is the default if it is not a function
// clear event,Note that this is only necessary if the second argument is a function
clear()
// Note that I actually don't recommend putting the function out on its own, because it loses the type reminder, but this is just a demonstration
function handle({event_name, data}){
if(event_name === "A->B"){
...
}else if(event_name === "B->C"){
...
}else{
...
}
}
const clear = Emitter.receiver(["A->B", "B->C"], handle)
// There are two ways to clear a listener
Emitter.clear(["A->B", "B->C"], handle)
// or
clear()
Here's how I recommend writing it
// When the event name is array, the callback function parameter will be different, see the specific type prompts
const clear = Emitter.receiver( [ "A->B", "B->C" ], function ( { event_name, data } )
{
if(event_name === "A->B")
{
console.log(data)
}
else if(event_name === "B->C")
{
console.log(data)
}
} );
// You need to call the clear function at the right time,Note that this is only necessary if the second argument is a function
clear()
sender has an alias called trigger
receiver has an alias called listener
once indicates that the system listens only once
You can choose a more appropriate name based on your scene
Recommendation specifications in vue and react
The first thing to be clear is that the library is not framework-related, but many front ends now use vue and react to build websites, so here is my recommendation
Suggestion 1:Define the event_name.ts file to store the event name. This file only defines the event name and the comment of the event name. Note that each event name must have A comment, otherwise it is meaningless. The form 'A<->B' indicates that A and B send data to each other. Here is an example
// This describes what the event does, so you can see the details in the ide with a quick preview
const CompA_CompB = "CompA->CompB"
export {
CompA_CompB
}
Suggestion 2: For non-component-to-component communication that still explicitly specifies the source and destination, such as when I send to component CompA in Axios encapsulation, I can name it:Axios->CompA
Suggestion 3:Remember to clear events before the component unmount
An example of use in vue3 is given below
<script lang="ts" setup>
const clear = Emitter.receiver( "A->B", function ( data )
{
console.log( data );
} );
// This is necessary.
onBeforeUnmount( clear );
</script>
Example
import {Emitter} from "emitter-master"
Emitter.sender( "a-b" , true); // Comment this out ret will be null, and uncomment will be true
( async function ()
{
const ret = await Emitter.receiver( "a-b" );
console.log("ret")
console.log( ret ); // true
} )();
typescript
You can define the parameters to be received for specific events
declare module "emitter-master"
{
interface EmitterMasterEventMap
{
"A->B": { source: number, name: string }
"C->D": any
}
}
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
5 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago