资讯专栏INFORMATION COLUMN

抛弃jQuery,拥抱原生JavaScript

testbird / 1408人阅读

摘要:数据来源百度统计下面是国际上占有率,已经跌出前,比较多,还好支持他们并不难。

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

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,如 querySelectorquerySelectorAll 和 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 以下浏览器都支持条件判断语句,可以在 标签结束前添加如下代码做自动跳转

总结

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

原发于我的博客,原文地址:https://github.com/camsong/blog/issues/4

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78220.html

相关文章

  • [译]JSX:硬币的另一面

    摘要:它不过是硬币的另一面。因此,既然我们能够接受与通过这种方式混合在一块儿,那么是时候让介入并向我们展示硬币的另一面了第三阶段的并不是一个激进的改变,是因为我们这个行业从一开始就注定和应该是在一起的。 React框架刚刚发布的时候,JSX颠覆了很多人的想法。习惯了HTML标签与JavaScript代码分离的前端工程师们,看到JSX大概都会不禁吐槽:这些奇怪的标签出现在JavaScript里...

    mudiyouyou 评论0 收藏0
  • js深浅复制

    摘要:总结综上所述,数组的深拷贝比较简单,方法没有什么争议,对象的深拷贝,比较好的方法是用的方法实现,或者递归实现,比较简单的深复制可以使用实现参考资料知乎中的深拷贝和浅拷贝深入剖析的深复制 深浅复制对比 因为JavaScript存储对象都是存地址的,所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是,这有点类似数据双向绑定,改变了其中一方的内容,都是在原来的内存基础上做...

    Apollo 评论0 收藏0
  • [译] 咋才能忘掉jQuery然后用原生的js apis 呢

    摘要:原文地址已经准备好了,可能你还没有准备好拥抱它。那为啥不用呢。。浏览这些轻量的找一个服务于你特殊需求的,但是首先你必须确信一点原生的足够满足你实现你的需求 原文地址 javascript已经准备好了,可能你还没有准备好拥抱它。那为啥不用jquery呢。。因为它慢啊。而且体积还不小,你的网站可能真的不是特别需要, Select elements // jQuery var els = $...

    rose 评论0 收藏0
  • JavaScript装逼指南

    摘要:构造函数很多教程都告诉我们,不要直接用内置对象的构造函数来创建基本变量,例如的写法就应该用的写法来取代。但是,构造函数注意是大写的有点特别。构造函数接受的参数中,第一个是要传入的参数名,第二个是函数内的代码用字符串来表示。 如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢?...

    oneasp 评论0 收藏0
  • 您的四月份前端补给包已到,请查收~

    摘要:版本发布月日,官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力,并同时发现业务中的问题,跨端推进解决,这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报,聚焦业界新视界;前端领域急速发展的节奏...

    wushuiyong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<