資訊專欄INFORMATION COLUMN
摘要：為了適應(yīng)表單校驗(yàn)的靈活性，我們使用這種模式會(huì)事半功倍，提供校驗(yàn)信息的組件僅僅聲明渲染表單錯(cuò)誤提示信息需要設(shè)計(jì)的狀態(tài)變量即可，比如等等，對(duì)于錯(cuò)誤信息的文案及樣式，統(tǒng)統(tǒng)交由錯(cuò)誤提示組件的使用者完成。
06 Use
Render Props最近在React社區(qū)中引起了轟動(dòng)，但是與之類似的模式在Angular中似乎并沒(méi)有得到太多關(guān)注。我在之前寫(xiě)的文章提及過(guò)，TemplateRefs就是Angular中的Render Props，同時(shí)我會(huì)在這篇文章中列舉一個(gè)簡(jiǎn)單易用的例子。
Note: TemplateRef是一個(gè)類名而是一個(gè)html標(biāo)簽，它們本質(zhì)上是相同的。不過(guò)你可能會(huì)在項(xiàng)目中更頻繁地使用 ，但是在網(wǎng)上你可以很容易的搜索到關(guān)于TemplateRef的知識(shí)，因?yàn)?b> 會(huì)給你提供很多html5中的標(biāo)簽的信息。
我們已有的實(shí)現(xiàn)中，使用自定義內(nèi)容指令(content directives)。當(dāng)組件作者提前了解使用該toggle組件的父組件所需要的狀態(tài)時(shí)，那么它將會(huì)正常的運(yùn)作。但是如果父組件所需要的狀態(tài)并不在我們的設(shè)想之內(nèi)，我們?cè)撛趺崔k？
目標(biāo)將toggle組件的狀態(tài)直接提供給父組件，同時(shí)允許父組件提供相應(yīng)的渲染視圖(view)。
實(shí)現(xiàn)這里
從toggle組件中傳入的狀態(tài)是通過(guò)let關(guān)鍵字在父組件的
let關(guān)鍵字的使用方式類是這樣的：let-templatevar="inputvar"，templatevar指代在
這種語(yǔ)法會(huì)有效地避免命名沖突，比如在父組件作用域中已經(jīng)有一個(gè)inputvar變量了。
成果stackblitz演示地址
譯者注這種組件設(shè)計(jì)模式按我個(gè)人的理解，其實(shí)是依賴倒置原則在視圖渲染層的一種延伸，為什么這么說(shuō)呢？是因?yàn)橥ǔＧ闆r下子組件視圖的渲染邏輯取決于傳入的props狀態(tài)和自身提供的模板，這在大多數(shù)情況下不會(huì)造成任何困擾，但是當(dāng)我們無(wú)法在提前得知我們需要渲染什么的時(shí)候，這個(gè)問(wèn)題就會(huì)變得十分棘手。
一種解決方法，我們可以使用條件渲染指令，根據(jù)傳入的狀態(tài)來(lái)判定組件渲染的狀態(tài)，這種解決方法在情況比較少的情況下是可以解決問(wèn)題的，但是當(dāng)情況數(shù)量十分龐大的情況下，增加過(guò)多的條件判定會(huì)致使子組件的模板代碼量劇增，同時(shí)降低性能，因?yàn)槊看武秩径紩?huì)進(jìn)行若干次條件邏輯判斷。
除了上面的解決方法，就是使用正文中所提及的模式了，這種模式將子組件視圖的渲染邏輯倒置為子組件僅僅聲明模板中所會(huì)使用的狀態(tài)變量，對(duì)于這些變量和模板的注入工作，全權(quán)賦予父組件，因此會(huì)使子組件的復(fù)用性和可測(cè)試性大大提高。
正文中僅列舉了一個(gè)簡(jiǎn)單的例子中，我這里在簡(jiǎn)單提及一個(gè)實(shí)際工作可能會(huì)用到的例子，就是表單校驗(yàn)的錯(cuò)誤提示組件，一般前端組件設(shè)計(jì)但凡涉及表單，都會(huì)是十分復(fù)雜的，更不用說(shuō)校驗(yàn)這種靈活性很高的功能了。
為了適應(yīng)表單校驗(yàn)的靈活性，我們使用這種模式會(huì)事半功倍，提供校驗(yàn)信息的組件僅僅聲明渲染表單錯(cuò)誤提示信息需要設(shè)計(jì)的狀態(tài)變量即可，比如dirty、touched等等，對(duì)于錯(cuò)誤信息的文案及樣式，統(tǒng)統(tǒng)交由錯(cuò)誤提示組件的使用者完成。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107828.html
摘要：原文如那樣，我們將使用一個(gè)相對(duì)簡(jiǎn)單的組件來(lái)說(shuō)明這些模式。組件的職責(zé)是僅僅是管理一個(gè)簡(jiǎn)單的布爾值狀態(tài)屬性。文件夾并且特別是，將針對(duì)庫(kù)在不同的情形下的使用做出相應(yīng)的改變。 寫(xiě)在前頭 Angular到現(xiàn)在已經(jīng)到5.x的版本了，對(duì)于MVVM框架我首先接觸的是angularjs后來(lái)又轉(zhuǎn)為react，之后換了工作因項(xiàng)目技術(shù)棧的原因又轉(zhuǎn)換到之前的angularjs，在實(shí)際工作中實(shí)施了公司幾個(gè)比較重要...
摘要：目標(biāo)提供一些方法或指令給組件使用者，使其可以與所提供的元素交互并修改它們。這個(gè)指令擁有一個(gè)屬性并與組件共享，該屬性將決定屬性的值是還是。 07 使用 Content Directives 原文: Use Content Directives 因?yàn)楦附M件會(huì)提供所有相關(guān)的 UI 元素（比如這里的 button），所以 toggle 組件的開(kāi)發(fā)者可能無(wú)法滿足組件使用者的一些附加需求，比如，...
摘要：同時(shí)，依賴注入機(jī)制是依附于組件本身存在的，并不依附于模板的層級(jí)關(guān)系，因此不會(huì)面臨問(wèn)題二的困擾。對(duì)于木偶組件本身，往往作為消費(fèi)者存在，這種情況下使用機(jī)制可能會(huì)達(dá)到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...
摘要：相關(guān)話題裝飾器將會(huì)返回在組件標(biāo)簽包含的內(nèi)容中，第一個(gè)符合選擇器的子組件或者子指令的引用，比如?；蛘哐b飾器是用來(lái)獲取在組件內(nèi)部模板中使用的單個(gè)或者多個(gè)組件的。 02 Write Compound Components 原文: Write Compound Components 目標(biāo) 我們需要實(shí)現(xiàn)的需求是能夠使使用者通過(guò)組件動(dòng)態(tài)的改變包含在它內(nèi)部的內(nèi)容。 實(shí)現(xiàn) 我們可以把toggle抽象...
摘要：實(shí)現(xiàn)模板引用變量是獲取某個(gè)元素組件或者指令引用的一種方式，這個(gè)引用可以在當(dāng)前的視圖模板中的任何地方使用。它們通常是以或者的語(yǔ)法聲明的。成果在中，我通過(guò)打印模板引用變量所指向的類的名字來(lái)演示它所代表的引用。 05 Handle Template Reference Variables with Directives 原文: Handle Template Reference Variab...
閱讀 3177·2021-10-08 10:18
閱讀 870·2019-08-30 15:54
閱讀 1172·2019-08-29 18:43
閱讀 2633·2019-08-29 15:33
閱讀 1424·2019-08-29 15:29
閱讀 1711·2019-08-29 13:29
閱讀 1136·2019-08-26 13:46
閱讀 1792·2019-08-26 11:55
