優(yōu)秀組件設(shè)計(jì)的關(guān)鍵：自私準(zhǔn)繩"

基于Go語(yǔ)言K8s+gRPC實(shí)戰(zhàn)云原生微服務(wù)開(kāi)發(fā)

download：https://www.51xuebc.com/thread-539-1-1.html

當(dāng)把組件從設(shè)計(jì)轉(zhuǎn)化為開(kāi)發(fā)時(shí)，常常會(huì)發(fā)現(xiàn)一些屬性與內(nèi)容有關(guān)，而與組件自身無(wú)關(guān)。這種思索周到的組件設(shè)計(jì)辦法招致了復(fù)雜的屬性、更峻峭的學(xué)習(xí)曲線和最終的技術(shù)債務(wù)。但是，防止這些圈套的關(guān)鍵是自私或自我利益為中心的組件設(shè)計(jì)。

在開(kāi)發(fā)新功用時(shí)，是什么決議了現(xiàn)有組件能否可行？當(dāng)一個(gè)組件不能運(yùn)用時(shí)，這終究意味著什么？

該組件在功用上能否沒(méi)有做它所希冀的事情，比方一個(gè)標(biāo)簽系統(tǒng)沒(méi)有切換到正確的面板？或者它太板滯，不能支持設(shè)計(jì)的內(nèi)容，比方一個(gè)在內(nèi)容之后而不是之前有圖標(biāo)的按鈕？或者是它太過(guò)預(yù)設(shè)和構(gòu)造化，無(wú)法支持細(xì)微的變體，比方一個(gè)不斷有標(biāo)題局部的模態(tài)，如今需求一個(gè)沒(méi)有標(biāo)題的變體？

這就是組件的生活。很多時(shí)分，它們是為了一個(gè)狹窄的目的而構(gòu)建的，然后匆忙地為一個(gè)接一個(gè)的小變化停止擴(kuò)展，直到不再可行。在這個(gè)時(shí)分，會(huì)創(chuàng)立一個(gè)新組件，技術(shù)債務(wù)增長(zhǎng)，入職學(xué)習(xí)曲線變得更峻峭，代碼庫(kù)的可維護(hù)性變得更具應(yīng)戰(zhàn)性。

這僅僅是組件不可防止的生命周期嗎？還是這種狀況能夠防止？最重要的是，假如能夠防止，怎樣做？

自私。或者說(shuō)，自利。更好的說(shuō)法可能是兩者兼而有之。

很多時(shí)分，組件過(guò)于體恤。它們對(duì)彼此太體恤了，特別是對(duì)它們本人的內(nèi)容太體恤了。為了創(chuàng)立可以隨著產(chǎn)品擴(kuò)展的組件，關(guān)鍵是自私地關(guān)注本人的利益——冷漠、自戀、世界環(huán)繞著我旋轉(zhuǎn)的自私。

本文并不打算處理自利和自私之間幾百年的爭(zhēng)論。坦白說(shuō)，我沒(méi)有資歷參與任何哲學(xué)爭(zhēng)辯。但是，本文要做的是證明構(gòu)建自私組件對(duì)其他組件、設(shè)計(jì)師、開(kāi)發(fā)者和運(yùn)用你內(nèi)容的人來(lái)說(shuō)是最有利的。事實(shí)上，自私的組件在它們四周發(fā)明了如此多的益處，以致于你簡(jiǎn)直能夠說(shuō)它們是無(wú)私的。

留意：本文中的一切代碼示例和演示都將基于React和TypeScript。但是，這些概念和形式是與框架無(wú)關(guān)的。

思索的迭代

或許，展現(xiàn)一個(gè)體恤的組件的最好方式是經(jīng)過(guò)走過(guò)一個(gè)組件的生命周期。我們將可以看到它們是如何開(kāi)端時(shí)很小，功用很強(qiáng)，但一旦設(shè)計(jì)開(kāi)展起來(lái)就會(huì)變得很笨重。每一次迭代都會(huì)使組件進(jìn)一步墮入窘境，直到產(chǎn)品的設(shè)計(jì)和需求超越了組件自身的才能。

讓我們思索一下謙遜的Button組件。它具有詐騙性的復(fù)雜性，而且經(jīng)常被困在思索形式中，因而，是一個(gè)很好的工作實(shí)例。

迭代1

