jQuery 3.3.1全局声明li选择器变量为null，移入keydown回调后初始化正常的原因

核心问题来自脚本执行时机与DOM渲染顺序的错位，和你使用的jQuery 3.3.1版本本身没有逻辑缺陷：

• 原全局声明写法的执行问题
  当你把var a = $('li')直接写在helper.js的全局顶层位置时，这段代码会在浏览器解析到对应<script>标签的瞬间立刻执行。如果你的helper.js被引入在HTML的<head>标签内，或者位于所有<li>节点所在DOM结构的前方，此时浏览器还没完成后续DOM节点的解析渲染，DOM树中根本不存在任何<li>元素，jQuery执行$('li')自然无法获取到匹配的元素集合。
  补充说明：jQuery选择查询返回空结果时，并不是严格意义上的null，而是一个长度为0的jQuery包装对象；如果后续代码尝试直接访问这个空集合里的DOM节点属性，会抛出引用错误，这种报错很容易被误判为变量a是null。
• 事件回调内声明写法正常运行的原因
  把var a = $('li')移动到keydown事件的回调函数内部后，这行选择代码的执行时机不再是脚本加载的瞬间，而是要等待用户触发键盘按下事件时才会运行。此时整个HTML文档早已完成加载，所有<li>节点都已经渲染到DOM树中，选择查询自然可以拿到正确的元素集合。

如果你需要让变量a在全局作用域下持有所有li的元素集合，不需要把选择逻辑硬塞进某个交互事件的回调里，只需要把选择逻辑放到jQuery的DOM就绪回调中即可，保证DOM渲染完成后再执行选择逻辑：

$(function(){
  // 以下代码会在DOM完全渲染完成后才执行
  window.a = $('li');
  $(window).keydown(function(e) {
    // 业务逻辑代码
  })
})

内容的提问来源于stack exchange，提问作者Tim Chow