原文链接:http://blog.garstasio.com/you-dont-need-jquery/
我的Blog:http://cabbit.me/you-dont-need-jquery/why-not/

你不再需要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 / 编程巨星的唯一秘诀

下一节

抛弃jQuery:DOM API之选择元素

题图来自:http://blog.exitquote.com/?p=31

抛弃jQuery:Why?的更多相关文章

  1. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  2. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  3. 抛弃jQuery 深入原生的JavaScript

    虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...

  4. 抛弃jQuery,拥抱原生JavaScript

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  5. [转]抛弃jQuery,使用原生JavaScript

    原文链接 Document Ready 事件 在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() { // ...

  6. 彻底抛弃 jQuery ,不然还留着过年?

    我以前很喜欢 jQuery,而且说实话,我是先学jQuery,再学 JavaScript 的.所以我写这篇文章有点像是在背叛 jQuery. 我知道,关于为什么不应该用 jQuery 的文章已经汗牛充 ...

  7. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  8. 【翻译】jQuery是有害的

    原文:http://lea.verou.me/2015/04/jquery-considered-harmful/**(第一次翻译,望大家多批评指正) jQuery是有害的 嗨,我总想写一个“X”是有 ...

  9. [转]如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?

    导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...

随机推荐

  1. 设计爬虫Hawk背后的故事

    本文写于圣诞节北京下午慵懒的午后.本文偏技术向,不过应该大部分人能看懂. 五年之痒 2016年,能记入个人年终总结的事情没几件,其中一个便是开源了Hawk.我花不少时间优化和推广它,得到的评价还算比较 ...

  2. redux-amrc:用更少的代码发起异步 action

    很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...

  3. Castle Core 4.0.0 alpha001发布

    时隔一年多以后Castle 项目又开始活跃,最近刚发布了Castle Core 4.0.0 的alpha版本, https://github.com/castleproject/Core/releas ...

  4. C# 利用性能计数器监控网络状态

    本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...

  5. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  6. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  7. BI分析受阻?FineBI推出SPA螺旋式分析新功能!

    过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...

  8. Linux设备管理(三)_总线设备的挂接

    扒完了字符设备,我们来看看平台总线设备,平台总线是Linux中的一种虚拟总线,我们知道,总线+设备+驱动是Linux驱动模型的三大组件,设计这样的模型就是将驱动代码和设备信息相分离,对于稍微复杂一点的 ...

  9. Unity C#最佳实践(上)

    本文为<effective c#>的读书笔记,此书类似于大名鼎鼎的<effective c++>,是入门后提高水平的进阶读物,此书提出了50个改进c#代码的原则,但是由于主要针 ...

  10. 将MPM雪模拟移植到Maya

    同事实现了一个迪士尼的MPM雪模拟论文,我将其移植到Maya中 论文题目是 A material point method for snow simulation 代码在这里: https://git ...