是否檢查調用函數的每個變量？

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;

由於具有“unique-id”的元素存在於未在瀏覽器中加載的另一個頁面中，因此第二行將返回錯誤，因為container_element為null。 為了解決這個問題，我將代碼更改為

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返回一個（新）空集，如上所示。

您仍然可以選擇知道元素是否存在（在此問題的答案中更多）：

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