抛弃 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 以下浏览器 ，继续使用旧浏览器就会有安全风险，我们更应该主动引导，只要产品有足够吸引力，大部分用户升级并不困难。
数据来源 百度统计
下面是国际上 IE 占有率，IE8 已经跌出前 10，IE 11 比较多，还好支持他们并不难。
数据来源 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 能同样保证开发效率，也可以给产品带来更好的性能，同时也能提高开发者水平。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
