mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 04:39:12 +08:00
perf(utils): mitt default export is changed from Class to Function
This commit is contained in:
@@ -7,6 +7,8 @@
|
|||||||
### ⚡ Performance Improvements
|
### ⚡ Performance Improvements
|
||||||
|
|
||||||
- **Locale** 合并多语言文件,减少文件数量
|
- **Locale** 合并多语言文件,减少文件数量
|
||||||
|
- **Utils** Mitt 默认导出由 `Class` 改为 `Function`
|
||||||
|
- **Axios** `isTransformRequestResult`更名为`isTransformResponse`
|
||||||
|
|
||||||
### ✨ Features
|
### ✨ Features
|
||||||
|
|
||||||
|
@@ -111,7 +111,7 @@
|
|||||||
"lint-staged": "^11.0.0",
|
"lint-staged": "^11.0.0",
|
||||||
"postcss": "^8.3.5",
|
"postcss": "^8.3.5",
|
||||||
"prettier": "^2.3.1",
|
"prettier": "^2.3.1",
|
||||||
"pretty-quick": "^3.1.0",
|
"pretty-quick": "^3.1.1",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"rollup-plugin-visualizer": "5.5.0",
|
"rollup-plugin-visualizer": "5.5.0",
|
||||||
"stylelint": "^13.13.1",
|
"stylelint": "^13.13.1",
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
"stylelint-order": "^4.1.0",
|
"stylelint-order": "^4.1.0",
|
||||||
"ts-jest": "^27.0.3",
|
"ts-jest": "^27.0.3",
|
||||||
"ts-node": "^10.0.0",
|
"ts-node": "^10.0.0",
|
||||||
"typescript": "4.3.3",
|
"typescript": "4.3.4",
|
||||||
"vite": "2.3.7",
|
"vite": "2.3.7",
|
||||||
"vite-plugin-compression": "^0.2.5",
|
"vite-plugin-compression": "^0.2.5",
|
||||||
"vite-plugin-html": "^2.0.7",
|
"vite-plugin-html": "^2.0.7",
|
||||||
|
@@ -22,7 +22,7 @@
|
|||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { propTypes } from '/@/utils/propTypes';
|
import { propTypes } from '/@/utils/propTypes';
|
||||||
import { createSimpleRootMenuContext } from './useSimpleMenuContext';
|
import { createSimpleRootMenuContext } from './useSimpleMenuContext';
|
||||||
import Mitt from '/@/utils/mitt';
|
import mitt from '/@/utils/mitt';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Menu',
|
name: 'Menu',
|
||||||
props: {
|
props: {
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
},
|
},
|
||||||
emits: ['select', 'open-change'],
|
emits: ['select', 'open-change'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const rootMenuEmitter = new Mitt();
|
const rootMenuEmitter = mitt();
|
||||||
const instance = getCurrentInstance();
|
const instance = getCurrentInstance();
|
||||||
|
|
||||||
const currentActiveName = ref<string | number>('');
|
const currentActiveName = ref<string | number>('');
|
||||||
|
@@ -77,7 +77,7 @@
|
|||||||
import Icon from '/@/components/Icon';
|
import Icon from '/@/components/Icon';
|
||||||
import { Popover } from 'ant-design-vue';
|
import { Popover } from 'ant-design-vue';
|
||||||
import { isBoolean, isObject } from '/@/utils/is';
|
import { isBoolean, isObject } from '/@/utils/is';
|
||||||
import Mitt from '/@/utils/mitt';
|
import mitt from '/@/utils/mitt';
|
||||||
|
|
||||||
const DELAY = 200;
|
const DELAY = 200;
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
|
|
||||||
const { prefixCls } = useDesign('menu');
|
const { prefixCls } = useDesign('menu');
|
||||||
|
|
||||||
const subMenuEmitter = new Mitt();
|
const subMenuEmitter = mitt();
|
||||||
|
|
||||||
const { rootMenuEmitter } = useSimpleRootMenuContext();
|
const { rootMenuEmitter } = useSimpleRootMenuContext();
|
||||||
|
|
||||||
|
@@ -1,9 +1,9 @@
|
|||||||
import type { InjectionKey, Ref } from 'vue';
|
import type { InjectionKey, Ref } from 'vue';
|
||||||
import { createContext, useContext } from '/@/hooks/core/useContext';
|
import { createContext, useContext } from '/@/hooks/core/useContext';
|
||||||
import Mitt from '/@/utils/mitt';
|
import mitt from '/@/utils/mitt';
|
||||||
|
|
||||||
export interface SimpleRootMenuContextProps {
|
export interface SimpleRootMenuContextProps {
|
||||||
rootMenuEmitter: Mitt;
|
rootMenuEmitter: typeof mitt;
|
||||||
activeName: Ref<string | number>;
|
activeName: Ref<string | number>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -2,11 +2,11 @@
|
|||||||
* Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
|
* Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Mitt from '/@/utils/mitt';
|
import mitt from '/@/utils/mitt';
|
||||||
import type { RouteLocationNormalized } from 'vue-router';
|
import type { RouteLocationNormalized } from 'vue-router';
|
||||||
import { getRawRoute } from '/@/utils';
|
import { getRawRoute } from '/@/utils';
|
||||||
|
|
||||||
const mitt = new Mitt();
|
const emitter = mitt();
|
||||||
|
|
||||||
const key = Symbol();
|
const key = Symbol();
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@ let lastChangeTab: RouteLocationNormalized;
|
|||||||
|
|
||||||
export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
|
export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
|
||||||
const r = getRawRoute(lastChangeRoute);
|
const r = getRawRoute(lastChangeRoute);
|
||||||
mitt.emit(key, r);
|
emitter.emit(key, r);
|
||||||
lastChangeTab = r;
|
lastChangeTab = r;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,10 +22,10 @@ export function listenerRouteChange(
|
|||||||
callback: (route: RouteLocationNormalized) => void,
|
callback: (route: RouteLocationNormalized) => void,
|
||||||
immediate = true
|
immediate = true
|
||||||
) {
|
) {
|
||||||
mitt.on(key, callback);
|
emitter.on(key, callback);
|
||||||
immediate && lastChangeTab && callback(lastChangeTab);
|
immediate && lastChangeTab && callback(lastChangeTab);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function removeTabChangeListener() {
|
export function removeTabChangeListener() {
|
||||||
mitt.clear();
|
emitter.clear();
|
||||||
}
|
}
|
||||||
|
@@ -1,52 +1,74 @@
|
|||||||
/**
|
/**
|
||||||
* Mitt: Tiny functional event emitter / pubsub
|
* https://github.com/developit/mitt
|
||||||
*
|
|
||||||
* @name mitt
|
|
||||||
* @param {Array} [all] Optional array of event names to registered handler functions
|
|
||||||
* @returns {Function} The function's instance
|
|
||||||
*/
|
*/
|
||||||
export default class Mitt {
|
|
||||||
private cache: Map<string | Symbol, Array<(...data: any) => void>>;
|
export type EventType = string | symbol;
|
||||||
constructor(all = []) {
|
|
||||||
// A Map of event names to registered handler functions.
|
// An event handler can take an optional event argument
|
||||||
this.cache = new Map(all);
|
// and should not return a value
|
||||||
|
export type Handler<T = any> = (event?: T) => void;
|
||||||
|
export type WildcardHandler = (type: EventType, event?: any) => void;
|
||||||
|
|
||||||
|
// An array of all currently registered event handlers for a type
|
||||||
|
export type EventHandlerList = Array<Handler>;
|
||||||
|
export type WildCardEventHandlerList = Array<WildcardHandler>;
|
||||||
|
|
||||||
|
// A map of event types and their corresponding event handlers.
|
||||||
|
export type EventHandlerMap = Map<EventType, EventHandlerList | WildCardEventHandlerList>;
|
||||||
|
|
||||||
|
export interface Emitter {
|
||||||
|
all: EventHandlerMap;
|
||||||
|
|
||||||
|
on<T = any>(type: EventType, handler: Handler<T>): void;
|
||||||
|
on(type: '*', handler: WildcardHandler): void;
|
||||||
|
|
||||||
|
off<T = any>(type: EventType, handler: Handler<T>): void;
|
||||||
|
off(type: '*', handler: WildcardHandler): void;
|
||||||
|
|
||||||
|
emit<T = any>(type: EventType, event?: T): void;
|
||||||
|
emit(type: '*', event?: any): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
once(type: string | Symbol, handler: Fn) {
|
/**
|
||||||
const decor = (...args: any[]) => {
|
* Mitt: Tiny (~200b) functional event emitter / pubsub.
|
||||||
handler && handler.apply(this, args);
|
* @name mitt
|
||||||
this.off(type, decor);
|
* @returns {Mitt}
|
||||||
};
|
*/
|
||||||
this.on(type, decor);
|
export default function mitt(all?: EventHandlerMap): Emitter {
|
||||||
return this;
|
all = all || new Map();
|
||||||
}
|
|
||||||
|
return {
|
||||||
|
/**
|
||||||
|
* A Map of event names to registered handler functions.
|
||||||
|
*/
|
||||||
|
all,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Register an event handler for the given type.
|
* Register an event handler for the given type.
|
||||||
*
|
|
||||||
* @param {string|symbol} type Type of event to listen for, or `"*"` for all events
|
* @param {string|symbol} type Type of event to listen for, or `"*"` for all events
|
||||||
* @param {Function} handler Function to call in response to given event
|
* @param {Function} handler Function to call in response to given event
|
||||||
|
* @memberOf mitt
|
||||||
*/
|
*/
|
||||||
on(type: string | Symbol, handler: Fn) {
|
on<T = any>(type: EventType, handler: Handler<T>) {
|
||||||
const handlers = this.cache?.get(type);
|
const handlers = all?.get(type);
|
||||||
const added = handlers && handlers.push(handler);
|
const added = handlers && handlers.push(handler);
|
||||||
if (!added) {
|
if (!added) {
|
||||||
this.cache.set(type, [handler]);
|
all?.set(type, [handler]);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove an event handler for the given type.
|
* Remove an event handler for the given type.
|
||||||
*
|
|
||||||
* @param {string|symbol} type Type of event to unregister `handler` from, or `"*"`
|
* @param {string|symbol} type Type of event to unregister `handler` from, or `"*"`
|
||||||
* @param {Function} handler Handler function to remove
|
* @param {Function} handler Handler function to remove
|
||||||
|
* @memberOf mitt
|
||||||
*/
|
*/
|
||||||
off(type: string | Symbol, handler: Fn) {
|
off<T = any>(type: EventType, handler: Handler<T>) {
|
||||||
const handlers = this.cache.get(type);
|
const handlers = all?.get(type);
|
||||||
if (handlers) {
|
if (handlers) {
|
||||||
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoke all handlers for the given type.
|
* Invoke all handlers for the given type.
|
||||||
@@ -55,19 +77,16 @@ export default class Mitt {
|
|||||||
* Note: Manually firing "*" handlers is not supported.
|
* Note: Manually firing "*" handlers is not supported.
|
||||||
*
|
*
|
||||||
* @param {string|symbol} type The event type to invoke
|
* @param {string|symbol} type The event type to invoke
|
||||||
* @param {*} [evt] Any value (object is recommended and powerful), passed to each handler
|
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
|
||||||
|
* @memberOf mitt
|
||||||
*/
|
*/
|
||||||
emit(type: string | Symbol, evt?: any) {
|
emit<T = any>(type: EventType, evt: T) {
|
||||||
for (const handler of (this.cache.get(type) || []).slice()) handler(evt);
|
((all?.get(type) || []) as EventHandlerList).slice().map((handler) => {
|
||||||
for (const handler of (this.cache.get('*') || []).slice()) handler(type, evt);
|
handler(evt);
|
||||||
}
|
});
|
||||||
|
((all?.get('*') || []) as WildCardEventHandlerList).slice().map((handler) => {
|
||||||
/**
|
handler(type, evt);
|
||||||
* Remove all event handlers.
|
});
|
||||||
*
|
},
|
||||||
* Note: This will also remove event handlers passed via `mitt(all: EventHandlerMap)`.
|
};
|
||||||
*/
|
|
||||||
clear() {
|
|
||||||
this.cache.clear();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
16
yarn.lock
16
yarn.lock
@@ -9760,10 +9760,10 @@ pretty-format@^27.0.2:
|
|||||||
ansi-styles "^5.0.0"
|
ansi-styles "^5.0.0"
|
||||||
react-is "^17.0.1"
|
react-is "^17.0.1"
|
||||||
|
|
||||||
pretty-quick@^3.1.0:
|
pretty-quick@^3.1.1:
|
||||||
version "3.1.0"
|
version "3.1.1"
|
||||||
resolved "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.0.tgz#cb172e9086deb57455dea7c7e8f136cd0a4aef6c"
|
resolved "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.1.tgz#93ca4e2dd38cc4e970e3f54a0ead317a25454688"
|
||||||
integrity sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ==
|
integrity sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
chalk "^3.0.0"
|
chalk "^3.0.0"
|
||||||
execa "^4.0.0"
|
execa "^4.0.0"
|
||||||
@@ -11765,10 +11765,10 @@ typescript-vscode-sh-plugin@^0.6.14:
|
|||||||
resolved "https://registry.npmjs.org/typescript-vscode-sh-plugin/-/typescript-vscode-sh-plugin-0.6.14.tgz#a81031b502f6346a26ea49ce082438c3e353bb38"
|
resolved "https://registry.npmjs.org/typescript-vscode-sh-plugin/-/typescript-vscode-sh-plugin-0.6.14.tgz#a81031b502f6346a26ea49ce082438c3e353bb38"
|
||||||
integrity sha512-AkNlRBbI6K7gk29O92qthNSvc6jjmNQ6isVXoYxkFwPa8D04tIv2SOPd+sd+mNpso4tNdL2gy7nVtrd5yFqvlA==
|
integrity sha512-AkNlRBbI6K7gk29O92qthNSvc6jjmNQ6isVXoYxkFwPa8D04tIv2SOPd+sd+mNpso4tNdL2gy7nVtrd5yFqvlA==
|
||||||
|
|
||||||
typescript@4.3.3:
|
typescript@4.3.4:
|
||||||
version "4.3.3"
|
version "4.3.4"
|
||||||
resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.3.tgz#5401db69bd3203daf1851a1a74d199cb3112c11a"
|
resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
|
||||||
integrity sha512-rUvLW0WtF7PF2b9yenwWUi9Da9euvDRhmH7BLyBG4DCFfOJ850LGNknmRpp8Z8kXNUPObdZQEfKOiHtXuQHHKA==
|
integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
|
||||||
|
|
||||||
uglify-js@^3.1.4:
|
uglify-js@^3.1.4:
|
||||||
version "3.13.3"
|
version "3.13.3"
|
||||||
|
Reference in New Issue
Block a user