国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何在Javascript(OOP)中直接執(zhí)行繼承鏈的基底類別?
P粉718165540
P粉718165540 2024-01-10 17:20:07
0
1
514

我正在處理 3 個(gè)可擴(kuò)展類別的繼承鏈。

渲染器(基礎(chǔ))-> Mailbox(子級(jí))-> MailboxInbox(最終子級(jí))

它們每個(gè)都有自己的render方法。孩子只是重寫渲染器(基礎(chǔ))render方法最後他們無(wú)論如何應(yīng)該使用渲染器render方法(Base< /strong>) 類。我的問(wèn)題是,當(dāng)我在Renderer 類別(createElementWithTextInside) 中執(zhí)行某些方法時(shí),它並沒(méi)有完全執(zhí)行Renderer 的render 方法(Renderer . render()),但它是從可擴(kuò)展類別鏈的末尾開(kāi)始的。例如,它開(kāi)始遍歷:

1 - MailboxInbox.render

# 2 - Mailbox.render

3 - Renderer.render

我了解 js 類別/繼承在幕後是如何運(yùn)作的。 Javascript 只是擴(kuò)展物件原型,腳本會(huì)遍歷它們等。但我的問(wèn)題是:如何避免這種行為並在需要時(shí)直接呼叫其方法中的 Renderer.render 方法?

我無(wú)法在渲染器中儲(chǔ)存__self,因?yàn)樗鼰o(wú)論如何都會(huì)指向目前實(shí)例(MailboxInbox)的this。另外,我無(wú)法使用 .bind/lambda (箭頭函數(shù)),因?yàn)槲倚枰4嫔舷挛?/p>

小提琴

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()

這裡它只是在控制臺(tái)中呈現(xiàn):

#1:收件匣渲染

# 2:郵箱渲染

3:渲染器渲染

感謝您的幫忙! 親切的問(wèn)候!

更新

# 基本上我只是想有一個(gè)基本的render 類,它可以接受參數(shù):(el,content)(內(nèi)容是可選的)和Children我想用一些預(yù)先定義的elcontent 等在他們自己的.render() 方法中覆寫它,但是如果我嘗試執(zhí)行renderer .render() 方法來(lái)自Renderer 內(nèi)部,它遍歷整個(gè)鏈,我的參數(shù)丟失了,因?yàn)樵?strong>MailboxInbox 中,渲染方法當(dāng)前沒(méi)有'不接受任何參數(shù),所以我要么應(yīng)該讓它接受參數(shù)並將它們傳遞到整個(gè)鏈,要么只是在Renderer 中定義一些專用類,如baseRender 並直接調(diào)用它< /p>

P粉718165540
P粉718165540

全部回覆(1)
P粉618358260

從技術(shù)上講,您可以將 this.render(el, text); 替換為

Renderer.prototype.render.call(this, el, text);

它繞過(guò)了繼承的屬性查找。然而,這通常不是一個(gè)好的做法,會(huì)喪失class繼承的優(yōu)勢(shì)。

幸運(yùn)的是,您已經(jīng)確定了更新中的實(shí)際問(wèn)題:

這確實(shí)錯(cuò)誤地覆蓋了具有不相容簽名的方法,違反了里氏替換原則。

您也已經(jīng)確定了潛在的解決方案:

兩個(gè)都很好。在後者中,我建議不要命名方法renderbaseRender,而是推薦類似renderContent(el, content)renderDefault (el) ,它們的簽名實(shí)際上不同- 並且都可以被覆蓋。然而,看看使用兩個(gè)參數(shù)呼叫時(shí)render 的實(shí)現(xiàn),在我看來(lái),除了呼叫el.appendChild(content) 之外,它實(shí)際上沒(méi)有做任何有用的事情,所以我'寧願(yuàn)完全放棄它並只調(diào)用appendChild (除非您需要覆蓋具體行為的能力,例如通過(guò)執(zhí)行el.prepend(content) 來(lái)代替)。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板