VanJS项目实战：实现可编辑的待办事项列表

前言

在Web开发中，待办事项(Todo List)是一个经典的学习案例，它涵盖了状态管理、UI渲染和用户交互等核心概念。本文将基于VanJS这个轻量级响应式UI库，深入讲解如何实现一个功能完善的待办事项应用，特别关注如何实现列表项的可编辑功能。

VanJS简介

VanJS是一个极简的JavaScript库，用于构建响应式用户界面。它采用声明式编程风格，通过简单的函数组合来创建UI组件，同时提供了响应式状态管理能力。VanJS的核心优势在于其极小的体积和直观的API设计。

待办事项应用设计

我们将实现一个具有以下功能的待办事项应用：

1. 添加新的待办事项
2. 标记事项为已完成
3. 删除事项
4. 编辑事项内容
5. 本地存储持久化

核心实现解析

状态管理

首先，我们定义了两个状态类来管理应用数据：

class TodoItemState {
  constructor(text, done, deleted) {
    this.text = text; 
    this.done = done; 
    this.deleted = deleted;
  }
  serialize() { 
    return {text: this.text.val, done: this.done.val} 
  }
}

class TodoListState {
  constructor(todos) {this.todos = todos;}

  save() {
    localStorage.setItem("appState", JSON.stringify(
      (this.todos = this.todos.filter(t => !t.deleted.val)).map(t => t.serialize())))
  }

  static load = () => new TodoListState(
    JSON.parse(localStorage.getItem("appState") ?? "[]")
      .map((t) => new TodoItemState(van.state(t.text), van.state(t.done), van.state(false)))
  )

  add(text) {
    this.todos.push(new TodoItemState(van.state(text), van.state(false), van.state(false)))
    return new TodoListState(this.todos)
  }
}

这里的关键点在于：

• 使用VanJS的state函数创建响应式状态
• 实现了序列化和反序列化方法用于本地存储
• 通过静态方法load从本地存储初始化状态

UI组件实现

待办事项项的组件实现如下：

const TodoItem = ({text, done, deleted}) => () => deleted.val ? null : div(
  input({type: "checkbox", checked: done, onclick: e => done.val = e.target.checked}),
  (done.val ? del(text) : input({type: "text", value: text.val, onchange: e => text.val = e.target.value})),
  a({onclick: () => deleted.val = true}, "❌"),
)

这个组件的亮点在于：

1. 根据done状态动态切换显示方式
   • 已完成：显示删除线文本
   • 未完成：显示可编辑的输入框
2. 实现了删除功能
3. 完全响应式，状态变更自动更新UI

主应用组件

const TodoList = () => {
  const appState = van.state(TodoListState.load())
  van.derive(() => appState.val.save())
  const inputDom = input({type: "text"})
  return div(
    inputDom, 
    button({onclick: () => appState.val = appState.val.add(inputDom.value)}, "Add"),
    (dom) => dom ? 
      van.add(dom, TodoItem(appState.val.todos.at(-1))) : 
      div(appState.val.todos.map(TodoItem)),
  )
}

主组件负责：

1. 初始化应用状态
2. 设置状态变更时的自动保存
3. 提供添加新事项的界面
4. 渲染整个待办事项列表

关键技术点

响应式状态管理

VanJS使用state函数创建响应式状态变量。当状态值发生变化时，依赖该状态的UI会自动更新。在我们的实现中：

• text、done和deleted都是响应式状态
• 状态变更通过简单的赋值操作触发(state.val = newValue)

条件渲染

待办事项项的渲染根据状态动态变化：

• 当deleted为true时，返回null表示不渲染
• 当done为true时，使用del元素显示带删除线的文本
• 当done为false时，显示可编辑的输入框

本地存储集成

通过localStorage实现了数据的持久化：

1. save方法将状态序列化为JSON并存储
2. load静态方法从存储中恢复状态
3. 使用van.derive自动在状态变更时触发保存

总结

通过这个案例，我们展示了如何使用VanJS构建一个功能完整的待办事项应用。关键点包括：

1. 合理的状态结构设计
2. 响应式状态与UI的绑定
3. 条件渲染实现不同状态的显示
4. 本地存储集成实现数据持久化

这个实现虽然简洁，但涵盖了现代前端开发的核心理念。VanJS的轻量级特性使得开发者可以专注于业务逻辑，而不需要处理复杂的框架概念。对于初学者来说，这是一个很好的学习响应式编程和状态管理的案例。