[Bug] destroy function for artalk to avoid memory leak in SPA

[Mister-Hope]

Artalk needs an destroy method to remove all event listerner and callback functions to prevent memory increasing.

Also, the destroy method should remove extra dom besides cleaning the original object.

E.g.: div.atk-layer-wrap it inserts during initialization.

[qwqcode]

Discussed in #367 (reply in thread)

You have reminded me that there may indeed be a memory leak, but I haven't actually verified it.

In my case, I use the el.remove() function to free the dom that artalk is working on, and I use const type declarations to avoid this "shadowing" effect.

Artalk/docs/.vitepress/theme/Artalk.vue

Line 25 in 34e59e6

if (artalkEl) artalkEl.remove()

Artalk/docs/.vitepress/theme/Artalk.vue

Line 43 in 34e59e6

const artalk = new (window as any).Artalk(conf);

This is really a point to ponder, and I'm not quite sure if there are potential places where it's not CGed. (Although I try to only create listeners associated with one dom of artalk rather than lots of event listeners on the window object)

Anyway, repeatedly creating new is not a good choice, especially in spa, and I also prefer to abandon the previous initialisation way (and instantiate the object only once).

Ensuring that it can be effectively CGed requires some finesse, which also creates difficulty in developing programs that don't leak memory. It is easy to make this mistake.

Concerning the scope of the impact: in a spa page, the program's data is saved continuously, but in a static page (such as a hugo blog), the original data is lost every time the page is refreshed, so it is not affected.

[qwqcode]

Thanks for the issue, it's really helpful!

[inkss]

为什么不尝试去掉 id 选择器部分？移除 #ctx-${ctx.cid} 和 id="ctx-${ctx.cid}"

Artalk/ui/packages/artalk/src/layer/layer.ts

Lines 151 to 156 in 3b99a58

	export function GetLayerWrap(ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
	let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
	if (!$wrap) {
	$wrap = Utils.createElement(
	`<div class="atk-layer-wrap" id="ctx-${ctx.cid}" style="display: none;"><div class="atk-layer-mask"></div></div>`
	)

[qwqcode]

为什么不尝试去掉 id 选择器部分？移除 #ctx-${ctx.cid} 和 id="ctx-${ctx.cid}"

Artalk/ui/packages/artalk/src/layer/layer.ts

Lines 151 to 156 in 3b99a58

	export function GetLayerWrap(ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
	let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
	if (!$wrap) {
	$wrap = Utils.createElement(
	`<div class="atk-layer-wrap" id="ctx-${ctx.cid}" style="display: none;"><div class="atk-layer-mask"></div></div>`
	)

因为当初设计是想多个 Artalk 实例互不干扰，一页有多个互相隔离的独立 Artalk 实例，例如两个评论框，他们不会因为公用相同的 Layer Wrap 元素而造成干扰。

但这个功能似乎并没有什么用，既增加了代码复杂度，难以维护，又为前端部署带来问题，以后想直接删掉这个特性，只允许一个页面创建一个 Artalk 实例，类似单例模式的实现。

[qwqcode]

v2.5.0 (2023-03-10) 新版已发布

https://github.com/ArtalkJS/Artalk/releases

新版 API 文档：https://artalk.js.org/develop/fe-api.html