我正在處理 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ù)先定義的el
和content
等在他們自己的.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>
從技術(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è)都很好。在後者中,我建議不要命名方法render
和baseRender
,而是推薦類似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)代替)。