「Solid.js项目实战」礼品发放Web应用之五
「Solid.js项目实战」礼品发放Web应用之四
「Solid.js项目实战」礼品发放Web应用之三
「Solid.js项目实战」礼品发放Web应用之二
「Solid.js项目实战」礼品发放Web应用之一

功能介绍

本文将处理礼品的发放逻辑，完成整个应用的所有功能。我们发放礼品是需要满足两个条件，一是需要知道发放什么样的礼品，二是要清楚将礼品发放于哪一个人。我们分别通过在对应的列表中选择一个列表项来表示是否满足发放条件。如果达不到满足发放的条件，则给出相应的提示信息。如果同时满足了礼品和人员发放条件，则给出正确的发放结果。

人员选中

人员选中Signal

人员选中与礼品选中采用相同的处理方式，它也是一个独立的Signal对象，其初始值设置为0，表示选中的人员Id值为0，即没有选中任何一个人员。如下图1所示。

图1

图1第118行代码将创建的Signal的初始值设置为0，第127行代码使用这个Signal的getter函数personSelected()与PersonItem组件中数据item.id值进行比较，如果二者相等，则表示对应PersonItem组件处于被选择状态。

人员列表项组件

人员列表项组件只显示人员的姓名，通过使用props.person.name设置元素span的显示内容，如下图113行代码所示那样。在上一节中创建了人员选择的Signal对象，如果需要改变当前选择的人员，可以使用setPersonSelected函数并传递对应的人员对象id值。我们为人员列表项添加了点击事件onItemClick，第100-105行代码为点击事件的处理函数，第111行代码为PersonItem组件添加点击事件。每当点击PersonItem组件时，在onItemClick函数中第101行代码就会将这个组件所对应的person.id值设置为当前选择的人员Id值。

图2

人员选中样式

在图2中第110行代码通过classList设置selected的属性值为props.selected，如果父组件给PersonItem所传递的属性selected为真值，那么它就含有一个.selected类的样式。属性selected的值是通过图 1中第127行代码判断当前选中的Signal的状态值是否与对应的PersonItem组件的id值相同。选择的人员列表项效果如下图3所示。

图3

礼品与人员的二选一问题

需求描述

我们的需求是同时选择人员列表项和礼品列表项时便可以发放礼品，但是，如果只选择了其中的一个列表项，那么信息提示组件就会显示出来。如果只选择了礼品列表项，信息提示组件的内容为：请选择领取礼品的人员，如图4所示；如果只选择了人员列表项，信息提示组件的内容为：请选择领取礼品，如图5所示；如果同时选择了礼品列表项和人员列表项，那么信息提示组件处于隐藏状态，如图6所示。

图4

图5

图6

信息提示组件

通过上一节对信息提示组件的功能描述，我们注意到此组件主要包含两个功能：一个功能是控制组件的显示与隐藏，另一个功能是修改组件的提示内容。

隐藏与显示

对于第一个功能，我们使用了CSS样式的visibility属性，如果将它的值设置为visible，那么信息提示组件就会显示出来；如果将它的值设置为hidden，那么信息提示组件就会隐藏起来。我们使用giftSelected()和personSelected()两个getter获取当前的选择id值，下图7中第173行代码表示没有选择礼品列表项，但是选择了人员列表项，第174行代码表示没有选择人员列表项，但是选择了礼品列表项，根据上一节的功能需求描述，这两种情况下是需要将visibility的值设置为visible，即第176行代码，如果是其它的选择列表项情况（没有选择任何一个列表项或者是已经同时选择了礼品列表项和人员列表项），那么visibility的值就设置为了hidden，即图中第177行代码。

图中第172-177行代码定义了一个衍生Signal对象，名称为infoVisibility，它被用作infoStyle对象的visibility的属性值。第189行代码将div元素的style设置为infoStyle对象，因此，当礼品选择项或人员选择项任何一个发生变化时visibility的值都会做出相应的变化。

图7

信息提示内容

信息提示组件的内容也是一个Signal对象，图7中第185行代码创建了这个Signal对象，第189行代码使用Signal的getter函数infoText显示当前的提示内容。从信息提示组件的需求描述中我们可以知道，每一次点击列表项时，提示内容可能会发生变化。图2中第103行代码表示点击人员列表时，如果没有选择礼品列表项，那么就会通过setInfoText函数将文本内容设置为：请选择领取礼品；图8中礼品列表项的点击事件处理函数中，第66-68行代码表示，如果没有选择人员列表项，那么会将信息提示组件的内容设置为：请选择领取礼品的人员。

