文档章节

前端UI攻城狮 你们该抛弃jQuery了

前端老手
 前端老手
发布于 09/21 17:17
字数 1653
阅读 29
收藏 0
 

你不再需要jQuery!

Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。

对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了,开发Web应用已经几乎离不开它。曾经在不同浏览器里Web API的实现有很大区别,而jQuery帮我抹平了这些,所以我很少再用document.getElementById这样的原生JavaScript函数。依赖jQuery衍生出了无数极其优秀的类库,从完美的下拉菜单、复杂的表单验证到这几年流行的瀑布流布局,这些都让我的工作变得简单多了。

我一直坚信jQuery是开发JavaScript工程必须的,2012年,当时我需要开发维护一个跨浏览器的大文件上传组件时,我的第一直觉就是我要用jQuery重写已有的代码,因为我已经下意识把jQuery当做简化工作的一部分标准。但是社区的用户并不希望我这样做——他们不想引入额外的第三方类库,就这样我(被迫/不情愿)的重新开始学习原生浏览器API。出于意料的是,我发现不再依赖jQuery之后的工作比我想象的要简单得多!我曾经以为没有jQuery我就不会写JavaScript代码了,但是现在我发现jQuery并不是必须的!

拐杖?陷阱?

曾几何时我第一次使用JavaScript开发大型项目,jQuery就同步进入了我的工作,事实上我是从见识了无比强大的jQuery选择符系统之后才开始喜欢上Web开发的。我并没有深入学过“真正的”浏览器原生API(document.getElementById ?那时觉得看着好丑!),在被迫学习原生API之前,事实上我也不完全清楚怎么直接访问并操作DOM元素——jQuery全都帮我做了。jQuery已经成了我的拐杖,当初用它是因为他能让我走的更好,但是后来我离开他已经不会走路了

我发现我掉进了一个陷阱,一个很多Web开发新手都掉进的陷阱。我本应该先花时间去理解JavaScript本身以及浏览器提供的API,但是我却因为jQuery提供的蜜罐而止步不前。逻辑上我们应该这样系统的学习JavaScript开发:

  1. 学习JavaScript语言
  2. 学习浏览器API
  3. 学习jQuery(或者其他框架、类库,实际项目中会大量用到的)

译者注:事实上这也是JavaScript的圣经犀牛书JavaScript: The Definitive Guide)的撰写顺序。可实际上包括译者在内,很多Web开发新手看到"第二部分:客户端Javascript"的时候就直接略过了,毕竟那时觉得和浏览器API比起来,jQuery看上去是那么优雅。

工程实践中,很多Web开发新手(比如我)是从第3步开始的,完全忽略了1和2的存在,这是完全可以理解的,因为学会了jQuery(或者其他类库)我们就已经可以动手开始写代码了~ 但是如果你不清楚jQuery的背后到底发生了什么,就一定会在未来的开发中遇到问题。你也一定会遇到不能使用jQuery的项目,比如流行的Angular.js这样的框架,初学者就最好删掉jQuery类库,从头开始学JavaScript。

跨浏览器支持

支持jQuery最常见的理由中最常见的一条,就是他修复了“不一致的DOM API”。这没错,但事实上不一致的DOM API只有在IE6/7及更早的版本中才大量存在。浏览器发展到2014年,非现代浏览器的使用比例已经越来越少。jQuery开发组自身也意识到这个问题,逐渐开始削减对这部分浏览器的支持,从jQuery 3.0开始,jQuery的版本分化支持所有浏览器的完整版只支持现代浏览器的精简版。我们需要面对的DOM API已经没有那么糟糕,基本的DOM元素创建、遍历和操作已经统一,至少在所有的现代浏览器中是这样。

从IE8开始,浏览器API开始逐渐标准、稳定,当然从细节上,IE10及早期的Safari/WebKit引擎中的某些实现确实不完全相同,但是这些不同可以逐例分析,并且使用更小、更专用的类库来抹平。重点是:jQuery不是银弹,不能解决脚本中的所有跨浏览器问题,我们可以用更小、更专用且可控的方式来抹平这些浏览器的差异。

