mirror of
https://github.com/go-gitea/gitea.git
synced 2025-10-31 21:28:11 +09:00
Refactor global init code and add more comments (#33755)
Follow up #33748 Now there are 3 "global" functions: * registerGlobalSelectorFunc: for all elements matching the selector, eg: `.ui.dropdown` * registerGlobalInitFunc: for `data-global-init="initInputAutoFocusEnd"` * registerGlobalEventFunc: for `data-global-click="onCommentReactionButtonClick"` And introduce `initGlobalInput` to replace old `initAutoFocusEnd` and `attachDirAuto`, use `data-global-init` to replace fragile `.js-autofocus-end` selector. Another benefit is that by the new approach, no matter how many times `registerGlobalInitFunc` is called, we only need to do one "querySelectorAll" in the last step, it could slightly improve the performance.
This commit is contained in:
wxiaoguang
GitHub
26
web_src/js/modules/init.ts
Normal file
26
web_src/js/modules/init.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export class InitPerformanceTracer {
|
||||
results: {name: string, dur: number}[] = [];
|
||||
recordCall(name: string, func: ()=>void) {
|
||||
const start = performance.now();
|
||||
func();
|
||||
this.results.push({name, dur: performance.now() - start});
|
||||
}
|
||||
printResults() {
|
||||
this.results = this.results.sort((a, b) => b.dur - a.dur);
|
||||
for (let i = 0; i < 20 && i < this.results.length; i++) {
|
||||
console.info(`performance trace: ${this.results[i].name} ${this.results[i].dur.toFixed(3)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function callInitFunctions(functions: (() => any)[]): InitPerformanceTracer | null {
|
||||
// Start performance trace by accessing a URL by "https://localhost/?_ui_performance_trace=1" or "https://localhost/?key=value&_ui_performance_trace=1"
|
||||
// It is a quick check, no side effect so no need to do slow URL parsing.
|
||||
const perfTracer = !window.location.search.includes('_ui_performance_trace=1') ? null : new InitPerformanceTracer();
|
||||
if (perfTracer) {
|
||||
for (const func of functions) perfTracer.recordCall(func.name, func);
|
||||
} else {
|
||||
for (const func of functions) func();
|
||||
}
|
||||
return perfTracer;
|
||||
}
|
||||
@@ -1,52 +1,73 @@
|
||||
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
|
||||
import type {Promisable} from 'type-fest';
|
||||
import type {InitPerformanceTracer} from './init.ts';
|
||||
|
||||
type DirElement = HTMLInputElement | HTMLTextAreaElement;
|
||||
let globalSelectorObserverInited = false;
|
||||
|
||||
// for performance considerations, it only uses performant syntax
|
||||
function attachDirAuto(el: Partial<DirElement>) {
|
||||
if (el.type !== 'hidden' &&
|
||||
el.type !== 'checkbox' &&
|
||||
el.type !== 'radio' &&
|
||||
el.type !== 'range' &&
|
||||
el.type !== 'color') {
|
||||
el.dir = 'auto';
|
||||
}
|
||||
}
|
||||
type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
|
||||
const selectorHandlers: SelectorHandler[] = [];
|
||||
|
||||
type GlobalInitFunc<T extends HTMLElement> = (el: T) => void | Promise<void>;
|
||||
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
|
||||
function attachGlobalInit(el: HTMLElement) {
|
||||
const initFunc = el.getAttribute('data-global-init');
|
||||
const func = globalInitFuncs[initFunc];
|
||||
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
|
||||
func(el);
|
||||
}
|
||||
|
||||
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => (void | Promise<void>);
|
||||
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => Promisable<void>;
|
||||
const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
|
||||
|
||||
type GlobalInitFunc<T extends HTMLElement> = (el: T) => Promisable<void>;
|
||||
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
|
||||
|
||||
// It handles the global events for all `<div data-global-click="onSomeElemClick"></div>` elements.
|
||||
export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
|
||||
globalEventFuncs[`${event}:${name}`] = func as any;
|
||||
globalEventFuncs[`${event}:${name}`] = func as GlobalEventFunc<HTMLElement, Event>;
|
||||
}
|
||||
|
||||
type SelectorHandler = {
|
||||
selector: string,
|
||||
handler: (el: HTMLElement) => void,
|
||||
};
|
||||
|
||||
const selectorHandlers: SelectorHandler[] = [
|
||||
{selector: 'input, textarea', handler: attachDirAuto},
|
||||
{selector: '[data-global-init]', handler: attachGlobalInit},
|
||||
];
|
||||
|
||||
export function observeAddedElement(selector: string, handler: (el: HTMLElement) => void) {
|
||||
// It handles the global init functions by a selector, for example:
|
||||
// > registerGlobalSelectorObserver('.ui.dropdown:not(.custom)', (el) => { initDropdown(el, ...) });
|
||||
export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) {
|
||||
selectorHandlers.push({selector, handler});
|
||||
const docNodes = document.querySelectorAll<HTMLElement>(selector);
|
||||
for (const el of docNodes) {
|
||||
// Then initAddedElementObserver will call this handler for all existing elements after all handlers are added.
|
||||
// This approach makes the init stage only need to do one "querySelectorAll".
|
||||
if (!globalSelectorObserverInited) return;
|
||||
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
|
||||
handler(el);
|
||||
}
|
||||
}
|
||||
|
||||
export function initAddedElementObserver(): void {
|
||||
// It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.
|
||||
export function registerGlobalInitFunc<T extends HTMLElement>(name: string, handler: GlobalInitFunc<T>) {
|
||||
globalInitFuncs[name] = handler as GlobalInitFunc<HTMLElement>;
|
||||
// The "global init" functions are managed internally and called by callGlobalInitFunc
|
||||
// They must be ready before initGlobalSelectorObserver is called.
|
||||
if (globalSelectorObserverInited) throw new Error('registerGlobalInitFunc() must be called before initGlobalSelectorObserver()');
|
||||
}
|
||||
|
||||
function callGlobalInitFunc(el: HTMLElement) {
|
||||
const initFunc = el.getAttribute('data-global-init');
|
||||
const func = globalInitFuncs[initFunc];
|
||||
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
|
||||
|
||||
type GiteaGlobalInitElement = Partial<HTMLElement> & {_giteaGlobalInited: boolean};
|
||||
if ((el as GiteaGlobalInitElement)._giteaGlobalInited) throw new Error(`Global init function "${initFunc}" already executed`);
|
||||
(el as GiteaGlobalInitElement)._giteaGlobalInited = true;
|
||||
func(el);
|
||||
}
|
||||
|
||||
function attachGlobalEvents() {
|
||||
// add global "[data-global-click]" event handler
|
||||
document.addEventListener('click', (e) => {
|
||||
const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
|
||||
if (!elem) return;
|
||||
const funcName = elem.getAttribute('data-global-click');
|
||||
const func = globalEventFuncs[`click:${funcName}`];
|
||||
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
|
||||
func(elem, e);
|
||||
});
|
||||
}
|
||||
|
||||
export function initGlobalSelectorObserver(perfTracer?: InitPerformanceTracer): void {
|
||||
if (globalSelectorObserverInited) throw new Error('initGlobalSelectorObserver() already called');
|
||||
globalSelectorObserverInited = true;
|
||||
|
||||
attachGlobalEvents();
|
||||
|
||||
selectorHandlers.push({selector: '[data-global-init]', handler: callGlobalInitFunc});
|
||||
const observer = new MutationObserver((mutationList) => {
|
||||
const len = mutationList.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
@@ -60,30 +81,27 @@ export function initAddedElementObserver(): void {
|
||||
if (addedNode.matches(selector)) {
|
||||
handler(addedNode);
|
||||
}
|
||||
const children = addedNode.querySelectorAll<HTMLElement>(selector);
|
||||
for (const el of children) {
|
||||
for (const el of addedNode.querySelectorAll<HTMLElement>(selector)) {
|
||||
handler(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
for (const {selector, handler} of selectorHandlers) {
|
||||
const docNodes = document.querySelectorAll<HTMLElement>(selector);
|
||||
for (const el of docNodes) {
|
||||
handler(el);
|
||||
if (perfTracer) {
|
||||
for (const {selector, handler} of selectorHandlers) {
|
||||
perfTracer.recordCall(`initGlobalSelectorObserver ${selector}`, () => {
|
||||
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
|
||||
handler(el);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
for (const {selector, handler} of selectorHandlers) {
|
||||
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
|
||||
handler(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
observer.observe(document, {subtree: true, childList: true});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
|
||||
if (!elem) return;
|
||||
const funcName = elem.getAttribute('data-global-click');
|
||||
const func = globalEventFuncs[`click:${funcName}`];
|
||||
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
|
||||
func(elem, e);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user