面试题：Svelte 响应式数据处理的代码风格优化以提升可读性

Question

在 Svelte 中，响应式数据是核心特性之一。请详细说明在处理复杂响应式数据逻辑时，怎样的代码风格能提升可读性与可维护性，例如如何组织 `$: `语句、如何处理派生状态等。并给出一个涉及多个响应式变量相互影响且具有良好代码风格的示例代码及解释。

Answer 1

1. 组织 $: 语句

• 集中声明：将相关的响应式计算集中在组件的某个区域声明，而不是分散在组件各处。这样便于查找和理解响应式逻辑。例如，将所有与用户信息相关的响应式计算放在一起。
• 清晰命名：给 $: 语句后的变量起有意义的名字，反映其计算内容。比如，如果计算的是购物车总价，变量名可以是 $cartTotal。

2. 处理派生状态

• 单一职责原则：每个派生状态应该有单一的、明确的职责。例如，不要在一个派生状态中既计算商品总价，又计算税费。应该分别创建两个派生状态，一个计算总价，另一个计算税费。
• 链式计算：当多个派生状态存在依赖关系时，采用链式计算方式。例如，$total 依赖 $subtotal 和 $tax，可以先计算 $subtotal，再基于 $subtotal 计算 $tax，最后计算 $total。

示例代码

<script>
    let basePrice = 100;
    let quantity = 2;
    let taxRate = 0.1;

    // 计算商品总价
    $: subtotal = basePrice * quantity; 

    // 计算税费
    $: tax = subtotal * taxRate; 

    // 计算最终价格
    $: finalPrice = subtotal + tax; 
</script>

<div>
    <p>Base Price: {basePrice}</p>
    <p>Quantity: {quantity}</p>
    <p>Tax Rate: {taxRate}</p>
    <p>Subtotal: {subtotal}</p>
    <p>Tax: {tax}</p>
    <p>Final Price: {finalPrice}</p>
</div>

代码解释

1. 变量声明：首先声明了 basePrice（基础价格）、quantity（数量）和 taxRate（税率）三个普通变量。
2. 响应式计算：
   • $: subtotal = basePrice * quantity;：计算商品的总价，依赖于 basePrice 和 quantity，这两个变量任何一个发生变化，subtotal 都会重新计算。
   • $: tax = subtotal * taxRate;：计算税费，依赖于 subtotal 和 taxRate，当 subtotal 或 taxRate 变化时，tax 会重新计算。
   • $: finalPrice = subtotal + tax;：计算最终价格，依赖于 subtotal 和 tax，当这两个变量变化时，finalPrice 会重新计算。
3. 展示部分：在 HTML 部分展示各个变量的值，方便直观查看响应式计算的结果。这种代码风格通过清晰的变量命名和集中的响应式计算逻辑，提升了代码的可读性与可维护性。