まだアルファですが、みんな大好きjQueryのバージョンがついに`3`に!
公式からリリースノートが出てたので、いわゆるメジャーな変更の部分をかいつまんで訳しておきます。
ちなみに、
だそうです。
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`の値を保存しておいて、戻すときはそれを使うって感じになってますね。
- 2系: https://github.com/jquery/jquery/blob/2.1-stable/src/css.js
- 3系: https://github.com/jquery/jquery/blob/master/src/css/showHide.js
ちょっとコードが短くなった感じ。
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
このように、小数点以下まで返してくれるようになります。
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`です。
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に助けられてる人はいるし今後も減らないと思うので、続報は常にチェックしていきたいですねー。