javascript - 对调用函数的每个变量进行空检查？

Question

我有一个 javascript，我在其中声明了所有变量

$(document).ready(function(){
    //variables
});

这些变量的值也被初始化，它们大多是 HTML 元素。这些元素是通过 document.GetElementById() 使用 id 确定的。其中一些元素仅存在于尚未加载到浏览器中的不同页面中。当保存元素的变量用于不同目的时，这会导致空错误。

var container_element = document.getElementById('unique-id');
var count = container_element.getElementsByTagName("div").length;

由于具有“unique-id”的元素出现在浏览器未加载的另一个页面中，第二行将返回错误，因为 container_element 为空。为了解决这个问题，我将代码更改为

var container_element = document.getElementById('unique-id');

if(container_element) {
    var count = container_element.getElementsByTagName("div").length;
}

这是处理这种事情的唯一方法吗？我是否必须对通过变量调用的每个函数进行空检查，或者是否有任何其他解决方案或标准/最佳实践？

Answer 1

当您使用 getElementById 时，无论何时元素可能存在或可能不存在，您都需要这样的守卫。您可以使用显示的if，或者

var container_element = document.getElementById('unique-id');
var count = !container_element ? 0 : container_element.getElementsByTagName("div").length;

或类似的。

另一种选择是对异常使用react:

var container_element = document.getElementById('unique-id');
var count;
try {
    count = container_element.getElementsByTagName("div").length;
} catch (e) {
    count = 0;
}

---

我注意到您正在使用 jQuery 但没有在该代码中使用它。这太糟糕了，因为如果你是，jQuery 的基于集合的性质将意味着你不需要需要守卫:

var container_element = $('#unique-id');
var count = container_element.find("div").length;

即使 container_element 是一个空集，您也可以调用它的方法。大多数 jQuery 方法都提供空集的智能处理。例如，在空集上使用 find 会返回一个(新的)空集，如上所述。

您仍然可以选择了解该元素是否存在(更多信息在 this question's 答案中):

if (container_element[0])
// or
if (container_element.length)