Perubahan dalam jQuery 3.0 dan cara menggunakannya_jquery

jQuery, pustaka JavaScript paling popular setakat ini di dunia, sentiasa menjadi senjata ajaib bagi kami pembangun web. Sejak dikeluarkan pada tahun 2006 sehingga kini, banyak pembangun web telah memperkenalkan perpustakaan yang sangat baik ini ke dalam projek mereka untuk memudahkan kerja pembangunan.

Selepas 3 bulan, pasukan jQuery akhirnya mengeluarkan versi 3.0 Alpha. Terdapat dua versi jQuery compat 3.0 dan jQuery 3.0.

•jQuery compat 3.0 sepadan dengan 1.x sebelumnya, serasi dengan lebih banyak penyemak imbas dan menyokong IE sehingga versi 8.0
•jQuery 3.0 sepadan dengan 2.x sebelumnya, perhatikan penyemak imbas yang lebih baharu dan menyokong IE sehingga versi 9.0

Selain itu, 3.0 turut menambah sokongan untuk penyemak imbas Yandex, pelayar dari Rusia.

1. Tampil/sembunyikan ringkas

Pameran/sorok sebelumnya adalah serasi sepenuhnya, seperti tunjukkan, tidak kira paparan elemen ditulis dalam gaya, ia boleh dipaparkan dalam helaian gaya. Ia berbeza dalam 3.0 Paparan: tiada yang ditulis dalam lembaran gaya masih tersembunyi selepas memanggil pertunjukan. 3.0 Adalah disyorkan untuk menggunakan kaedah kelas untuk menunjukkan dan menyembunyikan, atau sepenuhnya menggunakan hide untuk menyembunyikan terlebih dahulu (tanpa menggunakan kod css), dan kemudian panggil show.

<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>

2. Kaedah data serasi dengan penulisan nama-11

<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}， 之前版本输出 {}
$('#txt').data()
</script> 

Intipati masalah ini ialah perbezaan pelaksanaan kaedah $.camelCase

// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11') 

3 tertunda serasi dengan Promise/A

3.0 akhirnya dengan yakin boleh mengisytiharkan sokongannya untuk Promise/A, yang telah dikritik sebagai versi yang dikebiri sebelum ini.

4. Objek $.ajax telah memadamkan kaedah lengkap | Ini kerana promosi spesifikasi Promise/A, orang ramai menggunakan Promise semakin banyak, dan tidak perlu wujud beberapa kaedah di Derferred sebelum

•ditunda.selesai -> jqXHR.success
•tunda.gagal -> jqXHR.error

•derrerred.sentiasa -> jqXHR.lengkap

// 以下方法在 3.0 后没有了
$.ajax().success
$.ajax().error
$.ajax().complete 

5 Nilai pulangan lebar/tinggi, css(lebar) / css(tinggi) sentiasa perpuluhan

Sesetengah penyemak imbas sebelum ini mengembalikan nombor titik terapung dalam keadaan khas.

6. Mengalih keluar fungsi pintasan pemuatan acara |

•Nama beban mempunyai nama yang sama dengan beban ajax, yang tidak jelas. •memunggah Jika beban dibuang, memunggah tidak akan bermakna. •ralat didaftarkan menggunakan window.onerror dan bukan pengendali acara standard, jadi disyorkan untuk mengalih keluar
Kandungan di atas meringkaskan perubahan jquery3.0 Perkara berikut terutamanya memperkenalkan kandungan yang dikemas kini dan penggunaan jquery3.0.

Tunjukkan dan sembunyikan

Perubahan utama ialah cara fungsi akan berfungsi. Dan ada sebab yang baik untuk berbuat demikian. Dalam pelaksanaan terdahulu, fungsi hide() menetapkan atribut css kepada "display:none", dan fungsi show() mengosongkan atribut ini. Tetapi berbuat demikian agak mengelirukan. Mari lihat beberapa contoh:

1. Jika apabila fungsi show() cuba menetapkan nod kepada "display:block" dan atribut "display:inline" dilaksanakan dalam lembaran gaya lain, ini akan mula memecahkan kod. 2. Apabila kami berurusan dengan reka bentuk web responsif (RWD) untuk media, kami mungkin menggunakan "paparan" atau "keterlihatan" untuk menukar keterlihatan nod. Ini boleh menjejaskan fungsi "show()" dan "hide()".

Selain itu, terdapat banyak isu lain yang perlu diselesaikan oleh pasukan JQuery. Ini mengakibatkan isu pelaksanaan dan prestasi yang kompleks, jadi mereka berhijrah kepada model yang lebih mudah.

Melangkah ke hadapan, jika anda menetapkan "display:none" dan menggunakan "show()", "slideDown()", "fadeIn()" atau kaedah yang serupa untuk memaparkan nod, ia tidak akan berfungsi. Pendekatan yang lebih baik ialah menggunakan "addClass()" dan "removeClass()" untuk mengawal paparan. Atau anda boleh memanggil "hide()" pada elemen apabila "ready()" dipanggil.

Contoh cepat:

.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="/static/imghwm/default1.png"  data-src="space-needle.png"  class="lazy" 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/ .

在哪里下载最新版本

有两个版本：

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

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