• 前端

domready 是一个超小巧的前端库，专门负责"让你知道 DOM 何时加载完毕"。本教程带你用仅 9 行胶水代码把它集成进 Ender 框架，轻松获得熟悉的 jQuery 风格$(document).ready()语法——简单、清晰、拿来即用 🚀

domready 解决什么问题？

页面里的脚本执行时，DOM 中位于其后的元素可能还没被解析出来，直接操作就会报错。稳妥的做法是：等 DOM 结构就绪（DOMContentLoaded事件触发）后再运行初始化逻辑，而不是傻等整个页面（含图片）加载完成。

domready 用约 29 行代码就做到了这件事：

domready(function () { // DOM is loaded! })

核心实现见 src/ready.js，思路非常经典：

• 若文档尚未就绪：把回调压入队列fns，并注册一个一次性的DOMContentLoaded监听器，触发后逐个执行队列中的回调，随后立即移除自身；
• 若文档已就绪：用setTimeout(fn, 0)将回调推迟到下一轮事件循环执行，避免同步直接调用带来的嵌套陷阱。

"先排队、后统一触发"，正是各大框架 ready API 背后的通用套路。

9行代码如何玩转 Ender？

Ender 集成代码全部位于 src/ender.js，一共就 9 行：

!function ($) { var ready = require('domready') $.ender({domReady: ready}) $.ender({ ready: function (f) { ready(f) return this } }, true) }(ender);

逐段拆解一下：

1. 引入依赖：require('domready')拿到核心函数；
2. 注册到 $ 上：$.ender({domReady: ready})让你可以直接调用$.domReady(fn)；
3. 挂载可链式的方法：第二个$.ender的第二个参数true表示挂载到$的原型上，因此任何选择器结果（包括$(document)）都能调用.ready(fn)；方法体里return this保证了链式调用能力。

仅仅如此，Ender 的$就具备了 jQuery 最标志性的写法：

$(document).ready(function () { $('body').html('<p>boosh</p>') })

还有一个隐藏细节：package.json 中声明了"ender": "./src/ender.js"。Ender 看到这个字段后，安装插件时会自动用它作为入口——也就是说一条ender add domready就自动完成集成，无需手动拼胶水。

三步快速上手

1. 安装 Ender 命令行工具

   npm install ender -g

2. 添加 domready 插件

   ender add domready

3. 写代码：require('domready')(fn)与$(document).ready(fn)任选其一，效果完全一致。

本地验证效果

仓库自带一个开箱即用的演示页，构建流程见 Makefile：

git clone https://gitcode.com/gh_mirrors/do/domready cd domready npm install && make open tests/test.html

验证成功时，页面标题会显示domready✓——二次调用能正常触发，证明"已加载"分支处理无误，演示源码见 tests/test.html。构建产物位于仓库根目录的 ready.js（及压缩版 ready.min.js），也可独立引入自己的项目使用。

关键要点小结

• 🧩 domready 用"回调队列 + DOMContentLoaded 一次性监听"实现 DOM 就绪检测，体积只有约 29 行；
• 🔌 Ender 集成仅 9 行：一次require加两次$.ender注册，其中return this是可链式语法的关键；
• 🎯package.json里的"ender"字段是"一条命令完成集成"的秘密。

有了这套组合，轻量级的$就拥有了 jQuery 最受欢迎的部分。下次需要"等 DOM 就绪"的能力时，不妨优先试试它。

• 前端