Wie führe ich die Basisklasse der Vererbungskette direkt in Javascript (OOP) aus?
Ich arbeite an einer Vererbungskette aus 3 erweiterbaren Klassen.
Renderer (Basis) -> Mailbox (untergeordnetes Element) -> MailboxInbox (letztes untergeordnetes Element)
Sie haben jeweils ihre eigene render方法。孩子只是重写渲染器（基础）render方法最后他们无论如何应该使用渲染器的renderMethodenklasse (Basis< /strong>). Mein Problem ist, dass, wenn ich bestimmte Methoden in der Renderer-Klasse (createElementWithTextInside) ausführe, nicht genau die Renderer-Rendermethode (Renderer .render()) ausgeführt wird, sondern dies von der erweiterbaren Klasse aus am Ende der Kette. Es beginnt zum Beispiel mit der Traversierung:
1 -
MailboxInbox.render
2 -
Mailbox.render
3 -
Renderer.renderIch verstehe, wie JS-Klassen/Vererbung hinter den Kulissen funktionieren. Javascript erweitert lediglich die Objektprototypen und das Skript iteriert darüber usw. Aber meine Frage ist: Wie kann ich dieses Verhalten vermeiden und bei Bedarf die Methode
in ihrer Methode direkt aufrufen? Ich kann
__self nicht im Renderer speichern, da es sowieso auf das der aktuellen Instanz (MailboxInbox) verweisen würde. Außerdem kann ich .bind/lambda (Pfeilfunktion) this nicht verwenden, da ich den Kontext speichern muss
Violine
class Renderer {
get noResultContent() {
const p = this.createElement('p', 'no-result-msg');
const textNode = document.createTextNode('No result');
p.appendChild(textNode);
return p;
};
createElement(tag, className) {
if (!tag) throw new Error('Tag must be passed!');
const res = document.createElement(tag);
res.classList.add(className);
return res;
}
createTextNode(text) {
const res = document.createTextNode(text);
return res;
}
/**
* automatically creates an el based on tag, text node and insert the text node into the el
*/
createElementWithTextInside(tag, className, content) {
const el = this.createElement(tag, className);
const text = this.createTextNode(content);
this.render(el, text);
return el;
}
checkIfDomEl = el => el instanceof Element;
render(el, content) {
console.log('3: RENDERER RENDER')
if (!this.checkIfDomEl(el)) throw new Error(`Please, pass the valid DOM el. Received: ${el}, ${typeof el} `);
const finalContent = content || this.noResultContent;
el.appendChild(finalContent);
}
}
--------
class Mailbox extends Renderer {
rootEl;
constructor(selector) {
super();
this.rootEl = document.querySelector(selector);
}
renderTitle(content) {
if (!content) return null;
const titleEl = super.createElementWithTextInside('h3', 'mailbox-title', content)
super.render(this.rootEl, titleEl);
}
render() {
console.log('2: MAILBOX RENDER')
super.render(this.rootEl);
}
}
--------
class MailboxInbox extends Mailbox {
title = "Inbox"
constructor(params) {
const { selector } = params;
super(selector);
}
renderTitle() {
super.renderTitle(this.title);
}
render() {
console.log('1: INBOX RENDER')
super.render();
}
}
--------
const inbox = new MailboxInbox({selector: '#container'});
inbox.renderTitle()
Hier wird es nur in der Konsole gerendert:
1: Posteingangsrendering
2: Mailbox-Rendering
3: Renderer-Rendering
Danke für deine Hilfe! Mit freundlichen Grüße!
Aktualisiert
Im Grunde möchte ich nur eine grundlegende render-Klasse haben, die folgende Parameter akzeptieren kann: (el,content) (Inhalt ist optional) und
Ich möchte einige vordefinierte < verwenden code>el und content usw. überschreiben es in ihren eigenen .render()-Methoden, aber wenn ich versuche, renderer.render() auszuführen Die -Methode kommt von innen render 类，它可以接受参数：(el,content)（内容是可选的）和Children我想用一些预定义的 el 和 content 等在他们自己的 .render() 方法中覆盖它，但是如果我尝试执行 renderer.render() 方法来自 Renderer 内部，它遍历整个链，我的参数丢失了，因为在 MailboxInbox 中，渲染方法当前没有'不接受任何参数，所以我要么应该让它接受参数并将它们传递到整个链，要么只是在 Renderer 中定义一些专用类，如 baseRenderRenderer< /p> und durchläuft die gesamte Kette und meine Parameter fehlen, weil in 🎜MailboxInbox🎜 die Rendermethode derzeit keine Parameter akzeptiert, also sollte ich sie entweder dazu bringen, Parameter zu akzeptieren und sie zu übergeben in der gesamten Kette oder definieren Sie einfach eine dedizierte Klasse wie baseRender in 🎜Renderer🎜 und rufen Sie sie direkt auf 🎜
