变量在先用法的验证

Question

您应该多久验证或清除JavaScript中的变量？我有时会碰到我编写的代码，并出现Can not access property X of undefined或类似错误。结果，如果我使用的变量可能包含DOM对象，那么我将像下面这样进行清理。

我的问题是，我应该多久验证一次可能存在的任何变量？

这里是我本周早些时候做过的事情的样本。目的是根据其文本值更改标题背景的背景颜色。请注意，__spreadArrays是ES6 Spread的填充。

我目前正在执行不良做法吗？

var rowColours = {
    "The Roadmap": "#5e4c79",
    // ...
    "Employee Engagement": "#00275e",
    "Stakeholder Engagement": "#00275e"
};
var sections = __spreadArrays(document.querySelectorAll(".ms-webpartPage-root .ms-webpartzone-cell"));
sections.forEach(function (o) {
    var titleBar = o.querySelector(".ms-webpart-chrome-title");
    if (!(titleBar instanceof HTMLElement))
        return;
    var titleText = titleBar ? titleBar.innerText.trim() : "";
    if (!rowColours[titleText])
        return;
    var header = o.querySelector(".ms-webpart-chrome-title > [title]");
    if (!(header instanceof HTMLElement))
        return;
    header.style.background = "linear-gradient(to right, " + rowColours[titleText] + " 50%, white 98%)";
});

Answer 1

总是，但是您可以从其他工具中获得一些利用。

尚无完美的解决方案，但您应考虑使用Typescript，以帮助您在开发/构建期间获得类似的案例，并创建一些测试以确保您的合同是最新的。

作为替代，您可以使用类似：

var header   = o.querySelector(".ms-webpart-chrome-title > [title]");
var newValue = "linear-gradient(to right, " + rowColours[titleText] + " 50%, white 98%)";

header instanceOf HTMLElement && header.style.background = newValue

我希望您觉得这有用。