使用 PureScript 和 Preact 开发购物车组件：商品加减与总价计算
随着前端技术的发展，组件化开发已经成为现代前端开发的主流趋势。PureScript 作为一种函数式编程语言，以其简洁、高效和类型安全的特点，逐渐受到开发者的青睐。结合 Preact，一个轻量级的 React 替代品，我们可以快速构建出高性能的前端应用。本文将围绕 PureScript 语言和 Preact 框架，开发一个购物车组件，实现商品加减和总价计算的功能。
购物车组件是电商平台中常见的功能，它允许用户添加商品、修改数量以及计算总价。在 PureScript 和 Preact 的帮助下，我们可以实现一个简洁且功能齐全的购物车组件。
准备工作
在开始编写代码之前，我们需要确保以下准备工作已经完成：
1. 安装 Node.js 和 npm。
2. 安装 PureScript 和 Preact 相关的依赖。
bash
npm install purescript purescript-react purescript-react-dom purescript-react-router
购物车组件设计
购物车组件的核心功能包括：
- 显示商品列表。
- 允许用户添加商品到购物车。
- 允许用户修改商品数量。
- 计算并显示购物车中的商品总价。
商品数据结构
我们需要定义一个商品的数据结构：
purescript
module Data.Product where
type Product =
{ id :: Int
, name :: String
, price :: Number
}
购物车状态
购物车组件的状态应该包括商品列表和当前选中的商品数量：
purescript
module State where
type State =
{ products :: Array Product
, cart :: Array { id :: Int, quantity :: Int }
}
组件结构
购物车组件可以分解为以下几个部分：
- 商品列表（ProductList）
- 购物车列表（CartList）
- 总价计算（TotalPrice）
商品列表组件（ProductList）
商品列表组件负责渲染商品列表，并提供添加商品到购物车的功能。
purescript
module Components.ProductList where
import React as R
import React.PureScript as RP
import Data.Product as Product
type Props =
{ onAddToCart :: Product -> Unit }
render :: Props -> R.ReactElement
render { onAddToCart } =
RP.div_
[ R.h2_ [ R.text "Products" ]
, R.div_
[ R.div_
[ R.h3_ [ R.text "Product Name" ]
, R.h3_ [ R.text "Price" ]
]
]
, R.div_
[ RP.map_
(RP.div_
[ R.h3_ [ R.text (Product.name product) ]
, R.h3_ [ R.text (show (Product.price product)) ]
, R.button_
[ R.text "Add to Cart"
, RP.onClick (R.onMouseDown_ (onAddToCart product))
]
]
)
products
]
]
购物车列表组件（CartList）
购物车列表组件负责渲染购物车中的商品和数量，并提供修改数量的功能。
purescript
module Components.CartList where
import React as R
import React.PureScript as RP
import Data.Product as Product
type Props =
{ cart :: Array { id :: Int, quantity :: Int }
, onQuantityChange :: Int -> Int -> Unit
}
render :: Props -> R.ReactElement
render { cart, onQuantityChange } =
RP.div_
[ R.h2_ [ R.text "Cart" ]
, RP.map_
(RP.div_
[ R.h3_ [ R.text (show (Product.name product)) ]
, R.h3_ [ R.text (show quantity) ]
, R.div_
[ R.button_
[ R.text "-"
, RP.onClick (R.onMouseDown_ (onQuantityChange product.id (-1)))
]
, R.button_
[ R.text "+"
, RP.onClick (R.onMouseDown_ (onQuantityChange product.id 1))
]
]
]
)
cart
]
总价计算组件（TotalPrice）
总价计算组件负责计算购物车中所有商品的总价。
purescript
module Components.TotalPrice where
import React as R
import React.PureScript as RP
import Data.Product as Product
type Props =
{ cart :: Array { id :: Int, quantity :: Int }
, products :: Array Product
}
render :: Props -> R.ReactElement
render { cart, products } =
RP.div_
[ R.h2_ [ R.text "Total Price" ]
, R.h3_ [ R.text (show (calculateTotalPrice cart products)) ]
]
where
calculateTotalPrice :: Array { id :: Int, quantity :: Int } -> Array Product -> Number
calculateTotalPrice cart products =
let
cartMap = RP.map productToPrice products
totalPrice = RP.reduce (acc price -> acc + price) 0 cartMap
in
totalPrice
productToPrice :: Product -> Number
productToPrice product =
let
quantity = RP.fromMaybe 0 (RP.map ({ id, quantity } -> if id == product.id then quantity else 0) cart)
in
Product.price product quantity
购物车组件（CartComponent）
我们将所有组件组合起来，创建一个完整的购物车组件。
purescript
module Components.CartComponent where
import React as R
import React.PureScript as RP
import Data.Product as Product
import Components.ProductList as ProductList
import Components.CartList as CartList
import Components.TotalPrice as TotalPrice
type Props =
{ products :: Array Product
, cart :: Array { id :: Int, quantity :: Int }
, onQuantityChange :: Int -> Int -> Unit
}
render :: Props -> R.ReactElement
render { products, cart, onQuantityChange } =
RP.div_
[ ProductList.render { onAddToCart: addToCart }
, CartList.render { cart, onQuantityChange }
, TotalPrice.render { cart, products }
]
where
addToCart :: Product -> Unit
addToCart product =
let
newCart = RP.map ({ id, quantity } -> if id == product.id then { id, quantity: quantity + 1 } else { id, quantity }) cart
in
onQuantityChange product.id 1
总结
通过以上步骤，我们使用 PureScript 和 Preact 开发了一个简单的购物车组件，实现了商品加减和总价计算的功能。这个组件可以作为电商应用的基础模块，进一步扩展和优化。
在开发过程中，我们遵循了函数式编程的原则，确保代码的简洁性和可维护性。利用 Preact 的轻量级特性，保证了组件的高性能。
希望这篇文章能够帮助你了解如何使用 PureScript 和 Preact 开发购物车组件。如果你有任何疑问或建议，请随时提出。
Comments NOTHING