Refactor global init code and add more comments

[wxiaoguang]

Follow up #33748 (refactor a lot and let's forget the old code: https://github.com/go-gitea/gitea/pull/33755/files?diff=split&w=0)

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.

[wxiaoguang]

The "autofocus-end" and "dir=auto" all work as expected:

And the performance trace:

performance trace: initHeatmap 14.500
performance trace: initGlobalSelectorObserver .ui.dropdown:not(.custom) 5.600
performance trace: initDashboardRepoList 3.300
performance trace: initRepoPullRequestReview 0.400

[silverwind]

I'm not sure I like the "global" name used here. It seems superflous. Why is it named like that?

[wxiaoguang]

I'm not sure I like the "global" name used here. It seems superflous. Why is it named like that?

I think the meaning is accurate. Because there are "global" event handlers and init function callers (they affect all elements), and it matches data-global-xxx. We can't use data-init or data-click, at least, we need some "namespace" to group the function&attribute names.

---

If you have better and accurate names, please advise.

And since these names are unique, even we keep them, we could always be able to easily change them by a search&replace in the future.

[silverwind]

Suggested change

	for (let i = 0; i < 20 && i < this.results.length; i++) {
	// eslint-disable-next-line no-console
	console.log(`performance trace: ${this.results[i].name} ${this.results[i].dur.toFixed(3)}`);
	}
	for (const [index, {name, dur}] of this.results.entries()) {
	if (index >= 20) break;
	console.info(`performance trace: ${name} ${dur.toFixed(3)}`);
	}

[wxiaoguang]

I do not think it is performant, by the for ( let ...; i < len; ...) loop, we do not need to create new "entries" object or extra if check

[silverwind]

Suggested change

	if (perfTracer) {
	for (const func of functions) perfTracer.recordCall(func.name, func);
	} else {
	for (const func of functions) func();
	}
	for (const func of functions) {
	perfTracer?.recordCall(func.name, func) ?? func();
	}

[wxiaoguang]

I do not think it is performant.

By using the if, we do not need to check perfTracer anymore in the loop