javascript - 当选择器传递给文档中不存在的 jQuery() 时如何捕捉，以阻止进一步可能的错误或遗漏？

Question

给定

$(function() {
  $(".planChoice").on("click", function() {
    console.log(123)
  });
  
  console.log($(".planChoice").length)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

jQuery 允许将 .on() 链接到 jQuery() 调用，其中传递给 jQuery() 的选择器在 中不存在>文件。 .addEventListener() 抛出一个 TypeError

Cannot read property 'addEventListenet' of null

$(function() {
  document.querySelector(".planChoice")
  .addEventListener("click", function() {
    console.log(123)
  });
  
  console.log(document.querySelector(".planChoice").length)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

当 document 中不存在选择器或元素时，我们如何调整(改进)jQuery() 以抛出相同的 TypeError jQuery() 被调用的时间，或者 jQuery 方法被链接到返回 jQuery 对象的 jQuery() 调用 - 尽管不存在匹配选择器字符串的底层元素调用时在 document 中？

Answer 1

如果你真的想抛出一个错误，你可以编辑jQuery()/$

$ = function (selector, context) {
    var el = new jQuery.fn.init(selector, context);
    if (el.length === 0) throw new Error('fail : "' + selector + '" Not Found');
    return el;
}

$('body'); // okay, returns element

$('nosuchthing'); // fail, throws error

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另一种方法是只返回 null 或 undefined 而不是空集合，并让下一个链接的函数抛出错误

$ = function (selector, context) {
		var el = new jQuery.fn.init(selector, context);
    if (el.length === 0) return null;
    return el;
}

$('body').on('click', function() {}) // hunkydory
$('nosuchthing').on('click', function() {}) // can't read property "on" of "null"