固然這些樣本設(shè)計(jì)相當(dāng)粗陋，比方?jīng)]有顯現(xiàn)各種:hover、:focus和 :disabled狀態(tài)，但它們的確展現(xiàn)了一個(gè)有兩種顏色主題的簡(jiǎn)單按鈕。

乍一看，所產(chǎn)生的Button組件有可能和設(shè)計(jì)一樣是赤裸裸的。

// 首先，從React擴(kuò)展原生HTML按鈕屬性，如onClick和disabled。 type ButtonProps = React.ComponentPropsWithoutRef<"button"> & { text: string; theme: 'primary' | 'secondary'; } <Button onClick={someFunction} text="Add to cart" theme="primary" />

有可能，以至有可能，我們都見(jiàn)過(guò)這樣的一個(gè)Button組件?；蛟S我們以至本人也做過(guò)這樣的一個(gè)。有些名字可能不一樣，但 props 或Button的API大致上是一樣的。

為了滿足設(shè)計(jì)的請(qǐng)求，Button 為 theme 和 text 定義了 props 。這第一個(gè)迭代工作，滿足了設(shè)計(jì)和產(chǎn)品的當(dāng)前需求。

但是，設(shè)計(jì)和產(chǎn)品的當(dāng)前需求很少是最終需求。當(dāng)下次設(shè)計(jì)迭代時(shí)，添加到購(gòu)物車的按鈕如今需求一個(gè)圖標(biāo)。

迭代2

在考證了產(chǎn)品的用戶界面后，決議在添加到購(gòu)物車的按鈕上增加一個(gè)圖標(biāo)，這將是有益的。不過(guò)，設(shè)計(jì)人員解釋說(shuō)，不是每個(gè)按鈕都會(huì)包括一個(gè)圖標(biāo)。

回到我們的Button組件，它的 props 能夠用一個(gè)可選的 icon 來(lái)擴(kuò)展，該 props 映射到一個(gè)圖標(biāo)的稱號(hào)，以便有條件地渲染。

type ButtonProps = { theme: 'primary' | 'secondary'; text: string; icon?: 'cart' | '...all-other-potential-icon-names'; }<Button theme="primary" onClick={someFunction} text="Add to cart" icon="cart" />

嗚呼!危機(jī)解除了。

有了新的 icon prop，Button 如今能夠支持帶或不帶圖標(biāo)的變體。當(dāng)然，這假定圖標(biāo)總是顯現(xiàn)在文本的末尾，但出人意料的是，在設(shè)計(jì)下一次迭代時(shí)，狀況并非如此。

總結(jié)

本文對(duì)組件設(shè)計(jì)中的一個(gè)重要概念——自私性停止了討論。自私性（Selfishness）在組件設(shè)計(jì)中是一種思想方式，意味著每個(gè)組件只關(guān)懷其本身的功用和款式，而不關(guān)懷其他組件。該文章以為，自私性能夠協(xié)助開(kāi)發(fā)者創(chuàng)立更高效、易于維護(hù)的組件。

文章論述了以下四個(gè)理論自私性的辦法：

單一職責(zé)準(zhǔn)繩：組件應(yīng)該有一個(gè)明白的功用，并僅關(guān)注該功用。這使組件更容易了解、測(cè)試和復(fù)用。

防止外部依賴：組件應(yīng)該減少對(duì)外部資源的依賴，這有助于進(jìn)步組件的獨(dú)立性和復(fù)用性。

封裝款式：組件的款式應(yīng)該內(nèi)部定義，防止遭到外部款式影響。這樣做能夠確保組件在不同的環(huán)境中堅(jiān)持分歧性。

明白接口：組件應(yīng)該具有明晰、明白的接口，以便其他開(kāi)發(fā)者可以容易地理解和運(yùn)用組件。

作者強(qiáng)調(diào)，自私性并不意味著開(kāi)發(fā)者應(yīng)該孤立地工作，而是鼓舞他們關(guān)注組件自身，從而進(jìn)步組件的質(zhì)量。經(jīng)過(guò)遵照上述準(zhǔn)繩，開(kāi)發(fā)者能夠創(chuàng)立愈加強(qiáng)健、可維護(hù)和可擴(kuò)展的組件，為整個(gè)項(xiàng)目帶來(lái)久遠(yuǎn)的益處。