【翻译】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的经典文章会很反对这种标题。

时间: 2024-12-29 11:32:55

【翻译】jQuery是有害的的相关文章

基于jQuery.i18n.properties实现前端网站语言多版本

我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.properties文件对JavaScript进行国际化.jQuery.i18n.properties插件首先加载默认的资源文件(strings.properties),然后加载针对特定语言环境的资源文件(strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效

[javascript] jQuery系列之目录汇总

最近一个月写了些关于jQuery的文章,谢谢大家的支持.文章仅我个人观点,也许有不对的地方,请指出.这个系列还在更新中 一:jQuery基础系列: jQuery温习篇---强大的JQuery选择器 jQuery之工具函数 jQuery之筛选函数 jQuery1.4.2新特性(翻译) jQuery Ajax 回顾 jQuery 1.4 版本的十五个新特性-转载 二:jQuery插件系列: jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacem

从零开始学习jQuery (五) 事件与事件对象

原文:从零开始学习jQuery (五) 事件与事件对象 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuer

基于jQuery.i18n.propertieschajian实现前端页面国际化

一.简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization,又称 i18n,"i"为单词的第一个字母,"18"为"i"和"n"之间单词的个数,而"n"代表这个单词的最后一个字母.在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程. jQuery.i18n.properties 是一款轻量级的 j

Golang 网络爬虫框架gocolly/colly 二 jQuery selector

Golang 网络爬虫框架gocolly/colly 二 jQuery selector colly框架依赖goquery库,goquery将jQuery的语法和特性引入到了go语言中.如果要灵活自如地采集数据,首先要了解jQuery选择器.以下内容是翻译jQuery官方网站 <Category: Selectors>章节内容: Category: Selectors Borrowing from CSS 1–3, and then adding its own, jQuery offers

使用jQuery集成Google翻译

利用jQuery,轻松将google翻译集成到你的web应用中. 1. [代码][JavaScript]代码     ?1<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>?2 [代码]LoadScript,设置路径     ??1LoadScript(scriptPath + "jQuery-BlockUI.js");2Lo

网页标签功能插: jQuery tags input 翻译api

看名字应该知道是干嘛用了吧. 这种规格标签,因为在写一个后台,用到这种场景,vuejs又没什么可用的,所以这种交互性极强的 ,还是离不开jquery啊. 后悔没用react 开发, 结合ant 里面插件都有.唉,多说无用 ,.我们来看下吧 vuejs 我自己写了好多 组件,到时我会开源  github上去 转自:jQuery Tags Input Plugin(添加/删除标签插件) 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autoc

react与jQuery对比,有空的时候再翻译一下

参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ Target Audience: People Who Know Just Enough jQuery to Get by Before I begin, I'd like to clarify who my target audience is. Zed Shaw, the a

【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出.这是一个十分有趣的效果. 我们使用无序列表来组织缩略图和描述遮罩层: <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://dribbble.com/shots/