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

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:

2: Mailbox-Rendering

3: Renderer-Rendering

Danke für deine Hilfe! Mit freundlichen Grüße!

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 🎜