Question

我有一个javascript，我在

中声明了所有变量

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

这些变量的值也被初始化，并且大部分都是HTML元素。元素通过document.GetElementById()使用ID确定。其中一些元素仅存在于尚未在浏览器中加载的不同页面中。当包含元素的变量用于不同目的时，这会导致null错误。

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

由于元素带有＆＃34; unique-id＆＃34;存在于未在浏览器中加载的另一个页面中，第二行将返回错误，因为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;

或类似。

另一个选择是对异常作出反应：

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)

是否检查调用函数的每个变量？

1 个答案: