読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Releasedの概要

jQuery JavaScript Web

まだアルファですが、みんな大好きjQueryのバージョンがついに`3`に!
公式からリリースノートが出てたので、いわゆるメジャーな変更の部分をかいつまんで訳しておきます。

ちなみに、

  • jquery@3.0.0-alpha1: IE9以降などモダンブラウザ向け
  • jquery-compat@3.0.0-alpha1: IE8をサポート

だそうです。

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released | Official jQuery Blog

もくじ

  • Simplified .show() and .hide() methods
  • Special case with .data() names
  • jQuery.Deferred is now Promises/A+ compatible
  • Removed special-case Deferred methods in jQuery.ajax
  • Error cases don’t silently fail
  • .width(), .height(), .css(“width”), and .css(“height”) to return decimal values (whenever the browser does)
  • Removed deprecated event aliases
  • jQuery.swap, jQuery.buildFragment, and jQuery.domManip are no longer accessible on the jQuery object
  • Animations now use requestAnimationFrame
  • .unwrap( selector )
  • Massive speedups for some jQuery custom selectors

なかなかに多い・・ので、ほんとかいつまんでいきます。

Major changes

Simplified .show() and .hide() methods

多くの人があれは`display: block`と`display: none`を切り替える単純なメソッドだと思ってるかもしれない。
けどそれはダウトで、それはそれはもー長きに渡り積もり積もった色んなケースへの対応が入ってる、と。

で、この度その色々の対応をやめて、シンプルな実装に戻すそうです。

何か変わるかというと、
CSSで`display: none`が指定されてる要素に対しては、
`show()`しても要素が`display: none`のままになります。(今まではstyle属性で`display:block`にしてた)

jQuery 3.0に移行する上で守るべきルールは以下。

  • 初期状態を`display: none`にしたい場合に、CSSは使わない
  • そしてそれをあとから`show()`しようとしない
  • `slideDown()`も`fadeIn()`も同じ
  • やるなら`.hidden`みたいなクラスを作って`addClass()`
  • もしくは`ready()`のタイミングで`hide()`する

まぁ言われなくともって感じではある・・。

ソース見るなら

もとより触る寸前に、`display`の値を保存しておいて、戻すときはそれを使うって感じになってますね。

ちょっとコードが短くなった感じ。

Special case with .data() names

「数字を含むキー」でセットした場合に、`$(el).data()`で取得できる結果がちょっと変わるそうです。

2系では区別されなかった`.data('foo42', 'foo')`と`.data('foo-42', 'foo')`が、3系では区別されるようになるそうな。

まぁ、この機能使ったことないんですけど・・

jQuery.Deferred is now Promises/A+ compatible

あのjQuery.DeferredがついにPromise/A+互換に!
これでいままでラップして使ったりしてたのがいらなくなりますね。

`.catch()`が使えるようになって、`.then()`の挙動が変わります。
今までと同じ挙動にしたい場合は、`.then()`ではなく`.pipe()`を使ってねとのこと。

Removed special-case Deferred methods in jQuery.ajax

`jqXHR`も`Promise`なオブジェクトでありつつ、`.abort()`みたいな特別なメソッドを持ってます。

で、今まで`.success()`, `.error()`, `.complete()`ってのがあったけどそれが無くなります。
同じことしたいなら、`.done()`, `.fail()`, `.always()`を使ってねとのこと。

非同期やるなら時代はPromiseですねー。

Error cases don’t silently fail

いままでjQueryが丸めて無視してたエラーが、3系からはちゃんと投げられるようになるそうです。
具体的には、`window`に対して`offset`を求めようとしたりしたときとか。

ノートには3系からは`{ top: 0, left: 0}`が返るって書いてありますが、実際に試してみると、

  • 2系: undefinedが返ってくる
  • 3系: TypeError: elem.getClientRects is not a functionってエラー

見出しが正しいのか記述が正しいのか・・。

・・・これは普通にバグな気がしますね。

.width(), .height(), .css(“width”), and .css(“height”) to return decimal values (whenever the browser does)

例えば`width: 1000px`の親要素の中に、`width: 33%`の子要素があって、その子要素の幅を取得した時。

  • 2系: 325
  • 3系: 324.71875

このように、小数点以下まで返してくれるようになります。

Removed deprecated event aliases

`.load`, `.unload`, `.error`のイベントハンドラがなくなります。
もう`.on`使えとのこと。

jQuery.swap, jQuery.buildFragment, and jQuery.domManip are no longer accessible on the jQuery object

今までもドキュメントには書いてないけど、

っていうメソッドが実は公開されてた。
けどそれが隠蔽されて見えなくなりますとのこと。

Animations now use requestAnimationFrame

帰ってきたrAF!
1.6.0で追加されて1.6.3で消えたrAF!

Page Visibility APIとか使えるようになってきたし、いろいろ実装側も安定してると判断されたのかね?
もちろん実装がない環境では、ただの`setInterval`です。

.unwrap( selector )

引数を取ってなかったのが、セレクタを取ってunwrapしたい要素を指定できるように。

そもそも何かと重そうなAPIなので、使わないで欲しい感はあるけど。

Massive speedups for some jQuery custom selectors

あのjQueryのカスタムセレクタが高速化したそうです!
最大で17倍早くなったやつもあるそうです!!

ってもまぁ公式にも書いてありますが、早くなったとはいえ処理が重いことには変わりないので、ゆめゆめご利用は計画的に。

Changes

Majorではない変更からも、気になったのものをいくつかご紹介。

update Sizzle to 2.0.0

Sizzleが1系から2系に!
っても実際は何も変わってません。

jQueryがIE8を切って先へ進んでる反面、Sizzleが依然としてIE6をサポートしてるライブラリって、なんだかなーという感じです。

drop bower; use npm for front-end deps

依存ライブラリをbowerで管理してたのをやめて、npmに寄せてます。
やはりそういう時代の流れなんですかね。

add support to tag-hyphenated elements

`$('foo-bar')`みたいなタグを扱えるように。
Angular臭がしますね。

おわりに

巷でSwissArmyKnifeとか揶揄されてたりするらしいですが、まだまだjQueryに助けられてる人はいるし今後も減らないと思うので、続報は常にチェックしていきたいですねー。