先抓核心：YUI是模块工具箱，不是现代框架
YUI 的设计年代，前端还没进入现在这种构建工具满天飞的阶段。它解决的是浏览器兼容、模块组织、组件复用、事件处理这些问题。换句话说，它更像一套“页面增强工具箱”，不是 Vue、React 那种数据驱动框架。
理解这一点，YUI避坑就成功一半。你不能期待它天然组件热更新、状态集中管理、生态插件一抓一把。它的强项是把老浏览器时代的复杂问题包装起来，弱项是跟现代前端工程链衔接不顺。
YUI避坑：底层逻辑讲透
YUI避坑不能只背“这个库老了”。真正会出事的点，在于它的模块加载、DOM封装、组件生命周期和现代工程方式不完全同频。你只要理解这些底层逻辑，维护时就不会乱改；该保留、该隔离、该迁移，也能判断得更准。
坑一：模块加载看着简单，实际影响全局
YUI().use() 表面是在加载几个模块，实际决定了这段代码能拿到哪些能力。项目里如果到处散落 use 调用，就会出现功能分散、依赖不透明的问题。新人改一个事件，以为只影响按钮，结果另一个模块初始化顺序被打乱。
避坑办法是先画依赖图，不用多高级，Excel 都行。页面用了哪些模块、入口文件在哪里、初始化顺序怎样，列出来之后再改。老项目最怕凭感觉动手，尤其是没有自动化测试的时候。
坑二：DOM封装会隐藏浏览器细节
Y.one、Y.all 把 DOM 操作包了一层，这在当年很香，因为能抹平浏览器差异。但现在维护时，你要知道它返回的是 YUI 的 Node 对象，不是原生 DOM 节点。很多报错都来自对象类型搞混。
比如原生节点有 addEventListener，YUI Node 常用 on；原生取内容用 textContent，YUI 可能用 getHTML、setHTML。两套 API 混着写不是不行，但每次转换都要明确。别在同一段逻辑里一会儿 YUI，一会儿原生，读代码的人会很痛苦。
坑三：组件生命周期别硬拆
YUI 的组件不是几行 DOM 拼接那么简单，通常有初始化、渲染、事件绑定、销毁等步骤。老系统里的 DataTable、Panel、Calendar 这类组件，可能还带自定义扩展。你直接删一段看似没用的初始化代码，很可能让后续事件失效。
我的经验是：改组件前先找 render、initializer、destructor、on 这些关键词，再看有没有插件扩展。要删也先注释验证，不要一刀切。越老的页面，越可能靠一段“没人敢动的代码”维持秩序。
坑四：迁移不是翻译API，而是切边界
很多人做 YUI避坑，第一反应是把 Y.one 翻译成 querySelector，把 on 翻译成 addEventListener。小功能可以这样，但迁移整个页面时，这只是表层动作。真正难的是状态在哪里、谁负责渲染、谁拥有 DOM。
靠谱的迁移方式是按业务边界切：一个弹窗、一个表单、一个列表，独立替换，输入输出固定。别边改 YUI 边引框架边重写接口，三件事叠一起，问题定位会直接爆炸。
最后：避坑的关键是少动、准动、留痕
YUI避坑的底层原则很朴素：少动不是偷懒，是降低未知风险；准动不是保守，是找到真正影响业务的点；留痕不是写作文，是让下一个维护者知道你为什么这么改。
如果你接手的是 YUI 老项目，先别急着嫌弃它。把版本锁住、依赖列清、页面分级、改动留记录，这四件事做好，项目会安静很多。老技术不可怕，不知道它怎么运转才可怕。
推荐阅读
常见问题
YUI避坑最先做什么？
先确认版本和模块入口，列出页面依赖。没搞清楚加载关系前，不建议直接改组件代码。
YUI的Node对象和原生DOM有什么区别？
YUI Node 是封装对象，使用 YUI 自己的 on、get、setHTML 等方法；原生 DOM 使用 addEventListener、textContent 等 API。
YUI迁移为什么容易出问题？
因为问题不只在 API 替换，还涉及初始化顺序、组件生命周期、DOM 所有权和业务状态边界。