feat: optimize setExpand and extract event target

Author: ChuChencheng

src/constants/events.ts

@@ -1,4 +1,5 @@
-import { IEventNames } from "../store/tree-store"
+import { IEventNames } from "../store/tree-event-target"
+
 
 export const TREE_NODE_EVENTS = [
  'expand',

src/store/tree-event-target.ts

@@ -0,0 +1,83 @@
+import { TreeNodeKeyType } from '../types'
+import TreeNode from './tree-node'
+
+interface IListenersMap {
+ [eventName: string]: Function[]
+}
+
+type NodeGeneralListenerType = (node: TreeNode) => void
+
+export type ListenerType<T extends keyof IEventNames> = IEventNames[T]
+
+export interface IEventNames {
+ 'set-data': () => void
+ 'visible-data-change': () => void
+ 'render-data-change': () => void
+ expand: NodeGeneralListenerType
+ select: NodeGeneralListenerType
+ unselect: NodeGeneralListenerType
+ 'selected-change': (
+ node: TreeNode | null,
+ key: TreeNodeKeyType | null
+ ) => void
+ check: NodeGeneralListenerType
+ uncheck: NodeGeneralListenerType
+ 'checked-change': (nodes: TreeNode[], keys: TreeNodeKeyType[]) => void
+}
+
+export default class TreeEventTarget {
+ /** 事件 listeners */
+ private listenersMap: IListenersMap = {}
+
+ on<T extends keyof IEventNames>(
+ eventName: T,
+ listener: ListenerType<T> | Array<ListenerType<T>>
+ ): void {
+ if (!this.listenersMap[eventName]) {
+ this.listenersMap[eventName] = []
+ }
+ let listeners: Array<ListenerType<T>> = []
+ if (!Array.isArray(listener)) {
+ listeners = [listener]
+ } else {
+ listeners = listener
+ }
+ listeners.forEach(listener => {
+ if (this.listenersMap[eventName].indexOf(listener) === -1) {
+ this.listenersMap[eventName].push(listener)
+ }
+ })
+ }
+
+ off<T extends keyof IEventNames>(
+ eventName: T,
+ listener?: ListenerType<T>
+ ): void {
+ if (!this.listenersMap[eventName]) return
+ if (!listener) {
+ this.listenersMap[eventName] = []
+ } else {
+ const index = this.listenersMap[eventName].indexOf(listener)
+ if (index > -1) {
+ this.listenersMap[eventName].splice(index, 1)
+ }
+ }
+ }
+
+ emit<T extends keyof IEventNames>(
+ eventName: T,
+ ...args: Parameters<IEventNames[T]>
+ ): void {
+ if (!this.listenersMap[eventName]) return
+ const length: number = this.listenersMap[eventName].length
+ for (let i: number = 0; i < length; i++) {
+ this.listenersMap[eventName][i](...args)
+ }
+ }
+
+ disposeListeners(): void {
+ for (const eventName in this.listenersMap) {
+ this.listenersMap[eventName] = []
+ }
+ }
+}

src/store/tree-store.ts

@@ -1,6 +1,7 @@
 import TreeNode, { ITreeNodeOptions } from './tree-node'
 import { ignoreEnum } from '../constants'
 import { TreeNodeKeyType, IgnoreType } from '../types'
+import TreeEventTarget from './tree-event-target'
 
 //#region Interfaces
 
@@ -20,39 +21,11 @@ interface IMapData {
  [key: number]: TreeNode
 }
 
-interface IListenersMap {
- [eventName: string]: Function[]
-}
-
-export interface IEventNames {
- 'set-data': () => void
- 'visible-data-change': () => void
- 'render-data-change': () => void
- expand: NodeGeneralListenerType
- select: NodeGeneralListenerType
- unselect: NodeGeneralListenerType
- 'selected-change': (
- node: TreeNode | null,
- key: TreeNodeKeyType | null
- ) => void
- check: NodeGeneralListenerType
- uncheck: NodeGeneralListenerType
- 'checked-change': (nodes: TreeNode[], keys: TreeNodeKeyType[]) => void
-}
-
 //#endregion Interfaces
 
-//#region Types
-
-type NodeGeneralListenerType = (node: TreeNode) => void
-
-export type ListenerType<T extends keyof IEventNames> = IEventNames[T]
-
 export type FilterFunctionType = (keyword: string, node: TreeNode) => boolean
 
-//#endregion Types
-
-export default class TreeStore {
+export default class TreeStore extends TreeEventTarget {
  //#region Properties
 
  /** 树数据 */
@@ -73,12 +46,11 @@ export default class TreeStore {
  /** 当前单选选中节点 key */
  private currentSelectedKey: TreeNodeKeyType | null = null
 
- /** 事件 listeners */
- private listenersMap: IListenersMap = {}
-
  //#endregion Properties
 
- constructor(private readonly options: ITreeStoreOptions) {}
+ constructor(private readonly options: ITreeStoreOptions) {
+ super()
+ }
 
  /**
  * Use this function to insert nodes into flatData to avoid 'maximun call stack size exceeded' error
@@ -481,17 +453,18 @@ export default class TreeStore {
  // Set children visibility
  let queue = node.children.concat()
  while (queue.length) {
- if (queue[0].expand && queue[0].children.length) {
- queue = queue.concat(queue[0].children)
+ const nodeFromQueue = queue.pop()
+ if (!nodeFromQueue) continue
+ if (nodeFromQueue.expand && nodeFromQueue.children.length) {
+ queue = nodeFromQueue.children.concat(queue)
  }
- if (queue[0]._filterVisible === false) {
- queue[0].visible = false
+ if (nodeFromQueue._filterVisible === false) {
+ nodeFromQueue.visible = false
  } else {
- queue[0].visible =
- queue[0]._parent === null ||
- (queue[0]._parent.expand && queue[0]._parent.visible)
+ nodeFromQueue.visible =
+ nodeFromQueue._parent === null ||
+ (nodeFromQueue._parent.expand && nodeFromQueue._parent.visible)
  }
- queue.shift()
  }
 
  if (triggerEvent) {
@@ -1173,58 +1146,4 @@ export default class TreeStore {
  }
 
  //#endregion Utils
-
- //#region Mini EventTarget
- on<T extends keyof IEventNames>(
- eventName: T,
- listener: ListenerType<T> | Array<ListenerType<T>>
- ): void {
- if (!this.listenersMap[eventName]) {
- this.listenersMap[eventName] = []
- }
- let listeners: Array<ListenerType<T>> = []
- if (!Array.isArray(listener)) {
- listeners = [listener]
- } else {
- listeners = listener
- }
- listeners.forEach(listener => {
- if (this.listenersMap[eventName].indexOf(listener) === -1) {
- this.listenersMap[eventName].push(listener)
- }
- })
- }
-
- off<T extends keyof IEventNames>(
- eventName: T,
- listener?: ListenerType<T>
- ): void {
- if (!this.listenersMap[eventName]) return
- if (!listener) {
- this.listenersMap[eventName] = []
- } else {
- const index = this.listenersMap[eventName].indexOf(listener)
- if (index > -1) {
- this.listenersMap[eventName].splice(index, 1)
- }
- }
- }
-
- emit<T extends keyof IEventNames>(
- eventName: T,
- ...args: Parameters<IEventNames[T]>
- ): void {
- if (!this.listenersMap[eventName]) return
- const length: number = this.listenersMap[eventName].length
- for (let i: number = 0; i < length; i++) {
- this.listenersMap[eventName][i](...args)
- }
- }
-
- disposeListeners(): void {
- for (const eventName in this.listenersMap) {
- this.listenersMap[eventName] = []
- }
- }
- //#endregion Mini EventTarget
 }

src/types/index.ts

@@ -29,4 +29,4 @@ export type AnyPropsArrayType = Array<{ [key: string]: any }>
 export interface INonReactiveData {
  store: TreeStore
  blockNodes: TreeNode[]
-}
+}