先说结论:能用,但别当新项目主力
我这次实测的 YUI 指 Yahoo User Interface Library,不是某个同名 App。它的核心思路是模块化加载:你不是直接写一堆全局函数,而是通过 YUI().use() 把 node、event、io 这些模块拉进来再干活。对维护老系统很友好,因为很多企业后台、老 CMS、内部管理页还会见到它。
真实感受是:文档味道很老派,但逻辑清楚;API 不花哨,但够稳。最大的问题不是“不会写”,而是生态停更太久。你要是问 YUI怎么用,我的建议是:用于读懂旧代码、做小范围修补可以;从零开新项目,别硬上。
第一步:加载方式别搞错
YUI 3 的典型写法是先引入 yui-min.js,然后写 YUI().use('node', function (Y) { ... })。这里的 Y 就像一个工具入口,选择 DOM、绑定事件、发 Ajax 都从它走。很多新手一上来找 $,结果发现不是 jQuery,那就跑偏了。
我本地测的时候,最省事的方式是用已有项目里的本地静态文件,不建议直接依赖老 CDN。原因很现实:老 CDN 链接可能还能打开,也可能哪天抽风。遗留项目要稳,先把依赖固定住,比追求“在线最新”更靠谱。
第二步:选节点像写轻量版 jQuery
YUI 里常用 Y.one('#id') 选单个节点,Y.all('.item') 选一组节点。比如你想改按钮文字,用 Y.one('#submit').setHTML('保存中') 就能处理。它的链式体验没有 jQuery 顺手,但读起来不费劲。
我踩到的小细节是:Y.one 找不到节点会返回 null,后面直接 .on 或 .setHTML 就会报错。维护旧页面时,最好先判空。很多后台页面是多模板共用脚本,同一段 JS 不一定每个页面都有目标元素。
第三步:事件和请求够用就行
绑定点击事件通常写成 Y.one('#btn').on('click', function (e) { e.preventDefault(); ... })。事件对象、阻止默认行为、取当前节点这些都能做,只是命名和现代框架不一样。你别拿 React 的思路套它,YUI 更像“增强页面交互”的工具箱。
请求模块用 io,写法比 fetch 啰嗦一点,但在老浏览器兼容时代很有意义。现在维护时,我会优先保持原项目写法,不会为了看起来现代就把 io 全换掉。小改动少引风险,这点在老系统里特别值钱。
最后:用 YUI 的正确姿势
YUI怎么用,核心就三句话:先确认版本,再按模块加载,最后小步修改。它不适合拿来炫技,也不适合重构成“半新不旧”的四不像。真正懂行的处理方式,是尊重它原来的工程边界。
如果你只是接手一个老项目,先把页面里用了哪些模块列出来,再从节点、事件、请求三块读起。别急着全量替换,先让业务跑稳。YUI 的价值不在新,而在你能不能把旧系统安全地维护下去。