如何用TypeScript创建document ready时自执行的类或函数（AMD模块）

嘿，这个问题我之前帮好几个做AMD+TypeScript的开发者解决过，咱们一步步拆解来搞定～

核心矛盾是：AMD会把带import/export的代码全封装进模块函数里，没法直接在全局层面写DOM就绪逻辑。但我们可以通过模块化的方式绕开这个限制，同时完全用TypeScript实现需求：

方法1：利用AMD加载器的全局回调（最推荐） #

大部分AMD加载器（比如RequireJS）都支持全局回调机制——等所有依赖加载完成后执行指定逻辑。你可以把DOM就绪监听放在这个回调里，同时导入封装好的组件初始化代码：

// 假设你的组件初始化逻辑都封装在这个模块里
import { initDataTable, initPopupModal } from './components/init-components';

// 以RequireJS为例，全局回调里引入jQuery并监听DOM就绪
require(['jquery'], ($) => {
  $(document).ready(() => {
    // 调用组件初始化方法，全程不用写原生JS
    initDataTable();
    initPopupModal();
  });
});

转译为AMD后，这段代码会被加载器正确处理，所有逻辑都在模块化体系内，完全符合你的要求。

方法2：封装DOM就绪为独立可复用模块 #

你可以把DOM就绪的逻辑抽象成一个通用模块，之后在任何业务模块里直接导入使用：

// dom-ready.ts - 封装DOM就绪逻辑
import * as $ from 'jquery';

export function runOnDomReady(callback: () => void): void {
  $(document).ready(callback);
}

然后在主模块里调用：

// main.ts
import { runOnDomReady } from './dom-ready';
import { initDataTable, initPopupModal } from './components/init-components';

// 直接调用封装好的方法，代码更整洁
runOnDomReady(() => {
  initDataTable();
  initPopupModal();
});

这种方式把DOM就绪逻辑做成了可复用工具，完全符合TypeScript的模块化思想，也彻底避免了原生JS硬编码。

方法3：模块顶级代码绑定（适合简单场景） #

如果你的项目场景简单，也可以直接在模块的顶级代码里绑定DOM就绪事件——AMD模块加载完成后，顶级代码会自动执行，只要确保依赖（比如jQuery）已经加载：

// main.ts
import * as $ from 'jquery';
import { initDataTable, initPopupModal } from './components/init-components';

// 模块加载完成后直接绑定，转译后AMD会确保jQuery已就绪
$(document).ready(() => {
  initDataTable();
  initPopupModal();
});

这种写法最简洁，但灵活性稍弱，适合小型项目或单一入口的场景。

关键注意事项 #

• 确保你的AMD加载器（比如RequireJS）正确配置了jQuery的路径，这样import $ from 'jquery'能被正确解析。
• 所有组件初始化逻辑都要封装在TypeScript模块里，不要写全局函数，保持代码的模块化和可维护性。

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