抛弃jQuery,拥抱原生JavaScript

Why not jQuery

1. 模式变革

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

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

2. 不支持同构渲染

重构就是前后端运行同一份代码,后端也可以渲染出页面,这对 SEO 要求高的场景非常合适。由于 React 等流行框架天然支持,已经具有可行性。当我们在尝试把现有应用改成同构时,因为代码要运行在服务器端,但服务器端没有 DOM,所以引用 jQuery 就会报错。这也是要移除 jQuery 的迫切原因。同时不但要移除 jQuery,在很多场合也要避免直接操作 DOM。

3. 原生 API 足够好用

由于浏览器的历史原因,曾经的前端开发为了兼容不同浏览器怪癖,需要增加很多成本。jQuery 由于提供了非常易用的 API,屏蔽了浏览器差异,极大地提高了开发效率。这也导致很多前端只懂 jQuery。其实这几年浏览器更新很快,也借鉴了很多 jQuery 的 API,如 querySelector,querySelectorAll 和 jQuery 选择器同样好用,而且性能更优。

4. 性能

前端开发一般不需要考虑性能问题,但你想在性能上追求极致的话,一定要知道 jQuery 性能很差。原生 API 选择器相比 jQuery 丰富很多,如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍!

测试链接:http://jsperf.com/jquery-vs-native-api

5. 时机成熟

差的浏览器(IE)已经淘汰的差不多了。

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 对 API 查找替换即可。

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

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 为支持旧浏览器节省了很多成本。但条件成熟的情况下,移除 jQuery,参照 You Don’t Need jQuery 拥抱原生 JavaScript 能同样保证开发效率,也可以给产品带来更好的性能,同时也能提高开发者水平。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-05-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

1570
来自专栏编程微刊

通用的layui框架系统管理后台模板

公司又要开始做新的项目了,这次的项目又是后台管理系统,老板说,之前的后台管理系统都是差不多的,这一次我们换个框架吧,然后抄了一下竞争公司的模板,给我发来了一张原...

9362
来自专栏前端儿

【转】不同内核浏览器的差异以及浏览器渲染简介

浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(...

1661
来自专栏张戈的专栏

关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

8176
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

2068
来自专栏互联网杂技

20个为前端开发者准备的文档和指南7

1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 ? 2. The HT...

3725
来自专栏IMWeb前端团队

切图工具/插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 切图工具 切图插件 这里的插件都是ps的插件,比较小巧,易于安装和适...

3718
来自专栏SEO

「知识」如何让蜘蛛与用户了解我们的内容?

2425
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

17K15
来自专栏浮生的专栏

在博客或者论坛插入网易云音乐的技巧

3.问题来了,很多直接复制过去无法直接使用(小小加工即可) 以flash代码为例子

4529

扫码关注云+社区

领取腾讯云代金券