我该如何包装 document.getElementById 以免在找不到 ID 时抛出 TypeError？答案

【问题标题】：What do I wrap a document.getElementById so as not to throw a TypeError when ID can't be found?我该如何包装 document.getElementById 以免在找不到 ID 时抛出 TypeError？
【发布时间】：2017-02-02 23:00:15
【问题描述】：

我正在使用 Hammer.js 库 (http://hammerjs.github.io/) 在 vanilla javascript 环境中启用触摸手势。包括图书馆后，我的画廊页面上有一个电话。如果在页面上找不到 id 幻灯片，则调用失败。生成的 TypeError 还会阻止执行该站点的其他 js。我对此真的很陌生，但是通过阅读我认为我需要将此代码包装在测试中，这样如果 id slide 不存在，它就不会运行。知道如何执行此操作将帮助我解决其他 id 和库的其他问题。

所以在 Hammer.js 代码之后我有自己的代码：

var slide = document.getElementById('slide');
var mc = new Hammer(slide);
mc.on("swipeleft", function(ev) {
var url = document.querySelector('a.next').getAttribute('href');
if (url) {
    window.location = url;
}
});

mc.on("swiperight", function(ev) {
var url = document.querySelector('a.prev').getAttribute('href');
if (url) {
    window.location = url;
}
});

如果页面不包含 id 幻灯片，我如何防止执行此代码？（当我说它不包含它时，我的意思是它不会在那个页面上存在，并不是说 DOM 还没有准备好。）

谢谢。

【问题讨论】：

标签： javascript hammer.js

【解决方案1】：

只是测试一下：

var slide = document.getElementById('slide');

if( slide ){
  // .. your code
}

【讨论】：

工作就像一个魅力。谢谢。

【解决方案2】：

如果slide 为假，则结束周围的函数执行：

var slide = document.getElementById('slide');    
if (!slide) return;
//... The rest of your code

【讨论】：

这可行，但前提是下面没有其他代码仍应运行
是的，当然，我更喜欢这种风格而不是 if 语句中的嵌套代码（特别是如果有多个检查）。在此示例的上下文中，尽管差异微不足道，但我什至可能会按照您的方式进行操作。