HTML5教程

基于事件的前端编程

本文主要是介绍基于事件的前端编程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

基于事件的前端编程

本文写于 2022 年 5 月 17 日。

如果我们需要一个 TODO list 应用,你会怎么样去设计它?

最简单直接的方法:

  1. UI 层创建一个按钮、一个输入框,用一个 ul 嵌套 li 做展示,每个 li 上都有一个删除按钮;
  2. 在 JS 中创建一个数组;
  3. 设置监听事件:
    • 每次点击提交按钮就往数组里 push 东西,然后根据新的数组重新渲染 HTML;
    • 每次点击删除就删除数组中的一项,然后根据数组重新渲染 HTML。

如果按照这种写法,一旦项目复杂了,我们将难以新增功能与维护。

例如,我希望让用户一秒内最多提交 1 次(节流);或者我们有多处可以修改储存 todoList 数组的手段,我希望集中这些操作,不要每修改一次数组就修改一次 DOM……

按照刚刚的思路,代码可能会变得比较“脏”。

其根本原因就是我们没有解耦 UI 和状态。

那么接下来,我们将尝试利用基于”事件“的思想来优化代码。

对于前端来说,事件化是解耦模块与模块之间业务逻辑的手段,也是大型前端项目构筑的一味良药。

什么是事件

只要你使用 JavaScript 操作过 DOM,就一定接触过事件。

window.addEventListener("resize", () => {});

button.addEventListener("click", (e) => {});

当我们的窗口被缩放的时候,触发函数;当一个按钮被点击的时候,触发函数。这就是事件。

并且事件往往是多播的,也就是说不论你往函数中添加多少个函数,在事件触发的时候,所有的函数都会被调用。

button.addEventListener("click", (e) => console.log(1));
button.addEventListener("click", (e) => console.log(2));
button.addEventListener("click", (e) => console.log(3));
button.addEventListener("click", (e) => console.log(4));

button.click();
// 1
// 2
// 3
// 4

如何使用“事件”的思想改善我们的代码

回到我们文章开头的例子。

在基于事件的思想下,我们可以得到如下的分析结论:

  1. 我们有一套 UI,这套 UI 需要根据某一个变量进行渲染,所以这个变量发生变化就是一个事件
  2. 我们有一些按钮,这些按钮触发后会对数据进行操作,每种操作都是一个事件

那么我们的伪代码就可以这么写:

const todoListData = 创建一个可以被监听的数据([]);

const todoList新增事件 = 创建一个事件源();
const todoList删除事件 = 创建一个事件源();

todoList新增事件.监听触发((新增的todo) => todoListData.新增一项(新增的todo));

todoList删除事件.监听触发((要删除的todo) =>
  todoListData.删除一项(要删除的todo)
);

todoListData.监听变化((此时的todoList) => {
  // 修改 HTML
});

瞬间我们的代码就变得简洁了。如果要继续添加其他的代码逻辑也很简单,因为我们将修改数据和修改视图进行了分离。

这里你可以选择自己喜欢的库进行事件的编写,例如 RxJS、node 自带的 EventEmitter 等等……

如果你用的是 React,那么 Redux 也是这种思路。

RxJS 示例

接下来我将使用 RxJS 做一个简单的范例。

const todoListSource$ = BehaviorSubject([]);
export const todoList$ = todoListSource$.pipe(debounceTime(0));

const createItemEventSource$ = Subject();
const createItemEvent$ = createItemEventSource$.pipe(throttleTime(200));

const deleteItemEventSource$ = Subject();
const deleteItemEvent$ = deleteItemEventSource$.asObservable();

export function createItem(newItem) {
  createItemEventSource$.next(newItem);
}

export function deleteItem(targetItem) {
  deleteItemEventSource$.next(targetItem);
}

function onTodoItemCreate(newItem) {
  todoListSource$.next([...todoListSource$.current, newItem]);
}

function onTodoItemDelete(targetItem) {
  todoListSource$.next(
    todoListSource$.current.filter((item) => item !== targetItem)
  );
}

createItemEvent$.subscribe(onTodoItemCreated);

deleteItemEvent$.subscribe(onTodoItemDelete);

简简单单几行代码,却实现了较为复杂的功能。我们来分析看看。

首先第二行。我们在监听数据源的同时做了一个防抖操作。

这里是为了防止当我们订阅了数据源,去做别的操作时,数据源被频繁的修改导致的多次触发订阅,就像 Vue 为什么会有 nextTick 一样。

后面第五行。我们为增加事件添加了节流,这样用户就没办法在短时间内多次新增新项,避免误触。

总结

事件化的编程,让事件成为了模块之间的消息中介,我们不再简单粗暴的互相调用函数、引用变量,而是经由“事件系统”这样一个中介人。

中介人可以帮我们处理很多事情,例如防抖、节流。进一步优化我们的代码。

因此,对于前端来说,事件化是解耦业务逻辑与视图层的重要手段,也是大型前端项目构筑的一味良药。

(完)

这篇关于基于事件的前端编程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!