「Solid.js項(xiàng)目實(shí)戰(zhàn)」禮品發(fā)放Web應(yīng)用之二「Solid.js項(xiàng)目實(shí)戰(zhàn)」禮品發(fā)放Web應(yīng)用之一

功能介紹

本文將繼續(xù)上一篇文章的內(nèi)容，Signal和Effect是整個(gè)Solid響應(yīng)系統(tǒng)的基礎(chǔ)，我們再通過一個(gè)禮品列表實(shí)例演示下使用Signal控制界面的方法。之后介紹了需要對代碼執(zhí)行組件化的一個(gè)情景，展示了代碼是如何隨著業(yè)務(wù)的需要而不斷地進(jìn)行組件化，它可能是由于某個(gè)組件的功能過于復(fù)雜了，也可能是由于組件中出現(xiàn)了冗余的代碼。最后，介紹了組件之間進(jìn)行通訊的一種機(jī)制-props，props實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù)的功能。

列表數(shù)據(jù)

Solid的Signal的初始狀態(tài)不僅僅是一個(gè)數(shù)值，它還可以是一個(gè)對象或一個(gè)數(shù)組。禮品列表數(shù)據(jù)目前使用的是HTML的值，只有第一個(gè)列表項(xiàng)的內(nèi)容將禮品的數(shù)量值綁定到了一個(gè)Signal上，它在上一篇文章《禮品發(fā)放Web應(yīng)用之二》中我們采用了Signal方式實(shí)現(xiàn)的?，F(xiàn)在我們需要實(shí)現(xiàn)的功能是將整個(gè)禮品列表中的所有數(shù)據(jù)（包括禮品的名稱和數(shù)量）全部綁定到Signal上。我們使用一個(gè)含有三個(gè)屬性的對象表示禮品的數(shù)據(jù)信息，它的三個(gè)屬性是id屬性、name屬性和count屬性。將4個(gè)列表項(xiàng)保存到一個(gè)數(shù)組giftData中，如下圖1所示。

圖1

圖1中id屬性唯一地標(biāo)識(shí)了一個(gè)禮品對象，但它不會(huì)顯示在禮品列表界面上。禮品對象數(shù)組建立之后，創(chuàng)建禮品列表數(shù)組所對應(yīng)的Signal，并將giftData數(shù)組作為Signal的初始值，如下圖2所示。

圖2

圖2中第27行代碼創(chuàng)建了一個(gè)Signal對象，之后通過使用gifts獲取禮品數(shù)組，通過setGifts修改禮品數(shù)組。

與普通的Signal用法相同，但是這個(gè)Signal的返回值類型為數(shù)組類型，在使用時(shí)需要像訪問數(shù)組的方式使用它，比如獲取第一個(gè)禮品的方式為gifts()[0]，計(jì)算禮品個(gè)數(shù)的方式為gifts().length。我們使用這個(gè)Signal來實(shí)現(xiàn)Gift組件，如下圖2所示

圖3

圖3中第34行代碼的第一個(gè)表達(dá)式gifts()[0].name的含義是：調(diào)用禮品列表Signal的getter方法gifts()獲取到當(dāng)前Signal的禮品數(shù)組，通過下標(biāo)0訪問數(shù)組中的第一個(gè)禮品對象，最后獲取到禮品對象的name屬性，這樣禮品的名稱就顯示到span元素中了。第34行代碼的第二個(gè)表達(dá)式gifts()[0].count與第一個(gè)表達(dá)式只有在最后獲取對象屬性時(shí)有所不同，其它的操作是完全相同的，它表示的是獲取這個(gè)禮品對象的數(shù)量值。同樣的道理，第37、40和43行代碼分別獲取數(shù)組中不同位置的禮品對象，并設(shè)置對應(yīng)的禮品名稱和數(shù)量。

當(dāng)看到圖3中的代碼時(shí)，這4個(gè)禮品項(xiàng)目界面的布局是完全相同的，我們可以將它抽象為一個(gè)更小的組件，我們將其命名為GiftItem組件，將其定義為如下的代碼：

