Svelte购物车完美版

代码介绍

商品

    let products = [
        { id: 1, name: '商品1', price: 10.99, quantity: 100 },
        { id: 2, name: '商品2', price: 15.50, quantity: 100 },
        { id: 3, name: '商品3', price: 8.75, quantity: 100 },
        { id: 4, name: '商品4', price: 20.00, quantity: 10 },
    ];

    let cart = [];
    let totalPrice = 0;

添加到购物车

 function addToCart(id) {

        const product = products.find(p => p.id === id);
        const existingItem = cart.find(item => item.id === id);
        if (existingItem) {
            existingItem.quantity++;

        } else {
            cart = [...cart, { ...product, quantity: 1 }];
        }
        products[id-1].quantity--;
        cart=cart;
        updateTotalPrice();
    }

删除购物车

 function removeFromCart(id) {
        const product = products.find(p => p.id === id);
        const existingItem = cart.find(item => item.id === id);
        if (existingItem) {
            if (existingItem.quantity > 1) {
                existingItem.quantity--;
            } else {
                cart = cart.filter(item => item.id !== id);
            }
            products[id-1].quantity++;
            cart=cart;
            updateTotalPrice();
        }

    }

更新购物车数据

function updateTotalPrice() {
        totalPrice = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
    }

    $: {
        cart;
        updateTotalPrice();
    }

JS部分完整代码

<script>
    let products = [
        { id: 1, name: '商品1', price: 10.99, quantity: 100 },
        { id: 2, name: '商品2', price: 15.50, quantity: 100 },
        { id: 3, name: '商品3', price: 8.75, quantity: 100 },
        { id: 4, name: '商品4', price: 20.00, quantity: 10 },
    ];

    let cart = [];
    let totalPrice = 0;

    function addToCart(id) {

        const product = products.find(p => p.id === id);
        const existingItem = cart.find(item => item.id === id);
        if (existingItem) {
            existingItem.quantity++;

        } else {
            cart = [...cart, { ...product, quantity: 1 }];
        }
        products[id-1].quantity--;
        cart=cart;
        updateTotalPrice();
    }

    function removeFromCart(id) {
        const product = products.find(p => p.id === id);
        const existingItem = cart.find(item => item.id === id);
        if (existingItem) {
            if (existingItem.quantity > 1) {
                existingItem.quantity--;
            } else {
                cart = cart.filter(item => item.id !== id);
            }
            products[id-1].quantity++;
            cart=cart;
            updateTotalPrice();
        }

    }

    function updateTotalPrice() {
        totalPrice = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
    }

    $: {
        cart;
        updateTotalPrice();
    }
</script>

商品显示

<table>
    <thead>
    <tr>
        <th>商品名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {#each products as product}
        <tr>
            <td>{product.name}</td>
            <td>{product.price.toFixed(2)}</td>
            <td>{product.quantity}</td>
            <td>
                <button on:click={() => addToCart(product.id)}>加入购物车</button>
            </td>
        </tr>
    {/each}
    </tbody>
</table>

购物车

<div class="cart">
    <h2>购物车</h2>
    {#if cart.length === 0}
        <p>购物车为空</p>
    {:else}
        <table>
            <thead>
            <tr>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            {#each cart as item (item.id)}
                <tr>
                    <td>{item.name}</td>
                    <td>{item.price.toFixed(2)}</td>
                    <td>
                        <button on:click={() => removeFromCart(item.id)}>-</button>
                        {item.quantity}
                        <button on:click={() => addToCart(item.id)}>+</button>
                    </td>
                    <td>{(item.price * item.quantity).toFixed(2)}</td>
                    <td>
                        <button on:click={() => removeFromCart(item.id)}>删除</button>
                    </td>
                </tr>
            {/each}
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3">总价:</td>
                <td>{totalPrice.toFixed(2)}</td>
                <td></td>
            </tr>
            </tfoot>
        </table>
    {/if}
</div>

代码解释:

1. <script> 部分:
   • let cart = [];: 定义一个空数组,用于存储购物车中的商品。
   • let items = [...];: 定义一个包含3个商品的数组,每个商品有id、name和price属性。
   • function addToCart(item): 向购物车中添加商品的函数。
   • function removeFromCart(item): 从购物车中移除商品的函数。
   • $: total = cart.reduce(...);: 计算购物车中所有商品的总价的计算式。使用$:语法,表示该变量是响应式的,当cart发生变化时,total也会自动更新。
2. <main> 部分:
   • <h1>购物车</h1>: 显示购物车的标题。
   • <h2>商品</h2>: 显示商品列表的标题。
   • {#each items as item}: 遍历商品数组,对每个商品显示名称、价格和"加入购物车"按钮。
   • <h2>购物车</h2>: 显示购物车中商品的标题。
   • {#each cart as item}: 遍历购物车数组,对每个商品显示名称、价格和"移除"按钮。
   • <p>总计: ${total}</p>: 显示购物车中所有商品的总价。

总的来说,这段代码实现了一个简单的购物车功能,包括商品列表、添加商品到购物车、从购物车中移除商品,以及计算购物车总价等。这是一个很好的Svelte入门示例,展示了Svelte的基本特性,如响应式数据绑定、列表渲染等。

特点

在这个Svelte购物车示例中,用到了以下Svelte的一些特点:

1. 响应式数据绑定:
   • 在 <script> 部分,我们定义了 cart 和 items 两个响应式变量。当这些变量发生变化时,Svelte 会自动更新相关的DOM元素。
   • 在 $: total = cart.reduce(...) 中,我们使用了 $: 语法,表示 total 是一个响应式变量,当 cart 发生变化时,total 也会自动更新。
2. 列表渲染:
   • 我们使用 {#each items as item} 和 {#each cart as item} 来遍历 items 和 cart 数组,并渲染相应的 HTML 元素。
3. 事件处理:
   • 我们为"加入购物车"和"移除"按钮绑定了 on:click 事件,当点击这些按钮时,会触发相应的事件处理函数 addToCart 和 removeFromCart。
4. 组件化:
   • 整个购物车应用被封装在一个单一的 Svelte 组件 App.svelte 中,这体现了 Svelte 的组件化思想。
5. 简洁的语法:
   • Svelte 的模板语法比 React 和 Vue 更加简洁和优雅。例如,我们可以直接在模板中使用 JavaScript 表达式,而不需要像 React 那样使用 {} 括起来。
6. 编译时优化:
   • Svelte 在编译时将代码转换为高度优化的JavaScript,这意味着在运行时,浏览器需要做的工作更少,从而提高了应用程序的性能。这是 Svelte 相对于 React 和 Vue 的一大优势。

总的来说,这个简单的购物车示例展示了 Svelte 的一些核心特性,如响应式数据绑定、列表渲染、事件处理和组件化等。这些特性使得 Svelte 开发Web应用程序变得更加简单和高效。

关注微信公众号，AI喵开发，获取更多学习资料