转载

抛弃 jQuery,拥抱原生 JavaScript

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间,把所有代码中的 jQuery 移除。下面总结一下:

Why not jQuery

  • jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以 数据/状态 为中心的开发模式

应用复杂后,直接操作 DOM 意味着手动维护状态,当状态复杂后,变得不可控。React 以状态为中心,自动帮我们渲染出 DOM,同时通过高效的 DOM Diff 算法,也能保证性能。我们在 React 应用实践中也发现,大部分当你想直接操作 DOM 的时候,就意味着你可能做错了。

  • jQuery 不支持同构渲染

重构就是前后端运行同一份代码,后端也可以渲染出页面。由于 React 原生支持,变得非常热门。当我们在尝试做同构应用时,因为代码要运行在服务器端,但服务器端没有 DOM,所以引用 jQuery 就会报错。这也是必须要去除 jQuery 的原因。同时不但要去除 jQuery,也不能直接操作 DOM。

  • 原生 API 足够好用

首先我们必须承认 jQuery 设计的很优秀,非常易用。因些对于很多前端来说,写页面就是拿 jQuery 和一些插件拼一下。这也导致他们不懂原生 API。其实这几年浏览器更新很快,也借鉴了很多 jQuery 的 API,我们做替换时并没有遇到大问题。标准 API 因为设计时考虑因素更多

  • 差的浏览器已经淘汰的差不多了

If We Didn't Spend So Much on IE Support, We Could Be Taking Vacations on Mars

Christian Alfoni

我们的主打产品现在有千万用户,因为我们一直引导用户升级浏览器,上个月统计 IE 9 以下用户只占不到 3%。但为了这 3% 的用户我们前端开发却增加了很多工作量,也限制了我们升级我们的架构,因此放弃支持他们利大于弊。当然这要根据产品来定,比如这是百度统计的国内浏览器占有率,IE8 竟然还有 22%。有些产品可以为了保证用户体验,在旧的浏览器上投入很大成本,甚至做到了极致。其实我觉得产品更应该做的是 引导用户升级浏览器 。微软也宣布 2016年1月12号停止支持 IE 11 以下浏览器 ,继续使用旧浏览器就会有安全风险,我们更应该主动引导,只要产品有足够吸引力,大部分用户升级并不困难。

抛弃 jQuery,拥抱原生 JavaScript

数据来源 百度统计

下面是国际上 IE 占有率,IE8 已经跌出前 10,IE 11 比较多,还好支持他们并不难。

抛弃 jQuery,拥抱原生 JavaScript

数据来源 W3 Counter

如何移除 jQuery

1. 替换代码

移除 jQuery 可以很顺利,我们把整个过程详细整理了下并开源。

打开 https://github.com/oneuijs/You-Dont-Need-jQuery 查找替换即可。

同时我们简单封装了一些方法:

  • oui-dom-utils 来做选择器和样式相关
  • oui-dom-events 来做 Event,支持命名空间和事件代理

刚去了 jQuery 又引了新的库,这不是玩我吗??其实以上两个库很简单,只是常用方法的简单封装,建议你看一下代码。你当然可以不用。

以上的库都用于我们的生产环境,我们会长期维护,保证更新。

2. 旧浏览器自动跳转

代码替换后,当用户用旧浏览器打开时,你还要做一个跳转,把用户定位到提示页面,提示用户下载升级浏览器。IE9 以下浏览器都支持条件判断语句,可以在 </head> 标签结束前添加如下代码做自动跳转

<!--[if lte IE 9]>   <script>if (!/update/.htm/.test(location.href)) window.location = '//abc.com/update.htm'; </script> <![endif]-->

本文并不是强迫你一定要移除 jQuery,jQuery 为支持旧浏览器节省了很多成本。但条件成熟的情况下,使用原生 JavaScript 能同样保证开发效率,也可以给产品带来更好的性能,同时也能提高开发者水平。

正文到此结束
Loading...