V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lampbrother
V2EX  ›  Java

jQuery 3.0 最终版发布,十大新特性眼前一亮

  •  
  •   lampbrother · 2016-07-13 15:21:32 +08:00 · 2515 次点击
    这是一个创建于 3064 天前的主题,其中的信息可能已经有所发展或是发生改变。

    jQuery 3.0 在日前发布了最终的全新版本。从 2014 年 10 月, jQuery 团队对这个主要大版本进行维护开始, web 开发者社区便一直在期待着这一刻的到来,终于在 2016 年 6 月他们迎来了这一个最终版 www.lampbrother.net 。 通过 jQuery 3.0 的版本更新说明,我们看到了一个保持着向后兼容的更轻便,更快速的 jQuery 。在本文中,我们将介绍一些令人眼前一亮的 jQuery 3.0 全新特性。 开始前的说明 如果你想要下载 jQuery 3.0 进行亲自实验,可以通过该页面进行下载。另外,升级指南和源代码也值得你一看。 如果你想要测试一下你的项目如何在 jQuery 3.0 中工作的,你可以尝试通过 jQuery 迁移插件来识别代码的兼容性问题,你也可以查看 jQuery 未来发展的时间表。

    1. 移除旧的 IE 工作区 新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于 IE9 版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持 IE6-8 ,你必须用回 1.12 版本,因为甚至是 2.X 版本都无法完整支持早于 IE9 的浏览器。 注意:在 jQuery 3 中还弃用了一些其它的功能。截止到 2016 年 6 月,升级指南还没有提供一个对于弃用功能的分组整理。因此,你如果想要了解弃用功能,可以通过 ctrl+f 键来进行搜索。

    2. jQuery 3.0 运行在 Strict Mode 下 大多数支持 jQuery 3 的浏览器都支持 strict mode ,而在本次更新中对此进行了规定。

    虽然 jQuery 3 是写在 strict mode 中的,但是你需要了解的是你的代码并不需要运行在 strict mode 中,因此如果你想要把以前的代码迁移到 jQuery 3 ,你不需要对已存在的 jQuery 代码进行重写。 Strict 和 non-strict mode 的 JavaScript 代码可以和谐共存。 这里有一些例外:某些版本的 ASP.NET ,因为 strict mode 的缘故,无法与 jQuery 3 兼容,

    1. 引进 for...of 循环 jQuery 3 支持 for...of 语句,这是由 ECMAScript 6 中新引进的一种 for 循环语句。这提供了对 Arrays , Maps 和 Sets 这样的可迭代对象一种更直接的遍历方法。 在 jQuery 中, for...of 循环可以取代以前的$.each(...)语法,并且更容易通过 jQuery 的元素集合进行循环。 注意: for...of 只能在支持 ECMAScript 6 的环境下或者使用 Babel 这样的 JavaScript 编译器下工作。

    2. 动画方面采用新的 API jQuery 3 使用 requestAnimationFrame() API 来执行动画,使动画运行得更加顺畅、快速。新的 API 只用于支持它的浏览器,对于那些更老的浏览器(如 IE9 ) jQuery 使用先前的 API 来作为显示动画的后备方案。

    3. 对包含特殊含义的字符串提供转义的新方法 新的 jQuery.escapeSelector()提供了对在 CSS 中存在特殊含义的字符串或字符进行转义的方法,该方法可使这些字符串或字符能够继续用于 jQuery 选择器中,而无需对那些无法进行正确理解的 JavaScript 解释器进行转义。 这个示例可以让你更好的了解这个全新的方法: 举个例子,页面中某个 ID 为“ abc.def ”的元素由于选择器将其解析为 ID 为“ abc ”且包含一个名为“ def ”的类的对象,而无法被$( "#abc.def" )选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。 我无法确定发生中情况的频率,但是假如你碰到过这种类似的情况,这无疑给了你一个解决该问题的简单方法。

    4. 类操作方法支持 SVG 不幸的是, jQuery 3 现在还无法完整的支持 SVG ,但是对于操作 CSS 类名称的 jQuery 方法,如.addClass()和.hasClass()现在可以将 SVG 文档作为目标。这意味着你可以修改(添加、删除、切换)或者查找 SVG (可缩放矢量图形)下的 jQuery 类,然后使用 CSS 的类样式。

    5. 延迟对象现在与 JS Promises 兼容 JavaScript Promises ,用于异步计算的对象,现在在 ECMAScript 6 中已经被标准化;它们的运行状况和特性的详细说明参见 Promises/A+标准。 在 jQuery 3 中,延迟对象已经与新的 Promises/A+标准相兼容,延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。 新的特性改变了异步回调函数执行过程, Promises 允许开发者编写在逻辑上与同步代码更接近的异步代码。

    6. jQuery.when()对于多种参数的不同解读 $.when()提供了执行回调函数的一种方法,它成为了 jQuery 1.5 之后的一部分。这个方法非常灵活,它适用于零参数,也适用于一个或者多个作为参数的对象。 jQuery 3 改变了当包含$.then()方法时对$.when()中参数的解读方法,你可以对$.when()进行额外的参数回调。 在 jQuery 3 中,如果你在$.when()中的 then()方法内增加一个输入参数,该参数将会被解释成一个可与 Promise 兼容的"thenable"。 这意味着 $.when 方法能够接收更加宽广的输入范围,比如原生的 ES6 Promises 和 Bluebird Promises ,这也使得编写更复杂的异步回调成为了可能。

    7. 新的显示 /隐藏逻辑 为了增加响应式设计的兼容性,与元素显示和隐藏的代码在 jQuery 3 中进行了更新。 从现在开始,.show()、.hide()和.toggle()方法将会以内联样式为重点取代以前的计算样式,这种方式能够更尊重样式列表的改变。 新的代码尽可能的尊重样式列表中所呈现的数值,这意味着 CSS 规则可根据事件(如设备重新定位和窗口尺寸调整)进行动态改变。 这个说明文件申明了最重要的结果就是: “作为结果,断开连接的元素除非指定了内联 display: none ,否则将不再认定为是隐藏的。因此,在 jQuery 3.0 中,.toggle()不再对断开连接元素与已连接元素进行区分。” 如果你想要更好的了解关于全新的显示 /隐藏逻辑,这个 Github discussion 会对你有帮助。 jQuery 开发者还发布了 Google 文档表来展示在不同用例下新规则的运转。

    8. 对于防止 XSS 攻击的额外保护 jQuery 3 增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击,它需要开发者指定$.ajax()和$.get()方法中的选项为 dataType: "script"。 换言之,如果你想要执行跨站点的脚本请求,你必须在这些方法中作出这样的声明。

    新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getScript()方法,因为它明确地设置了 dataType: "script"选项。

    1 条回复    2016-07-15 15:53:03 +08:00
    phx13ye
        1
    phx13ye  
       2016-07-15 15:53:03 +08:00
    走错片场啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4915 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 03:58 · PVG 11:58 · LAX 19:58 · JFK 22:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.