feat(core): Mixly.Component增加组件卸载接口

This commit is contained in:
王立帮
2026-01-23 09:57:39 +08:00
parent 6c34d392ae
commit 7fdd11b598
2 changed files with 22 additions and 16 deletions

View File

@@ -20,10 +20,18 @@ class Component {
constructor() {} constructor() {}
mountOn($container) { mountOn($container) {
$container.append(this.getContent()); if (this.#mounted_) {
this.unmount();
}
$container.append(this.#$content_);
this.onMounted(); this.onMounted();
} }
unmount() {
this.#$content_ && this.#$content_.detach();
this.onUnmounted();
}
onMounted() { onMounted() {
this.#mounted_ = true; this.#mounted_ = true;
} }
@@ -64,9 +72,12 @@ class Component {
dispose() { dispose() {
this.#$content_.remove(); this.#$content_.remove();
this.resetEvent(); this.#$content_ = null;
this.#disposed_ = true;
this.runEvent('destroyed'); this.runEvent('destroyed');
this.resetEvent();
this.#events_ = null;
this.#disposed_ = true;
this.#mounted_ = false;
} }
bind(type, func) { bind(type, func) {

View File

@@ -16,6 +16,7 @@ class PagesManager extends Component {
#welcomePage_ = null; #welcomePage_ = null;
#$editorContainer_ = null; #$editorContainer_ = null;
#$tabsContainer_ = null; #$tabsContainer_ = null;
#$parentContainer_ = null;
#pagesRegistry_ = new Registry(); #pagesRegistry_ = new Registry();
#page_ = 'welcome'; #page_ = 'welcome';
#activeId_ = null; #activeId_ = null;
@@ -33,7 +34,7 @@ class PagesManager extends Component {
**/ **/
constructor(config) { constructor(config) {
super(); super();
const $parentContainer = $(config.parentElem); this.#$parentContainer_ = $(config.parentElem);
const $content = $(config.managerContentElem); const $content = $(config.managerContentElem);
this.#typesRegistry_ = config.typesRegistry; this.#typesRegistry_ = config.typesRegistry;
this.#$tabsContainer_ = $(config.tabElem); this.#$tabsContainer_ = $(config.tabElem);
@@ -44,7 +45,7 @@ class PagesManager extends Component {
}); });
$content.append(this.#$editorContainer_); $content.append(this.#$editorContainer_);
this.setContent($content); this.setContent($content);
this.mountOn($parentContainer); this.mountOn(this.#$parentContainer_);
let PageType = this.#typesRegistry_.getItem('#welcome'); let PageType = this.#typesRegistry_.getItem('#welcome');
if (PageType) { if (PageType) {
this.#welcomePage_ = new PageType(); this.#welcomePage_ = new PageType();
@@ -67,8 +68,7 @@ class PagesManager extends Component {
if (prevEditor) { if (prevEditor) {
const $prevTab = prevEditor.getTab(); const $prevTab = prevEditor.getTab();
$prevTab.find('.chrome-tab-favicon').removeClass('active'); $prevTab.find('.chrome-tab-favicon').removeClass('active');
prevEditor.getContent().detach(); prevEditor.unmount();
prevEditor.onUnmounted();
} }
this.#$editorContainer_.empty(); this.#$editorContainer_.empty();
this.#$editorContainer_.append(page.getContent()); this.#$editorContainer_.append(page.getContent());
@@ -115,19 +115,14 @@ class PagesManager extends Component {
} }
#showWelcomePage_() { #showWelcomePage_() {
const $parent = this.getContent().parent(); this.unmount();
this.getContent().detach(); this.#welcomePage_.mountOn(this.#$parentContainer_);
$parent.append(this.#welcomePage_.getContent());
this.#welcomePage_.onMounted();
this.#page_ = 'welcome'; this.#page_ = 'welcome';
} }
#hideWelcomePage_() { #hideWelcomePage_() {
const $page = this.#welcomePage_.getContent(); this.#welcomePage_.unmount();
const $parent = $page.parent(); this.mountOn(this.#$parentContainer_);
$page.detach();
this.#welcomePage_.onUnmounted();
$parent.append(this.getContent());
this.#page_ = 'editor'; this.#page_ = 'editor';
} }