jQuery开发手册 jQuery 3.0的更新内容浅析
沉沙 2018-07-18 来源 : 阅读 231 评论 0

摘要:jQuery,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

jQuery,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。

 显示和隐藏

主要的改变是函数将如何工作的。而且有很好的理由这样做。在早些实现上,hide() 函数设置 css 属性为“display:none”,show() 函数是清除这个属性。但是这样做有些混乱。让我们看看几个例子:

1. 如果当 show() 函数尝试设置一个节点为“display:block”而在另外一个样式表里实现了“display:inline”属性,这将开始破坏代码。

2. 当我们为媒质处理响应式网页设计时(RWD),我们也许会用“display”或者“visibility”改变节点的可见性。这可能会影响“show()”和“hide()”函数。

除了这些,还有很多 JQuery 团队不得不去修复的其它问题。这导致了复杂的实现和性能问题,因此他们迁移到一个简单的模型。

今后,如果你设置“display:none”和使用“show()”,“slideDown()”,“fadeIn()”或者类似的方法去显示节点,它不会有效。更好的方法是使用“addClass()”和“removeClass()”控制显示。或者可以在“ready()”调用的时候在元素上调用“hide()”。

迅速举个例子:

01

<!DOCTYPE HTML><html>

02

    <head>

03

    <style>

04

        .invisible{

05

            display: none;

06

        }

07

        .visible{

08

            background-color: deepskyblue;

09

            display:block;

10

        }

11

    </style>

12

    <script src="jquery-3.0.0-alpha1.js"></script>

13

    <script>

14

        $(document).ready(function(){

15

            $("#div1").addClass("invisible");

16

            $("#toggle").click(function(){

17

                $("#div1").removeClass("visible");

18

                $("#div1").addClass("invisible");

19

            });

20

        });

21

    </script>

22

    <title>Control Visibility</title>

23

    </head>

24

    <body>

25

        <p>Hello!</p>

26

        <div id="div1">Can you see this?</div>

27

        <button id="toggle">Click me</button>

28

    </body>   </html>

.data() Key 的命名规则

jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字,该数字将不再参与转换。思考下面的例子:

使用 jQuery 2.1.4:

控制台窗口不显示对象。

使用 jQuery 3.0.0:

由于现在数字不会参与转换为骆驼拼写法,key 被转换成了 foo-42-name。因此,我们得到了控制台中的输出。这个 fiddle 的网址是 http://jsfiddle.net/nWCKt/25/。你可以更改 jQuery 的版本来观察变化。

同样,如果我们想要不带任何参数地使用 data() 显示所有的数据,如果 data-* 属性的 key 名在连字符(-)后面接了一个数字,则参数的数量也将会在两个 jQuery 版本中改变,就像上面的例子一样。

width() 与 height() 函数返回小数值

一些浏览器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持,jQuery 的 .width()、.height()、.css(“width”) 都可以返回小数值了。对于为了使用亚像素精度来设计网页的用户来说,这可能会是一个好消息。

.load()、.unload()、及 .error() 函数被移除

这些方法早先已经不赞成使用了,现在则已经从 jQuery 3.0.0 alpha 版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例:

HTML:

<img src="space-needle.png" alt="Space Needle" id="spacen">

JavaScript:

早先的实现方式(现已不可用)

$( "#spacen" ).load(function() {

  // Handler implementation

});

推荐的实现方式:

$( "#spacen" ).on( "load", function() {

  // Handler implementation

});

jQuery 对象现在可遍历了

现在已经可以遍历 jQuery 对象了,使用 ES2015 的 for-of。所以,你可以像这样使用:

for ( node of $( "<div id=spacen>" ) ) {

    console.log( node.id ); // Returns ‘spacen’

}

jQuery 动画现在在后端使用了 requestAnimationFrame API

