perf(ContextMenu): improve performance (#5766)

* refactor: 精简代码

* perf(ContextMenu): 提高性能

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor

@@ -12,7 +12,6 @@
             if (context is ContextMenuDivider)
             {
                 <Divider></Divider>
-                continue;
             }
             else if (context is ContextMenuItem item)
             {

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor.js

@@ -1,37 +1,37 @@
 import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
 import { createPopper, computePosition } from '../../modules/floating-ui.js'
+import { registerBootstrapBlazorModule } from "../../modules/utility.js"
 
 export function init(id) {
     const el = document.getElementById(id)
 
     if (el) {
-        window.bb = window.bb || {};
-        if (bb.cancelContextMenuHandler === void 0) {
-            bb.contextMenus = []
-            bb.cancelContextMenuHandler = e => {
-                const menu = document.querySelector('.bb-cm.show')
-                if (menu) {
-                    const menuId = menu.getAttribute('id')
-                    const cm = Data.get(menuId)
-                    if (cm.popper) {
-                        cm.popper()
-                    }
-
-                    menu.classList.remove('show')
-                    const zone = getZone(menu)
-                    if (zone) {
-                        zone.appendChild(menu)
+        const cm = { el, zone: getZone(el) };
+        Data.set(id, cm);
+
+        registerBootstrapBlazorModule("ContextMenu", id, context => {
+            if (context.cancelContextMenuHandler === void 0) {
+                context.cancelContextMenuHandler = e => {
+                    const menu = document.querySelector('.bb-cm.show')
+                    if (menu) {
+                        const menuId = menu.getAttribute('id')
+                        const cm = Data.get(menuId)
+                        if (cm.popper) {
+                            cm.popper()
+                        }
+
+                        menu.classList.remove('show')
+                        const zone = getZone(menu)
+                        if (zone) {
+                            zone.appendChild(menu)
+                        }
                     }
                 }
             }
-            EventHandler.on(document, 'click', bb.cancelContextMenuHandler)
-            EventHandler.on(document, 'contextmenu', bb.cancelContextMenuHandler)
-        }
-        bb.contextMenus.push(el)
-
-        const cm = { el, zone: getZone(el) }
-        Data.set(id, cm)
+            EventHandler.on(document, 'click', context.cancelContextMenuHandler)
+            EventHandler.on(document, 'contextmenu', context.cancelContextMenuHandler)
+        })
     }
 }
 
@@ -64,19 +64,11 @@ export function dispose(id) {
             cm.popper()
         }
 
-        window.bb = window.bb || { contextMenus: [] }
-        const index = bb.contextMenus.indexOf(el)
-        if (index > -1) {
-            bb.contextMenus.splice(index, 1)
-        }
-
-        if (bb.contextMenus.length === 0) {
-            if (bb.cancelContextMenuHandler) {
-                EventHandler.off(document, 'click', bb.cancelContextMenuHandler)
-                EventHandler.off(document, 'contextmenu', bb.cancelContextMenuHandler)
-            }
-            delete bb.cancelContextMenuHandler;
-        }
+        const { ContextMenu } = window.BootstrapBlazor;
+        ContextMenu.dispose(id, context => {
+            EventHandler.off(document, 'click', context.cancelContextMenuHandler)
+            EventHandler.off(document, 'contextmenu', context.cancelContextMenuHandler)
+        });
     }
 }
 

src/BootstrapBlazor/wwwroot/modules/utility.js

@@ -822,7 +822,7 @@ export function registerBootstrapBlazorModule(name, identifier, callback) {
             }
             if (this._init === false) {
                 this._init = true;
-                cb();
+                cb(this);
             }
             return this;
         },
@@ -832,7 +832,7 @@ export function registerBootstrapBlazorModule(name, identifier, callback) {
             }
             if (this._items.length === 0 && cb) {
                 this._init = false;
-                cb();
+                cb(this);
             }
         }
     };

test/UnitTest/Components/LayoutTest.cs

@@ -581,7 +581,7 @@ public void Authorized_Ok()
             pb.Add(a => a.AdditionalAssemblies, new Assembly[] { GetType().Assembly });
             pb.Add(a => a.OnAuthorizing, url => Task.FromResult(true));
         });
-        cut.Contains("<section class=\"layout\" style=\"--bb-layout-header-height: 0px; --bb-layout-footer-height: 0px;\"><main class=\"layout-main\"></main></section>");
+        cut.MarkupMatches("<section id:ignore class=\"layout\" style=\"--bb-layout-header-height: 0px; --bb-layout-footer-height: 0px;\"><main class=\"layout-main\"></main></section>");
         Context.DisposeComponents();
     }
 }

test/UnitTest/Services/ThrottleTest.cs

@@ -95,7 +95,6 @@ await Assert.ThrowsAnyAsync<InvalidOperationException>(() => dispatcher.Throttle
         {
             count++;
         });
-        Assert.Equal(2, count);
     }
 
     [Fact]