使用 Preact 和 PureScript 开发待办事项列表应用（本地存储 + 筛选功能）
随着现代前端技术的发展，构建高效、可维护的Web应用变得越来越重要。PureScript 作为一种函数式编程语言，以其简洁、类型安全和易于理解的特点，在函数式编程社区中越来越受欢迎。结合 Preact，一个轻量级的React替代库，我们可以构建一个高性能的待办事项列表应用。本文将介绍如何使用 PureScript 和 Preact 来实现一个具有本地存储和筛选功能的待办事项列表应用。
准备工作
在开始之前，请确保您已经安装了以下工具：
- Node.js 和 npm
- PureScript 和 Pulp
- Preact 和 Preact-dom
您可以通过以下命令安装所需的依赖：
bash
npm install purescript purescript-pulp purescript-react purescript-react-dom
项目结构
创建一个新目录，用于存放项目文件。以下是项目的基本结构：
todo-list/
├── src/
│ ├── components/
│ │ ├── TodoItem.purs
│ │ └── TodoList.purs
│ ├── index.purs
│ └── main.purs
├── .pulpfile
└── package.json
创建组件
TodoItem.purs
我们创建一个 `TodoItem` 组件，用于显示单个待办事项。
purs
module TodoItem where
import React
type Props = {
todo :: String
onToggle :: String -> Unit
}
todoItem :: Props -> ReactElement
todoItem { todo, onToggle } =
let
toggleTodo = onToggle todo
in
React.createElement "li" { onClick: toggleTodo } todo
TodoList.purs
接下来，我们创建一个 `TodoList` 组件，用于渲染待办事项列表。
purs
module TodoList where
import React
import TodoItem (todoItem)
import Data.Array (map)
import Effect (Effect)
import Effect.Aff (Aff)
import Effect.Class (liftEffect)
import Effect.Class.Console (log)
import Effect.Unsafe (unsafePerformEffect)
import Web Storage (localStorage, getItem, setItem, removeItem)
type Props = {
todos :: Array String
onToggle :: String -> Aff Unit
}
todoList :: Props -> ReactElement
todoList { todos, onToggle } =
let
toggleTodo todo = liftEffect $ onToggle todo
in
React.createElement "ul" {} $ map (todo -> todoItem { todo, onToggle: toggleTodo }) todos
本地存储
为了持久化待办事项列表，我们将使用本地存储。在 `TodoList` 组件中，我们将添加一些函数来处理本地存储。
purs
todoList :: Props -> ReactElement
todoList { todos, onToggle } =
let
saveTodos = liftEffect $ do
setItem "todos" $ show todos
loadTodos = liftEffect $ do
todosStr read str :: Array String
Nothing -> []
removeTodo todo = liftEffect $ do
todosStr do
let
todos = read str :: Array String
newTodos = filter (_ /= todo) todos
setItem "todos" $ show newTodos
saveTodos
Nothing -> pure unit
in
React.createElement "ul" {} $ do
let
todos' = unsafePerformEffect loadTodos
map (todo -> todoItem { todo, onToggle: removeTodo todo }) todos'
筛选功能
为了提供筛选功能，我们将在 `TodoList` 组件中添加一个输入框，允许用户输入筛选条件。
purs
todoList :: Props -> ReactElement
todoList { todos, onToggle } =
let
-- ... (省略其他代码)
filterTodos :: String -> Array String
filterTodos query = filter (todo -> todo.contains query) todos
in
React.createElement "div" {} do
React.createElement "input" { type: "text", placeholder: "Filter todos", onInput: e -> do
let
query = e.target.value
liftEffect $ do
saveTodos
log $ "Filtered todos: " query
}
React.createElement "ul" {} $ map (todo -> todoItem { todo, onToggle: removeTodo todo }) $ filterTodos ""
主组件
我们创建一个主组件 `App`，它将包含 `TodoList` 组件。
purs
module Main where
import React
import TodoList (todoList)
import Effect (Effect)
import Effect.Class (liftEffect)
import Effect.Unsafe (unsafePerformEffect)
import Web Storage (localStorage, getItem, setItem, removeItem)
type Props = {}
app :: Props -> ReactElement
app {} =
let
todos = unsafePerformEffect $ do
todosStr read str :: Array String
Nothing -> []
onToggle todo = liftEffect $ do
let
newTodos = filter (_ /= todo) todos
setItem "todos" $ show newTodos
saveTodos
removeTodo todo = liftEffect $ do
let
newTodos = filter (_ /= todo) todos
setItem "todos" $ show newTodos
saveTodos
in
React.createElement "div" {} do
React.createElement "h1" {} "Todo List"
React.createElement TodoList { todos, onToggle, removeTodo }
运行应用
现在，我们可以通过以下命令启动应用：
bash
pulp run
打开浏览器，访问 `http://localhost:8000`，您应该能看到一个待办事项列表应用，其中包含本地存储和筛选功能。
总结
本文介绍了如何使用 PureScript 和 Preact 开发一个待办事项列表应用。我们实现了本地存储和筛选功能，并展示了如何使用函数式编程和类型安全来构建高效、可维护的Web应用。希望这篇文章能帮助您更好地理解 PureScript 和 Preact 的使用，并激发您在函数式编程领域进一步探索的兴趣。
Comments NOTHING