择天记,完美世界前传下载,完美世界txt下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

對(duì)于組件的可重用性，大佬給出來6個(gè)級(jí)別的見解，一起過目一下！

我們所有人都希望編寫更少的代碼，同時(shí)也要做更多的事情。為了實(shí)現(xiàn)這一點(diǎn)，我們構(gòu)建了組件，以便可以多次重用它們。

目前創(chuàng)新互聯(lián)公司已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、本溪網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

有些組件只需要基本的可重用性，而另一些則需要更復(fù)雜的重構(gòu)技術(shù)，我們才能充分復(fù)用它。

這里有6個(gè)不同級(jí)別的可重用性概念，大家先來體會(huì)體會(huì)，后續(xù)更新會(huì)一個(gè)一個(gè)的講。

1.模板化

通過模板化，我們將一些重復(fù)性高的代碼包裝在其自己的組件中，而不是在周圍到處復(fù)制和粘貼代碼。

當(dāng)我們重用該組件(而不是直接使用代碼)時(shí)，它為我們帶來了兩個(gè)好處：
將來進(jìn)行更改就會(huì)容易得多，因?yàn)槲覀冎恍枰谝粋€(gè)地方更改

我們不必記住每個(gè)重復(fù)代碼被復(fù)制到了哪些地方

這是最基本的，也是最經(jīng)常談?wù)摰目芍赜眯孕问健?/p>

2. 可配置

對(duì)于某些組件，我們需要根據(jù)需求對(duì)它們的工作方式進(jìn)行修改，如:

Button組件默認(rèn)有一個(gè)主版本，也有一個(gè)帶有圖標(biāo)版本。但我們沒有為每個(gè)版本創(chuàng)建全新的組件，而是指定 props 做到不同類型之間切換。

添加這些props通常不會(huì)給組件增加很大的復(fù)雜度，同時(shí)，又能給我們?cè)谑褂媒M件方面帶來更多在的靈活性。

注意:這不同于使用prop來保存狀態(tài)或數(shù)據(jù)，比如loading prop 或disabled prop。

3.適應(yīng)性

可配置的最大問題是缺乏遠(yuǎn)見。我們需要預(yù)見將來的需求，并通過放置對(duì)應(yīng)的 prop 將它們構(gòu)建到組件中。

但是，如果你的組件具有足夠適應(yīng)性，則無需更改組件即應(yīng)對(duì)未來的需求。

為了讓我們的組件具有足夠的適應(yīng)性，我們可以使用插槽來實(shí)現(xiàn)。

例如，我們可以使用默認(rèn)的插槽來代替在傳入Button組件的 text ：

現(xiàn)在我們不局限于傳入的類型是 string 還是 number。

如果我們想在不修改 Button 組件的情況下添加loading ，我們可以這樣做:

4.反轉(zhuǎn)性

除了通過插槽傳遞完整的標(biāo)記塊給我們的子組件，我們還可以傳遞一組有關(guān)如何渲染的指令。

這就像我們根據(jù)食譜來做菜，而不是叫外賣。當(dāng)我們遵循食譜時(shí)，需要做更多的工作，但是我們完全可以按自己的節(jié)奏來制制作，我們可以隨時(shí)進(jìn)行調(diào)整，也可以完全放棄不按食譜的流程來。

我們使用作用域插槽來為我們的組件增加更大的靈活性。

5. 擴(kuò)展

通過適應(yīng)性和反轉(zhuǎn)性，我們擁有必要的一些技術(shù)基礎(chǔ)，這些技能可以最大限度地提高組件的可重用性。

下一步是將這些技術(shù)應(yīng)用于整個(gè)組件，以便我們更輕松地?cái)U(kuò)展其行為。

我們使用命名插槽在組件中添加一個(gè)或多個(gè)擴(kuò)展點(diǎn)。僅適應(yīng)性和反轉(zhuǎn)性本身給我們提供了擴(kuò)展行為的一種選擇，而擁有多個(gè)擴(kuò)展點(diǎn)則為我們提供了許多不同的選擇。

這里，我們有一個(gè)Modal組件，其中包含header，default和footer：

這是一個(gè)相當(dāng)簡(jiǎn)單的擴(kuò)展示例，其中我們已經(jīng)有幾個(gè)擴(kuò)展該組件的選項(xiàng)：

只需覆蓋default slot即可添加我們的內(nèi)容
可以通過插槽名來覆蓋 header 的內(nèi)容
可以通過插槽名來覆蓋 footer 的內(nèi)容，其內(nèi)容還是以不同風(fēng)格按鈕為主
header和 footer的插槽更多是用于自定義

你不必?cái)U(kuò)展此組件的行為，但也可以擴(kuò)展其一部分。無論哪種方式，我們都能獲得很大的靈活性和大量的代碼重用性。

6. 嵌套

在擴(kuò)展之上更高級(jí)重用性就是嵌套，我們可以多個(gè)基本組件為基礎(chǔ)，一層嵌套一層，一開始可能聽起來很瘋狂，但它非常有用，特別是在大中型應(yīng)用程序中。

我們從一個(gè)通過基礎(chǔ)組件開始，該組件的功能相當(dāng)普遍。下一個(gè)組件就更加具體，以幾種方式擴(kuò)展了基礎(chǔ)組件。然后不斷以前面基礎(chǔ)組件為底往上擴(kuò)展，直到我們擁有完成實(shí)際工作的最終組件。

這類似我們從非常普通的動(dòng)物(Animal )到更特定的哺乳動(dòng)物(Mammal )，然后是狗(Dog )，最后止于貴賓犬(Poodle)的方式。如果我們需要的只是貴賓犬(Poodle)組件，看上去，我們整這么基礎(chǔ)組件就是浪費(fèi)時(shí)間。但是在大型應(yīng)用程序中就不一樣了，我們需要在相同的基本概念上進(jìn)行多次更改，來滿足不同的個(gè)性化需求，這時(shí)這種以基礎(chǔ)組件嵌套的思想就很重要。

我們可以擴(kuò)展犬類(Dog)組件來獲得柯基犬(Corgi )和比格犬(Beagle)組件?；蛘邤U(kuò)展哺乳動(dòng)物(Mammal )組件以獲得貓(Cat )組件，這樣就可以添加老虎(Tiger)和獅子(Lion)組件。

總結(jié)

以上是6個(gè)可重用性級(jí)別一些概述，當(dāng)然很有可能會(huì)錯(cuò)過一些內(nèi)容，但基本是可以為我們封裝組件提供了一個(gè)大致思路，也是很不錯(cuò)的方式。

人才們的【三連】就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：Michael Thiessen 譯者：前端小智來源：news

原文：https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

江南一點(diǎn)雨本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

本文標(biāo)題：對(duì)于組件的可重用性，大佬給出來6個(gè)級(jí)別的見解，一起過目一下！
標(biāo)題路徑：http://fisionsoft.com.cn/article/cdjssjo.html

新聞中心

{{ title }}

其他資訊