小记 · 去 jQuery 项目

jopen 8年前
就在昨天 2015/12/09,团队协力把项目中所有的 jQuery 代码全部去除,完成了下线 jQuery 的里程碑。为了这个时刻,等了很久。

在项目进展中,团队沉淀了一个 oui-dom-utils 的工具集,和 You-Dont-Need-jQuery 的文档。万万没想到,这个记录沉淀的文档在短短几日内上了 Github Trend 总榜第一位,日关注数以每天 400 star 上涨,还收到世界各地的开发者的 PR 来翻译文档。截止现在已经支持七国语言,共 1500+ star,14 位世界各地的贡献者。

小记 · 去 jQuery 项目

为什么要做这件事

众所周知,jQuery 在前端领域做出了不可磨灭的贡献,尤其在 IE6-7 活跃在用户电脑的年代,它是时代的宠儿。它方便快捷地书写方式(链式),可以在短时间内完成一些交互功能。

但在这样的快捷下,有没有遇到过代码不断的累加,复杂得看不懂操作的逻辑,有没有发现大部分应用还是会加类似于 Class 的概念去管理应用代码。实际上,jQuery 只是一个库而已,并不是框架,他不能做很多事,也不应该做过多的事。


从 jQuery 的 API 上可以看到它主要是做 DOM 操作的简化,事件方法的简化,加上一些工具类,Ajax,Promise 等方法。对于一个库,承载这么多功能已经不是主流的做法。前端界如今更推崇小而美,功能单一的实现。

在拆分时,团队一起做了很多的选择,第一是跟随标准,第二跟随主流,比如在 DOM 操作上为了部分方法的复用,封装了 oui-dom-utils,大部分情况直接使用标准方法,事件方法为了加命名空间封装了 oui-event-utils,Ajax 上选择了 fetch(包含 polyfill),工具类选择了 lodash,Promise 方法直接写标准方法利用 babel 编译等。

事实上,我们还是保留了没法避免的 DOM 操作代码,用更简洁的方法去实现,这并不是轮子,只是一个更简单的方法集,任何掌握了前端基础的开发都可以完成。其中占比最大的就是计算元素位置和宽高,页面宽高,另一些就是兼容性的时候直接使用了 set style,将在未来 React 发展和项目过程中慢慢找到方案去除。总体上,满足了现在在 React 上使用时不得不用到的 DOM 方法。

结语

在关注数据与界面分离的诸多架构井喷的今天,从关注 DOM 操作便捷性到远离 DOM 操作顺应了前端发展的大潮。

项目已经结束,这件事还是会继续做下去,为了让 React 开发者,包括其它前端开发者更好的关注数据与界面分离,我们要把去 jQuery 当成一件前端的『历史事件』去做。但就如同上文如说,DOM 操作不可避免,也会长期存在,开发者要做的是尽力简化,甚至回避它们。

文档中会完善使用方法及测试,并加入继续更新的计划,欢迎更多前端开发者加入。

最后,感谢团队一起付出的努力。

PS. 后续会有深入 Redux 文章系列,以源码解读到深度实践的一些文章发布,文章都是利用业余时间完成,也请多多支持,共同进步。

PSS. 强调一下,oui-dom-utils 并不是 jQuery 的轮子,请先看明白写的内容。我也不推荐你拿来用,如果你一定需要兼容很多浏览器,那么 jQuery 适合你,如果不需要,能用原生方法实现的都用原生方法实现,这也是写 You-Dont-Need-jQuery 的目的。

来自:http://zhuanlan.zhihu.com/purerender/20405900