使用 Preact 和 PureScript 开发待办事项列表应用（本地存储 + 筛选功能）
随着现代前端技术的发展，构建高效、可维护的Web应用变得越来越重要。PureScript 作为一种函数式编程语言，以其简洁、类型安全和易于推理的特点，在函数式编程社区中越来越受欢迎。结合 Preact，一个轻量级的React替代库，我们可以构建一个高性能的待办事项列表应用。本文将介绍如何使用 PureScript 和 Preact 来实现一个具有本地存储和筛选功能的待办事项列表应用。
准备工作
在开始之前，请确保您已经安装了以下工具：
- Node.js 和 npm
- PureScript 和 Pulp
- Preact 和 Preact-dom
您可以通过以下命令安装所需的依赖：
bash
npm install preact preact-dom
创建项目结构
创建一个新目录来存放项目，并在其中创建以下文件和目录：
todo-list/
├── src/
│ ├── components/
│ │ ├── TodoItem.purs
│ │ └── TodoList.purs
│ ├── index.purs
│ └── main.purs
├── package.json
└── README.md
编写 PureScript 代码
1. 定义数据结构
在 `src/components/TodoItem.purs` 文件中，定义待办事项的数据结构：
purs
module TodoItem where
import Data.Newtype (class Newtype, over, unwrap)
newtype Todo = Todo
{ id :: Int
, text :: String
, completed :: Boolean
}
derive instance newtypeTodo :: Newtype Todo _
2. 创建组件
在 `src/components/TodoItem.purs` 文件中，创建 `TodoItem` 组件：
purs
module TodoItem where
import React
import TodoItem (Todo)
import Preact as P
todoItem :: Todo -> P.JSX
todoItem todo =
P.div_
[ P.div_
[ P.text $ "ID: " show (unwrap todo.id)
, P.text $ "Text: " unwrap todo.text
, P.text $ "Completed: " show todo.completed
]
, P.button_
[ P.text "Complete"
, P.on "click" (P.action_ $ completeTodo todo)
]
]
where
completeTodo :: Todo -> P.Action
completeTodo todo = P.action_ $ do
-- 完成待办事项的逻辑
在 `src/components/TodoList.purs` 文件中，创建 `TodoList` 组件：
purs
module TodoList where
import React
import TodoItem (Todo)
import Preact as P
todoList :: Array Todo -> P.JSX
todoList todos =
P.div_
[ P.h1_ [ P.text "Todo List" ]
, P.div_
[ P.ul_
(map todoItem todos)
]
]
where
todoItem :: Todo -> P.JSX
todoItem todo = P.li_ [ P.text $ unwrap todo.text ]
3. 创建主组件
在 `src/index.purs` 文件中，创建主组件：
purs
module Main where
import React
import TodoList (todoList)
import Preact as P
main :: P.JSX
main =
P.div_
[ todoList
[ Todo { id: 1, text: "Learn PureScript", completed: false }
, Todo { id: 2, text: "Build a Todo List", completed: false }
]
]
4. 编译和运行
在项目根目录下，运行以下命令来编译 PureScript 代码：
bash
pulp build
然后，启动本地服务器：
bash
node server.js
在浏览器中访问 `http://localhost:8080`，您应该能看到一个简单的待办事项列表。
本地存储和筛选功能
1. 本地存储
为了实现本地存储，我们需要在 `TodoItem` 组件中添加逻辑来处理待办事项的添加、删除和完成状态更新。
在 `src/components/TodoItem.purs` 文件中，修改 `completeTodo` 函数：
purs
completeTodo :: Todo -> P.Action
completeTodo todo = P.action_ $ do
-- 更新本地存储中的待办事项
let newTodos = updateTodoInStorage todo.id todo.completed
localStorage.setItem "todos", JSON.stringify newTodos
在 `src/index.purs` 文件中，添加初始化本地存储的逻辑：
purs
main :: P.JSX
main =
P.div_
[ todoList
(map (Todo { id: _, text: _, completed: _ }) (parseTodos localStorage.getItem "todos"))
]
where
parseTodos :: String -> Array Todo
parseTodos str =
case JSON.parse str of
arr -> arr
_ -> []
2. 筛选功能
为了实现筛选功能，我们需要在 `TodoList` 组件中添加一个筛选输入框，并根据用户输入的筛选条件来过滤待办事项。
在 `src/components/TodoList.purs` 文件中，修改 `todoList` 函数：
purs
todoList :: Array Todo -> P.JSX
todoList todos =
P.div_
[ P.h1_ [ P.text "Todo List" ]
, P.input_
{ type: "text"
, placeholder: "Filter by text..."
, on "input" (P.action_ $ updateFilter $ P.inputValue)
}
, P.div_
[ P.ul_
(filter todoItem todos)
]
]
where
todoItem :: Todo -> P.JSX
todoItem todo = P.li_ [ P.text $ unwrap todo.text ]
updateFilter :: String -> P.Action
updateFilter filterText = P.action_ $ do
-- 更新筛选逻辑
在 `src/index.purs` 文件中，添加筛选逻辑：
purs
main :: P.JSX
main =
P.div_
[ todoList
(map (Todo { id: _, text: _, completed: _ }) (parseTodos localStorage.getItem "todos"))
]
where
parseTodos :: String -> Array Todo
parseTodos str =
case JSON.parse str of
arr -> arr
_ -> []
总结
通过使用 PureScript 和 Preact，我们可以构建一个高性能、可维护的待办事项列表应用。本文介绍了如何使用本地存储和筛选功能来增强应用的功能。希望这篇文章能帮助您更好地理解如何使用 PureScript 和 Preact 来开发现代Web应用。
Comments NOTHING