小试牛刀：使用 RxJS 实现一个简单的 ToDo 应用-JavaScript中文网-JavaScript教程资源分享门户

前言

RxJS 是一个非常流行的反应式编程库。它提供了一种新的方式来处理异步事件和数据流，使得我们可以更容易地解决复杂的问题。在本文中，我们将探索如何使用 RxJS 创建一个简单的 ToDo 应用程序。本文假设您已经有一定的 JavaScript 和 HTML/CSS 基础。

功能和架构

我们的 ToDo 应用程序将包括以下功能：

添加一个新任务
显示任务列表
标记任务为已完成
删除任务

为了实现这些功能，我们将使用以下技术：

HTML/CSS 来构建应用程序界面
JavaScript 和 RxJS 来处理事件和数据流
localStorage 来保存任务列表

我们将采用以下基本架构：

HTML：包含应用程序界面的 HTML 文件
JavaScript：使用 RxJS 和 localStorage 处理事件和数据流
CSS：用于美化应用程序界面

开始实现

首先，让我们写一个基本的 HTML 文件来构建应用程序界面：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ToDo 应用程序</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>ToDo 应用程序</h1>
      <form>
        <input type="text" placeholder="输入任务名称" />
        <button type="submit">添加</button>
      </form>
      <ul></ul>
    </div>
    <script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

这个 HTML 文件包含一个标题，一个表单来添加新任务，一个空的无序列表用于显示所有任务。我们还包括了 RxJS 的库文件以及我们稍后要编写的 JavaScript 文件。

接下来，让我们编写 JavaScript 文件。我们将首先创建一个 Observable，用于监听“添加任务”表单的 submit 事件。RxJS 提供了多种创建 Observable 的方法，我们将使用 fromEvent 方法来监听事件。这个 Observable 将发出包含表单提交事件的 Event 对象：

const addTaskForm = document.querySelector('form');
const addTask$ = Rx.Observable.fromEvent(addTaskForm, 'submit');

addTask$.subscribe(event => {
  event.preventDefault();
  // 处理表单提交事件
});

现在，我们在 subscribe 方法中添加 preventDefault，以防止表单提交后页面被重新加载。接下来，我们需要从事件对象中提取出输入框中的文本。我们可以使用事件对象的 target 属性来访问 DOM 元素，然后使用 querySelector 方法来选择文本输入框，最后访问输入框的 value 属性获取文本：

// javascriptcn.com 代码示例
const addTaskForm = document.querySelector('form');
const addTask$ = Rx.Observable.fromEvent(addTaskForm, 'submit');

addTask$.subscribe(event => {
  event.preventDefault();
  const newTaskInput = event.target.querySelector('input');
  const newTaskText = newTaskInput.value.trim();
  newTaskInput.value = '';
  // 处理任务文本
});

在这里，我们将输入框中的文本存储在了 newTaskText 变量中，并立即将输入框的值清空以准备下一次输入。

现在，我们可以在页面上添加一个新任务。下一步是将任务存储在 localStorage 中。我们可以使用 RxJS 的 ajax 方法来简单地将数据保存到本地存储中：

// javascriptcn.com 代码示例
const addTaskForm = document.querySelector('form');
const addTask$ = Rx.Observable.fromEvent(addTaskForm, 'submit');

const localStorageKey = 'tasks';

addTask$.subscribe(event => {
  event.preventDefault();
  const newTaskInput = event.target.querySelector('input');
  const newTaskText = newTaskInput.value.trim();
  newTaskInput.value = '';

  const storedTasks = JSON.parse(localStorage.getItem(localStorageKey)) || [];
  const updatedTasks = [...storedTasks, newTaskText];
  localStorage.setItem(localStorageKey, JSON.stringify(updatedTasks));
  
  // 更新任务列表
});

在这里，我们首先使用 getItem 方法从 localStorage 中检索出所有保存的任务，并使用 JSON.parse 方法将其转换为 JavaScript 数组。如果 localStorage 中不存在任何任务，则默认值为一个空数组。接下来，我们将新条目添加到任务数组中，并使用 setItem 方法将该数组作为 JSON 字符串存储回 localStorage 中。现在，我们的应用程序可以创建和存储任务了！

最后一步是在页面上显示所有任务。我们将使用 fromEvent 方法创建另一个 Observable，该 Observable 将在页面加载时发出一个“load”事件。我们可以使用 map 操作符将存储在 localStorage 中的任务数组与我们的任务列表组件进行绑定：

// javascriptcn.com 代码示例
const addTaskForm = document.querySelector('form');
const addTask$ = Rx.Observable.fromEvent(addTaskForm, 'submit');

const localStorageKey = 'tasks';

const loadTask$ = Rx.Observable.fromEvent(window, 'load');

const renderTaskList = tasks => {
  const taskList = document.querySelector('ul');
  taskList.innerHTML = tasks.map(task => `<li>${task}</li>`).join('');
};

loadTask$.subscribe(() => {
  const storedTasks = JSON.parse(localStorage.getItem(localStorageKey)) || [];
  renderTaskList(storedTasks);
});

addTask$.subscribe(event => {
  event.preventDefault();
  const newTaskInput = event.target.querySelector('input');
  const newTaskText = newTaskInput.value.trim();
  newTaskInput.value = '';

  const storedTasks = JSON.parse(localStorage.getItem(localStorageKey)) || [];
  const updatedTasks = [...storedTasks, newTaskText];
  localStorage.setItem(localStorageKey, JSON.stringify(updatedTasks));

  renderTaskList(updatedTasks);
});

在这里，我们使用 map 操作符将任务数组转换为 HTML 代码，并使用 join 方法将其连接起来。最后，我们使用 innerHTML 将所有 HTML 代码渲染到无序列表中。

现在，我们的应用程序已经完成了！当用户输入一个新任务时，应用程序会将该任务存储在 localStorage 中，并在任务列表中显示出来。

总结

在本文中，我们创建了一个使用 RxJS 的简单 ToDo 应用程序。我们学习了如何使用 fromEvent、ajax 和其他 RxJS 操作符来处理事件和数据流，以及如何将数据存储在 localStorage 中。我们还讨论了如何将应用程序组织为基于基本 HTML/CSS 和 JavaScript 的架构。我们希望本文可以启发您使用 RxJS 来解决更复杂的问题，并提供了一些指导意义。完整的示例代码可以在本文代码仓库中找到。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65361dc37d4982a6ebdfa514