feat(core): Mixly.Component增加组件卸载接口
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user