图8

如果同时选择了礼品列表项和人员列表项，那么就可以执行礼品的发放逻辑了。

礼品发放

礼品发放涉及到礼品列表中礼品数目的变化，如果礼品数目变为0值，那么这个礼品列表项便从当前礼品列表中删除；对于人员列表项来说，每发放一次礼品，对应的人员列表项便从列表中删除。发放完成一次礼品之后，在信息提示组件上显示相应的提示信息。

礼品的处理

每发放一次礼品时，通过giftSelected函数获取当前选择的礼品对象，图9中第141行代码,调用gift对象的setGiftCount函数将当前的礼品数目减1，这样就实现了礼品数目的递减操作。第142行代码调用gift.giftCount函数获取当前的礼品数目，如果此礼品的数目变为了0值，便执行第143行代码，此行代码使用了2个Signal的getter函数(gifts和giftSelected)，一个Signal的setter函数(setGifts)。gifts()获取当前的礼品数组，并调用giftSelected()获取当前选中的礼品列表项，之后使用礼品数组的filter方法剔除选择的礼品列表项，最后通过setGifts函数将过滤后的数组设置为新的礼品数组。

图9

通过上面的操作，我们就实现了礼品数目的递减操作，并在礼品数目递减为0的时候，将其从礼品列表中删除。

人员的处理

人员列表项的处理逻辑相对于礼品列表处理来说，它只提供了一个删除列表项的功能，它无需提供数目递减的操作逻辑，第146行代码使用personSelected函数获取当前选择的人员对象，第148行代码使用与图9中第143行同样的操作，将选中的人员列表项从当前的列表中剔除。

图10

信息提示处理

当人员成功地领取了礼品后，信息提示组件显示格式为：人员领取了礼品，如下图11所示，

图11

图7中185行代码创建了信息提示组件的Signal对象，我们可以调用setInfoText函数将其内容进行修改，如下图12中第151行代码所示，但是，我们之前介绍过，如果用户同时选择了礼品列表项和人员列表项时，信息提示组件就会置为隐藏状态。

图12

我们再回过头来看一下图7中第172-177行代码，第175行代码也是信息提示组件显示的一个条件，图13第169行代码定义了这个Signal对象，其缺省值为false，表示不予显示信息提示组件。当点击“领取“按钮时，点击事件的处理函数代码就会执行图12中第155行代码，此行代码会将显示信息提示组件的Signal设置为true，因此，图13中第174行showInfo()返回了真值，导致信息提示组件显示出来了。但是，这个提示信息并不是一直处于显示状态，图 12中第157-159行代码设置了一个定时器，3秒钟后会触发一个setShowInfo函数调用，它又会将信息提示显示Signal设置为false，即隐藏信息提示组件。

图13

最后的处理工作是将当前选择的礼品列表项和人员列表项Id值全部置为0值，表示已经没有选择任何礼品或人员了。图12中第153和154行代码分别表示设置选择的礼品Id值和人员Id值。至此，我们就已经完成了礼品发放应用的所有功能。

总结

本文实现了多个组件之间的信息交互，礼品列表组件、人员列表组件、信息提示组件和按钮组件在不同的Signal状态下它们所表现出来的行为是不同的，在Solid中通过Signal的getter函数可以获取Signal的当前状态值，根据当前状态值可以决定页面展现什么内容；也可以使用setter函数设置Signal的当前状态值，便可以对页面的内容进行修改。总之，我们通过不同的Signal和JSX实现了界面显示与控制功能，展现了Solid在对页面精细化渲染的控制能力，当然，Solid不单单提供了Signal和Effect机制，它们只是Solid所提供的最基础的概念，它还提供了一些其它组件和响应式原语，期待你去发现，本应用的介绍已经完成，当Solid的技术探索还在继续。谢谢阅读，我们下一篇文章见！

「Solid.js项目实战」礼品发放Web应用之五
「Solid.js项目实战」礼品发放Web应用之四
「Solid.js项目实战」礼品发放Web应用之三
「Solid.js项目实战」礼品发放Web应用之二
「Solid.js项目实战」礼品发放Web应用之一