【翻译】jQuery是有害的

原文：http://lea.verou.me/2015/04/jquery-considered-harmful/**
（第一次翻译，望你们多批评指正）

 jQuery是有害的

　　嗨，我总想写一个“X”是有害的帖子。

在开始写前，我想说jquery 很大程度上促进了前端的发展。它让开发人员实现了之前不敢想象的事情，并促使浏览器开发商作他们原本就该作的事。（没有jquery咱们估计如今还不可能用到document.querySelectorAll）对于那些不支持现有新技术的IE8及其如下浏览器jQuery依然颇有必要。

　　但不管怎么说那些低端浏览器毕竟是少数，不少开发人员不须要支持只占很小份额的老版本浏览器。别忘了还有那些非专业开发人员：学生和研究人员，他们不只不须要支持低版本浏览器，并且只需一个浏览器支持就够了。如您所愿，在学术界人人都津津乐道于使用网络开放平台的新技术，对吧？然而我却从未见过jQuery在业界这么突出。为何？由于众所周知，他们没有时间或兴趣追随网络开放平台的最新动态。他们不知道他们须要什么样的jquery，致使他们只是单纯的使用jquery。然而这并非我抛弃jquery的惟一理由。

是的，你可能真的不须要它

　　我固然不是第一个指出jQuery的依赖程度影响你原生js的能力，所以我不想浪费时间重复别人以前所写，你只需访问如下连接：

　　你可能不须要jquery

　　你不须要jquery！

　　你真的须要jquery吗？

　　脱离jquery编写javascript的10个技巧

...还有不少，你只需谷歌一下“you don’t need jQuery”你将发现更多。我也再也不花时间赘述jQuery文件大小以及原生js方法有多高效，这些我以前都讲过。今天，我想说一个不常被说起的要点。

 

但那并非放弃它的最大缘由

　　为了不扩展本地元素的原型，jquery使用它本身的包装对象，扩展本地对象在过去是一个庞大的 不，不。不只由于潜在冲突，还有低版本IE浏览器内存泄漏。所以当你运行$(“div”)时返回的并非一个元素引用或一个节点集合而是一个jQuery对象。这意味着对于，jquery对象的实现方式彻底不一样于一个DOM元素的引用、一个数组或其余类型的节点列表。然而，对于这些本地对象，就像jquery试图提取出他们同样，你总要不得不处理他们，哪怕他们包装在$()中。例如：当回掉函数经过jQuery的bind()方法调用时上下文就是一个对HTML元素的引用而不是jquery的一组对象。更别提你的代码仍是多源的，有些想固然是jQuery代码，有些则不是，最终代码总会混淆着jQuery对象、本地对象、节点列表，而这正是地狱的开始。

　　若是开发人员遵循一个命名规则：用变量包裹jQuery对象（我认为在变量名头部添加一个$是常见的一种）和本地元素，这将再也不是个问题（但人们老是记不住规则，这里就先假定一个理想世界）然而，现实中并无那么多规则被遵照，结果就是对于不熟悉代码的人来讲代码变得极其难懂。如今每一次编写代码都须要不少尝试和错误（“哦！这不是一个jQuery对象，我要用$()来包裹它”或者“哦！这不是一个元素，我要用[0]来获取其中的元素”） 为了不混淆，开发人员编码时常防护性的用$()包裹全部东西，所以总览代码，相同的变量通过$()的多重包裹，一样的缘由，这会变得很难重构其余jQuery代码，你彻底被困住了。

　　即便遵循了命名规则，也不能只用在jQuery对象上，你常常须要用到本地DOM方法或调用不属于jQuery而来自其于他脚本中的函数。很快，屡次折腾jQuery对象弄获得处都是，把你的代码搞的很乱。

　　除此以外，当你往代码库中添加代码的时候，你每每会用$()来包裹每一个元素或节点列表。由于你不知道你获得了什么样的输入。因此被困住的不只仅是你本身，你之后为同一个代码库所写的代码也被困住了。

　　得到任何带有jQuery依赖性的随机脚本，你没有本身写并试图重构它，这样它就不须要jQuery。我敢说，你会发现你的主要问题将不会是如何转换功能使用本地APIs, 而是理解这究竟是怎么一回事。

 

一个通往原生JS的可靠途径

　　固然，如今许多函数库须要jQuery，就像最近我在推特上所说的那样，若是你回避jQuery那么感受你像是个数码素食者。固然，这并不意味着你必需要使用它。当好的非jQuery代替品可用的时候，函数库也将会被取代。

　　一样的，大多数函数库的写法不须要用$做为jQuery的别名。用jQuery.noConflict()方法可更改默认的$而且你也可改为其余你看着顺眼的符号，例如，受命令行API的启发，我常常定义这些帮助函数：

//返回匹配到expr的第一个元素
//查询范围限制在container的后代中
function $(expr, container) { 
    return typeof expr === "string"? (container || document).querySelector(expr) : expr || null;
}

//以数组的形式返回全部匹配到的expr
//查询范围限制在container的后代中
function $$(expr, container) { 
    return [].slice.call((container || document).querySelectorAll(expr));
}

 

　　此外，我认为在你每次敲出jQuery来代替$时你会考虑若是真的不须要，是否还要这么过分的使用它，或许我猜错了 。

同时，若是你喜欢jquery API 但又不喜欢他的臃肿，那么你能够考虑使用Zepto。

很明显，咱们的标题显而易见带有开玩笑的意味，可是，这是互联网，没有什么是显而易见的。因此在这里我很清楚Eric的经典文章会很反对这种标题。