圖4

圖4中的代碼使用了gifts中的第一個(gè)禮品對象，但是其它的3個(gè)禮物對象也應(yīng)該使用對應(yīng)的索引值獲取各自的禮品對象，而不是一直使用同樣的數(shù)據(jù)，這樣就需要提供一種機(jī)制將圖4中第33行代碼中的表達(dá)式改為動(dòng)態(tài)的，即允許從組件的外部傳遞參數(shù)進(jìn)來，GiftItem組件依據(jù)不同的參數(shù)展現(xiàn)不同的內(nèi)容。這就是Solid提供的組件間數(shù)據(jù)交互的props機(jī)制。

Props

Props是Solid提供給組件與它的子組件進(jìn)行交互的一種機(jī)制。在子組件中定義一個(gè)props參數(shù)，并在使用這個(gè)屬性的地方通過props訪問屬性名字，父組件就像使用普通的HTML屬性一樣設(shè)置它的數(shù)值即可，如下圖5所示

圖5

圖5中第30行代碼將props作為組件GiftItem的一個(gè)參數(shù)，第33行代碼使用props.gift獲取父組件傳遞給這個(gè)組件的gift屬性，這個(gè)gift屬性是禮品對象，所以可以通過.name和.count分別獲取它的名稱和數(shù)量。與圖4中的組件相比，這個(gè)組件實(shí)現(xiàn)了參數(shù)傳遞功能，實(shí)現(xiàn)此功能之后，我們就可以將每一個(gè)組件所對應(yīng)的禮品對象通過gift屬性傳遞給GiftItem組件，組件便會(huì)自己執(zhí)行渲染操作。

圖6

使用GiftItem組件之后禮品列表組件的內(nèi)容簡化為圖6中的模樣了，相比之前的代碼，清晰了許多。什么？丟失了一個(gè)功能！是的，之前的禮品列表中第二項(xiàng)選中效果被弄沒了，沒關(guān)系，我們將列表選中效果再通過props實(shí)現(xiàn)一遍。

組件中的props參數(shù)對使用的屬性數(shù)量是沒有限制的，它可以指定多個(gè)屬性名稱。比如我們將selected作為一個(gè)props的屬性傳遞至GiftItem組件，如下圖7所示。

圖7

圖7中在GiftItem組件中添加對selected類的使用，第32行代碼將其作為p元素classList屬性的selected的屬性值，如果props中的selected為真值，那么，selected類就會(huì)應(yīng)用到這個(gè)p元素上，反之，則不會(huì)添加selected類。修改完成子組件GiftItem之后，我們再回到父組件Gift中將屬性selected值設(shè)置為真值，如下圖8第42行代碼所示，當(dāng)selected為真值時(shí)，第2個(gè)列表項(xiàng)GiftItem中的selected類就會(huì)生效，即顯示出選中效果。

圖8

總結(jié)

Solid提供的Signal狀態(tài)支持多種的數(shù)據(jù)類型，用戶只需要在獲取和設(shè)置對應(yīng)的類型時(shí)正確地按照對象類型操作就可以，如果是數(shù)組，那么就按照數(shù)組方式訪問它，如果是對象就按照對象的方式使用它。但是需要時(shí)刻謹(jǐn)記createSignal的返回值數(shù)組元素為兩個(gè)函數(shù)，而不是狀態(tài)數(shù)值。

Solid為父子組件之間提供了數(shù)據(jù)交互方式-props，通過props我們就可以實(shí)現(xiàn)將父組件中的數(shù)據(jù)傳遞給子組件，子組件便稱為了一個(gè)動(dòng)態(tài)的組件，它所顯示內(nèi)容可以依照父組件提供的值而顯示。

謝謝閱讀，我們下一篇文章見。

「Solid.js項(xiàng)目實(shí)戰(zhàn)」禮品發(fā)放Web應(yīng)用之二「Solid.js項(xiàng)目實(shí)戰(zhàn)」禮品發(fā)放Web應(yīng)用之一