refactor: change listeners from object to Map

This commit is contained in:
Yue JIN
2025-05-21 12:18:43 +08:00
committed by Yue JIN
parent 74960f0583
commit 631a9788d3
2 changed files with 23 additions and 35 deletions

View File

@ -28,7 +28,6 @@ import { register, TAG_NAME } from "./wc";
import type { PropType, InjectionKey } from "vue"; import type { PropType, InjectionKey } from "vue";
import type { import type {
EChartsType, EChartsType,
EventTarget,
Option, Option,
Theme, Theme,
ThemeInjection, ThemeInjection,
@ -93,7 +92,8 @@ export default defineComponent({
const nonEventAttrs = computed(() => omitOn(attrs)); const nonEventAttrs = computed(() => omitOn(attrs));
const nativeListeners: Record<string, unknown> = {}; const nativeListeners: Record<string, unknown> = {};
const listeners: Record<string, any> = {}; const listeners: Map<{ event: string; once?: boolean; zr?: boolean }, any> =
new Map();
// We are converting all `on<Event>` props and collect them into `listeners` so that // We are converting all `on<Event>` props and collect them into `listeners` so that
// we can bind them to the chart instance later. // we can bind them to the chart instance later.
@ -102,28 +102,32 @@ export default defineComponent({
Object.keys(attrs) Object.keys(attrs)
.filter(key => isOn(key)) .filter(key => isOn(key))
.forEach(key => { .forEach(key => {
// onClick -> c + lick
// onZr:click -> z + r:click
let event = key.charAt(2).toLowerCase() + key.slice(3);
// Collect native DOM events // Collect native DOM events
if (event.indexOf("native:") === 0) { if (key.indexOf("Native:") === 2) {
// native:click -> onClick // onNative:click -> onClick
const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice( const nativeKey = `on${key.charAt(9).toUpperCase()}${key.slice(10)}`;
8
)}`;
nativeListeners[nativeKey] = attrs[key]; nativeListeners[nativeKey] = attrs[key];
return; return;
} }
// clickOnce -> ~click // onClick -> c + lick
// zr:clickOnce -> ~zr:click // onZr:click -> z + r:click
if (event.substring(event.length - 4) === "Once") { let event = key.charAt(2).toLowerCase() + key.slice(3);
event = `~${event.substring(0, event.length - 4)}`;
let zr: boolean | undefined;
if (event.indexOf("zr:") === 0) {
zr = true;
event = event.substring(3);
} }
listeners[event] = attrs[key]; let once: boolean | undefined;
if (event.substring(event.length - 4) === "Once") {
once = true;
event = event.substring(0, event.length - 4);
}
listeners.set({ event, zr, once }, attrs[key]);
}); });
function init(option?: Option) { function init(option?: Option) {
@ -141,28 +145,14 @@ export default defineComponent({
instance.group = props.group; instance.group = props.group;
} }
Object.keys(listeners).forEach(key => { listeners.forEach((handler, { zr, once, event }) => {
let handler = listeners[key];
if (!handler) { if (!handler) {
return; return;
} }
let event = key.toLowerCase(); const target = zr ? instance.getZr() : instance;
if (event.charAt(0) === "~") {
event = event.substring(1);
handler.__once__ = true;
}
let target: EventTarget = instance;
if (event.indexOf("zr:") === 0) {
target = instance.getZr();
event = event.substring(3);
}
if (handler.__once__) {
delete handler.__once__;
if (once) {
const raw = handler; const raw = handler;
handler = (...args: any[]) => { handler = (...args: any[]) => {

View File

@ -26,8 +26,6 @@ export type UpdateOptions = SetOptionOpts;
export type UpdateOptionsInjection = Injection<UpdateOptions>; export type UpdateOptionsInjection = Injection<UpdateOptions>;
export type EChartsType = ReturnType<InitType>; export type EChartsType = ReturnType<InitType>;
type ZRenderType = ReturnType<EChartsType["getZr"]>;
export type EventTarget = EChartsType | ZRenderType;
type SetOptionType = EChartsType["setOption"]; type SetOptionType = EChartsType["setOption"];
export type Option = Parameters<SetOptionType>[0]; export type Option = Parameters<SetOptionType>[0];