使用 PureScript 和 Preact 实现购物车功能
随着前端技术的发展，纯函数编程语言 PureScript 和 React 的轻量级库 Preact 越来越受到开发者的青睐。本文将结合 PureScript 和 Preact，实现一个简单的购物车功能，包括商品加减和总价计算。
购物车是电子商务网站中不可或缺的功能之一，它允许用户在购买商品时进行加减操作，并实时显示总价。使用 PureScript 和 Preact 实现购物车，不仅可以提高代码的可读性和可维护性，还能享受到函数式编程带来的好处。
环境准备
在开始编写代码之前，我们需要准备以下环境：
1. Node.js 环境
2. PureScript 环境
3. Preact 环境
以下是安装 PureScript 和 Preact 的命令：
bash
npm install -g psc
npm install -g psc-package
npm install psc-package --save-dev
npm install preact --save
项目结构
创建一个名为 `shopping-cart` 的新目录，并按照以下结构组织项目：
shopping-cart/
├── src/
│ ├── components/
│ │ ├── CartItem.purs
│ │ └── ShoppingCart.purs
│ ├── index.purs
│ └── main.purs
├── package.json
└── README.md
商品数据模型
我们需要定义一个商品数据模型。在 `src/components/CartItem.purs` 文件中，我们创建一个 `CartItem` 数据类型：
purs
module Shopping.CartItem where
import Prelude
data CartItem = CartItem
{ id :: Int
, name :: String
, price :: Number
, quantity :: Int
}
购物车组件
接下来，我们创建购物车组件 `ShoppingCart.purs`。这个组件将负责渲染商品列表，并处理加减操作和总价计算。
purs
module Shopping.ShoppingCart where
import Prelude
import React
import React.Preact as Preact
import React.Preact-dom as PreactDOM
import React.Preact.Hooks as Hooks
import Shopping.CartItem (CartItem, CartItem)
type Props =
{ items :: Array CartItem
, onAdd :: Int -> Unit
, onRemove :: Int -> Unit
}
cartItem :: Props -> CartItem -> Preact.Element
cartItem { onAdd, onRemove } item =
Preact.div_
[ Preact.div_ [ Preact.text_ $ "Name: " item.name ]
, Preact.div_ [ Preact.text_ $ "Price: $" show item.price ]
, Preact.div_ [ Preact.text_ $ "Quantity: " show item.quantity ]
, Preact.button_
{ onClick: _ -> onAdd item.id }
[ Preact.text_ "+" ]
, Preact.button_
{ onClick: _ -> onRemove item.id }
[ Preact.text_ "-" ]
]
shoppingCart :: Props -> Preact.Element
shoppingCart { items, onAdd, onRemove } =
Preact.div_
[ Preact.h1_ [ Preact.text_ "Shopping Cart" ]
, Preact.div_
[ Preact.map_ (item -> cartItem { onAdd, onRemove } item) items
]
, Preact.div_
[ Preact.text_ $ "Total: $" show (calculateTotal items)
]
]
where
calculateTotal :: Array CartItem -> Number
calculateTotal items = items
foldMap (item -> item.price toNumber item.quantity)
fromMaybe 0.0
主组件
在 `src/index.purs` 文件中，我们创建主组件 `App`，它将包含购物车组件和初始商品数据。
purs
module Shopping.App where
import Prelude
import React
import React.Preact as Preact
import React.Preact-dom as PreactDOM
import Shopping.ShoppingCart (shoppingCart)
import Shopping.CartItem (CartItem)
type Props = ()
data State =
{ items :: Array CartItem
}
initialState :: State
initialState =
{ items:
[ CartItem { id: 1, name: "Apple", price: 0.5, quantity: 0 }
, CartItem { id: 2, name: "Banana", price: 0.3, quantity: 0 }
]
}
App :: Props -> Preact.Element
App _ = do
let state = Hooks.useReducer (_ state -> state) initialState
PreactDOM.div_
[ Preact.h1_ [ Preact.text_ "Shopping Cart Example" ]
, shoppingCart
{ items: state
, onAdd: id -> state _ { items = updateItem state.items id (+1) }
, onRemove: id -> state _ { items = updateItem state.items id (-1) }
}
]
where
updateItem :: Array CartItem -> Int -> Int -> Array CartItem
updateItem items id delta =
let
itemIndex = items
indexWhere (item -> item.id == id)
fromMaybe (-1)
in
if itemIndex == -1
then items
else
let
updatedItem = items !! itemIndex
{ quantity = updatedItem.quantity + delta
}
in
items
replaceAt itemIndex updatedItem
filter (item -> item.quantity > 0)
运行项目
在 `package.json` 文件中，添加以下脚本：
json
"scripts": {
"start": "psc-package run src/index.purs"
}
现在，我们可以通过运行以下命令来启动项目：
bash
npm run start
打开浏览器，访问 `http://localhost:3000`，你应该能看到一个简单的购物车界面，其中包含苹果和香蕉两种商品。
总结
本文介绍了如何使用 PureScript 和 Preact 实现一个简单的购物车功能。通过定义商品数据模型、购物车组件和主组件，我们实现了商品加减和总价计算。这个例子展示了函数式编程在构建前端应用中的优势，同时也为开发者提供了一个使用 PureScript 和 Preact 的实践案例。
请注意，本文提供的代码仅为示例，实际项目中可能需要更多的功能和错误处理。希望这篇文章能帮助你更好地理解 PureScript 和 Preact 的使用。
Comments NOTHING