JavaScript

另一个支持jQuery的常见理由是它弥补了一些JavaScript自身的缺陷,比如不方便的循环遍历、复杂的DOM访问等等。使用了第三方类库(jQuery或Underscore等)之后,循环遍历变得比原来容易多了。这个理由曾经是正确的,但是现在JavaScript本身也在进化,forEach、Object.keys()等函数的支持也很普遍了。曾经我很依赖$.inArray()函数,但是Array.prototype.indexOf()函数也早就是ECMA Script 5的一部分。类似的例子还有很多,后面我们可以在专题中慢慢探索。

需要马上抛弃jQuery么?

当然不是,如果jQuery使你的工作变得足够简单,如果你足够熟悉jQuery是如何工作的,接着使用jQuery没有一点儿问题。这个系列的文章是想告诉读者,我们可以使用原生的浏览器API完成需要的工作,而不需要引入庞大且不完全需要的类库。另外多了解jQuery本身是如何工作的总是没有坏处。

译者注:

The better you understand what you are doing, the better you will do it.
对所做的事情理解越深,你就会做的越好。
——引自 The Singular Secret of the Rockstar Programmer / 编程巨星的唯一秘诀

本文转载自:https://www.mk2048.com/blog/blog.php?id=2hia01c1j

前端老手
粉丝 10
博文 612
码字总数 0
作品 0
卢湾
技术主管
私信 提问
求进步

求编了多年程序的 攻城狮 们,可以给一个刚入职新手一点建议吗,如果做前端开发,jquery或者js技能怎么去提升

微臣
2013/01/23
460
5
手把手教你怎么写jQuery插件

[原创作品]手把手教你怎么写jQuery插件   这次随笔,向大家介绍如何编写jQuery插件。啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长。点击左边我头像下边的“加入qq群...

什么是程序员
2015/07/08
515
2
红薯微剧场 | 开源众包发包记第一集 —— 前端篇

开源众包发包记 ---玩转众包 第一集 巧引外援、顺度难关---前端开发项目篇 丁酉年11月,北京的天气已经逐渐寒凉,部分办公司的灯光已熄灭,办公室的窗户上印衬着佳佳略显倦怠的容颜。虽然小风...

王练
2018/06/07
2.2K
4
基于jquery开发的UI框架有哪些

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是...

UIleader
2017/09/20
0
0
10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地...

k_k_anna
2015/03/12
592
0

没有更多内容

加载失败,请刷新页面

加载更多

75、GridFS

GridFS是MongoDB提供的用于持久化存储文件的模块,CMS使用Mongo DB存储数据,使用FGridFS可以快速集成开发。 工作原理: 在GridFS存储文件是将文件分块存储,文件会按照256KB的大小分割成多个...

lianbang_W
59分钟前
4
0
js bind 绑定this指向

本文转载于:专业的前端网站➱js bind 绑定this指向 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>bind函数绑定this指向......

前端老手
今天
4
0
CentOS Linux 7上将ISO映像文件写成可启动U盘

如今,电脑基本上都支持U盘启动,所以,可以将ISO文件写到U盘上,用来启动并安装操作系统。 我想将一个CentOS Linux 7的ISO映像文件写到U盘上,在CentOS Linux 7操作系统上,执行如下命令: ...

大别阿郎
今天
4
0
深入vue-公司分享ppt

组件注册 全局注册 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({/*...*/})) 注册组件,传入一个选项对象(自动调用Vue.extend) Vue.component('my-comp...

莫西摩西
今天
4
0
gitlab重置管理员密码

登录gitlab服务器 [root@localhost bin]# sudo gitlab-rails console productionLoading production environment (Rails 5.2.3)irb(main):001:0> u = User.where(email: 'admin@example.co......

King华仔o0
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部