所有现代的浏览器都已经支持了 requestAnimationFrame(参见:http://caniuse.com/#search=requestAnimationFrame)了。由于其被普遍支持,jQuery 将会使用此 API 来执行动画。其优势包括更流畅的动画及更少的 CPU 占用(因此,可以在手机上节约电量)。

增强 .unwrap() 函数

.unwrap() 函数可以让你在 DOM 中删除指定元素的父元素,早先不能接收参数。如果有人想给 unwrap 设定一个条件,这可能是个问题。

在 jQuery 3.0.0 alpha 中,.unwrap() 可以接收 jQuery 选择器做为参数来处理这个问题。

jQuery.Deferred 升级为 Promises/A+ 兼容

Promiseis是一个异步操作的最终结果——它是一个对象,承诺在未来交付结果。 和promise接口的最主要方式是then方法, 它注册了回调函数。现在,在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript promises的开放标准。 (想要更多的信息,可以查看链接: https://promisesaplus.com/)

从jQuery的参考文档中,Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery 3.0.0中,jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。 这就是.then()方法的主要变更。

更好地处理错误情况

这个版本的 jQuery 能更好地处理错误 —— 错误请求过去一直是被忽略的,直到现在的版本才会抛出错误。

举例来说:考虑到 offset,要获取当前第一个元素的坐标,相对于文档来说,就要匹配集合中的元素。如果你正试图在 jQuery 的早期版本找到抵消的窗口(window),你会得到{top: 0, left: 0}这样的结果,而不是抛出一个错误,这是因为抵消窗口(window)是无意义的。而在 3.0 alpha 版本中,它就会抛出一个错误。

另外一个例子:$(“#”) 现在会抛出一个错误,而不是返回一个长度为 0 的集合。

对自定义选择器(如:visible )进行了加速

当 :visible 之类的选择器在一个文档内多次使用时,性能得到了很大的提升。其内部是通过缓存来实现的 —— 第一次用过这个选择器后,以后返回结果都是一样的。但是其后的每一次调用返回结果都很快,因为缓存起作用了。来自 jQuery 的 Timmy Willison 在报告中指出使用缓存后 :visible 选择器的性能提升了 17 倍。

这些都是一些主要的更新。整个列表在他们的官方博客:http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/.

在哪里下载最新版本

有两个版本:

1.  jQuery 3.0,其支持了现代浏览器:https://code.jquery.com/jquery-3.0.0-alpha1.js

2.  jQuery Compat 3.0,其包含了对 IE8 的支持:https://code.jquery.com/jquery-compat-3.0.0-alpha1.js

也可以从 npm 中获取:

npm install jquery@3.0.0-alpha1

npm install jquery-compat@3.0.0-alpha1

尽管去尝试一下这个 alpha 版本吧,然后可以到 https://github.com/jquery/jquery 反馈问题。这很值得一试!

更多的 Web 开发的实践

这篇文章是微软的布道者和工程师在实际学习 JavaScript 系列文章中的一篇,开源项目和互操作性的最佳实践,包括微软的 Edge browser 和新 Edge HTML 渲染引擎。
我们鼓励您进行跨浏览器和设备测试,包括微软的 Edge——Win10 系统的默认浏览器 —— 在 dev.microsoftedge.com 上有免费的测试工具:

· 扫描你的网站使用的过时的库,布局问题,和可访问性。

· 免费下载 Mac、Linux 和 Windows 操作系统上的虚拟机。

· 跨浏览器检查网络平台状态,包括微软的 Edge。

· 在你自己的设备上对 Edge 进行远程测试。

从我们工程师那里和下面的福利清单中获得更深入的了解:

· 互操作性最佳实践 (系列):

· 如何避免浏览器检测

· CSS 前缀最佳实践

· 保持 JS 框架 & 库最新

· 构建自由扩展的网页体验

· 上的编码实验室: 跨浏览器测试和最佳实践

· 哇哦,我可以再 Mac 和 Linux 上面测试 Edge! (来自Rey Bango)

· 不用破坏网页的先进的JavaScript (来自Christian Heilmann)

· 使用 WebGL 的 3D 渲染 (来自David Catuhe)

· web 应用和 web 平台方面的创新 (来自Kiril Seksenov)

我们的社区开放源代码项目:

· vorlon.JS (跨设备远程 JavaScript 测试)

· manifoldJS (部署跨平台托管 web 应用)

· babylonJS (3D 图形更拿手)

更多免费的工具和后台 web 开发小玩意:

· Visual Studio Code (轻量级代码编辑器,可用以 Mac、Linux 和 Windows)

· Visual Studio Dev Essentials (免费、基于订阅模式练习和云的好处)

· 利用 Azure Cloud 上的许可使用 node.JS 编写代码


本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计