SPA 项目中如何优雅地处理节点获取失败的情况？

在 SPA（Single Page Application） 项目中，我们通常会使用 JavaScript 操作 DOM（Document Object Model）树来完成页面渲染和交互。然而，由于网络不稳定或者其他异常情况的存在，有时候节点获取可能会失败。所以我们需要相应的处理机制来应对这种情况，避免页面 JavaScript 崩溃或者出现不必要的错误。

问题描述

在 SPA 项目中，我们通常会使用 DOM API 来获取节点并进行相关操作。但是，节点获取这个行为是非阻塞式的，也就是说一旦节点获取失败，代码会直接跳过这个节点并继续往下执行。如果后面的代码依赖于这个节点的存在，就会导致 JavaScript 出错，影响整个页面的渲染和交互。

例如，我们想要获取文本框输入的值并进行处理：

const inputEl = document.getElementById('input');
const inputValue = inputEl.value;

console.log(inputValue);

如果这里的 inputEl 获取失败，那么 inputValue 就会是 undefined，后面的代码就会出错。

解决方案

为了避免这种情况的发生，我们需要在获取节点之前，先判断节点是否存在。有多种方式可以实现节点判断，我们下面介绍几种常见的方法。

使用 if 语句判断

最传统的方式就是使用 if 语句，判断获取到的节点是否为 null 或者 undefined。如果是，则跳过当前处理。

const inputEl = document.getElementById('input');

if (inputEl) {
  const inputValue = inputEl.value;
  console.log(inputValue);
}

这种方法相对比较繁琐，而且如果需要多次判断节点是否存在，就会导致代码冗长。所以我们需要其他更简洁的方式来实现节点判断。

使用 && 运算符判断

可以使用 && 运算符来判断节点是否存在，如果存在则继续执行后面的代码，否则跳过当前处理。这种方式比 if 语句更简洁。

const inputEl = document.getElementById('input');
const inputValue = inputEl && inputEl.value;
console.log(inputValue);

这种方式虽然简洁，但是当需要对节点进行多次操作时，会导致代码的可读性降低。

使用 ?. 运算符判断

ES2020 引入了可选链运算符 ?.，可以更加简洁地判断节点是否存在。

const inputEl = document.getElementById('input');
const inputValue = inputEl?.value;
console.log(inputValue);

这种方式可以很好地解决可读性差的问题。但是需要注意，?. 运算符支持的浏览器版本可能会存在兼容性问题。

示例代码

我们可以结合一些示例代码来演示不同的判断方式：

<div id="container">
  <input type="text" id="input" />
</div>

使用 if 语句判断：

-- -------------------- ---- -------
----- ----------- - -------------------------------------

-- ------------- -
  ----- ------- - ------------------------------------
  -- --------- -
    ----- ---------- - --------------
    ------------------------
  -
-

使用 && 运算符判断：

const containerEl = document.getElementById('container');
const inputEl = containerEl && containerEl.querySelector('#input');
const inputValue = inputEl && inputEl.value;

console.log(inputValue);

使用 ?. 运算符判断：

const containerEl = document.getElementById('container');
const inputEl = containerEl?.querySelector('#input');
const inputValue = inputEl?.value;

console.log(inputValue);

总结

在 SPA 项目中，节点获取失败是常见的情况。为了避免这种情况的发生，我们需要在获取节点之前先判断节点是否存在。本文介绍了常见的节点判断方式，包括 if 语句、&& 运算符、?. 运算符。我们可以根据具体场景选择合适的方式来优雅地处理节点获取失败的情况，提高代码的可读性和健壮性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c34aa968c7c53b07575c9