如何在根JS文件捕获jQuery未定义错误并动态加载供调用方使用

API 探路者

2026-9-29

方案可行性与实现方式

这个需求完全可以实现，主流有两种实现思路：

思路1：全局异常捕获方案

通过监听全局error事件捕获所有未处理的JS异常，判断异常为$/jQuery未定义时自动引入jQuery：

// 公共根JS文件中写入
window.addEventListener('error', (e) => {
  const isJqueryError = e.error instanceof ReferenceError && 
    (e.message.includes('$ is not defined') || e.message.includes('jQuery is not defined'));

  if (isJqueryError && !window.$) {
    // 同步环境直接加载
    window.$ = window.jQuery = require('jquery');
    // 若为浏览器异步加载jQuery，可通过动态插入script标签实现，加载完成后可重试报错代码
    e.preventDefault();
    return true;
  }
})

注意：该方案第一次触发异常时，报错的jQuery调用代码已经执行失败，仅能保证后续执行的jQuery代码正常运行，若需要首次调用就正常执行，推荐用第二种思路。

思路2：属性访问拦截方案（更推荐）

通过Object.defineProperty拦截window上$和jQuery的访问行为，首次访问时自动加载jQuery，完全不会触发未定义错误：

// 公共根JS文件中写入
Object.defineProperty(window, '$', {
  configurable: true,
  get() {
    // 首次访问时加载jQuery，加载后删除拦截直接挂载真实对象
    delete window.$;
    const jQuery = require('jquery');
    window.$ = window.jQuery = jQuery;
    return jQuery;
  }
});

Object.defineProperty(window, 'jQuery', {
  configurable: true,
  get() {
    return window.$;
  }
});

该方案下，当子文件执行$(document).html('test')时，会自动触发window.$的getter，完成jQuery的加载后返回实例，代码可以正常执行，不会抛出任何错误。