jQuery3.0-beta1-point

3系リリース直前？変更箇所ポイント
サト研（妹）
ver.1.0.0
【jQuery10周年】

自己紹介
1
高見和也（Takami Kazuya）
https://twitter.com/miiitaka
https://www.facebook.com/miiitaka
株式会社アラタナ
フロントエンドエンジニア
WordPress と JavaScript が友達です。
https://github.com/miiitaka

アジェンダ
3
 jQuery10周年振り返り
 jQuery3.0.0beta1 変更点ポイント（12点）

さてさて
4
jQuery10周年振り返り

思えば10年前なんですね
5
1系
2006/08/26
2系
3系
2013/04/15 2015/01/13
2016/01/14
First Release
1.0
Sizzle
Selector
1.3
2009/01/14 2010/01/14 2011/01/15
実行速度改善
1.4
Deferred 追加
1.5
2011/11/03
bind等API統合
1.7
IE6/7/8
非サポート
2.0
3.0.0Alpha
3.0.0Compat
3.0.0Beta1
3.0.0Compat
開発中止

Major Changes
7
◆jQuery公式サイトよりリリース内容を紐解く
http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
メジャー変更点を解説していきます。

1: .show() and .hide() methods
8
◆.show()メソッドと.hide()メソッドの動作が変わります。（……が？）
<button id="show">Show</button>
<button id="hide">Hide</button>
<p id="view">( ´ ▽ ` )ﾉ</p>
<script>
(function($){
$(function(){
$("#show").on("click", function(){
console.log("表示");
$("#view").show();
});
$("#hide").on("click", function(){
console.log("非表示");
$("#view").hide();
});
});
})(jQuery)
</script>
id=“view”に対して<style>設定
#view {
display: “none”;
}
-Alpha版
.show()でdisplay: “block”; にならない！
-Beta版
元に戻した ε-(´∀｀; )

2: Special case with `.data()` names
9
◆.data()メソッドのキャメルケースの取り扱いが変わります。
<button id="test1" data-foo-bar="bar">data属性（数字なし）</button>
<button id="test2" data-foo-420="420">data属性（数字あり）</button>
<script>
(function($){
$(function(){
$("#test1").on("click", function(){
console.log($(this).data("foo-bar"));
console.log($(this).data("fooBar"));
});
$("#test2").on("click", function(){
console.log($(this).data("foo-420"));
console.log($(this).data("foo420"));
});
});
})(jQuery)
</script>
bar
bar
420
undefined

3: jQuery.Deferred is now Promises/A+ compatible
10
◆jQuery.DeferredのPromises/A+互換性向上
- jQuery1.5から追加された非同期処理、それがDeferred。
- Promises/A+やECMAScript2015のPromiseに互換性を向上させたそうだ。
- Promises/A+仕様テストをクリアしている代物。

4: Added catch() to Deferred
11
◆Deferredsにcatch()メソッドを追加
- 嬉しい ( ^ω^ )

5: Removed special-case Deferred methods in jQuery.ajax
12
◆jQuery.ajax() の特殊なDeferredメソッドを廃止
- jqXHRオブジェクトは、Promiseであるが、.abort() のような追加メソッドを持っている。
- .complete() .success() .error() .done() .fail() .always() は非推奨にしないけど、気をつけてね。

6: Error cases don’t silently fail
13
◆エラーをエラーとして返すようになりました
- ちゃんとエラーが表示されます。あれ？ってならない。
<script>
(function($){
$(function(){
console.log($(window).offset());
});
})(jQuery)
</script>
コンソールにエラーが表示されます

7: .width(), .height(), .css(“width”), and .css(“height”) to return decimal values
14
◆.width()メソッドと.height()メソッドの戻り値を小数以下も返すように
<p id="test1" style="background: #cccccc;width: 100.05px;">width()の例</p>
<script>
(function($){
$(function(){
console.log($("#test1").width());
});
})(jQuery)
</script>
小数点以下の値も返す
- そもそもブラウザによって返す値がバラバラの謎仕様
- そのせいで要素間にすきまができたりしてA型性格の人をイライラさせる。高見とか。
- 戻ってきた値に四捨五入や切り捨て・切り上げを自分でコントロールできる ( ´ ▽ ` )ﾉ

8: Removed deprecated event aliases
15
◆非推奨のイベントエイリアスの廃止
- jQuery 1.8から非推奨だった.load, .unload, .errorが廃止しました。
- .on()を使いましょう。そういう話。イベントリスナーを登録するようにしてください。
<script>
(function($){
$(function(){
$(window).on("load", function() {
console.log("loadイベント(on)");
});
$(window).load(function() {
console.log("loadイベント(Alias)");
});
});
})(jQuery)
</script>
$(Selector).load() のようなエイリアスは使用し
ないこと！

9: Animations now use requestAnimationFrame
16
◆requestAnimationFrameの復活
• setInterval()はそもそもアニメーション用のメソッドでない。
• ブラウザの描画更新単位にあわせるメソッド、それがrequestAnimationFrame
• jQuery1.6から採用された
• 何故か1.6.3で突然の別れ (ｰｰ;)
• どうやらjQuery内で不具合が発生した模様（キューが溜まりまくるとか、コンフリクトとか）
• ( ´ ▽ ` )ﾉ＜なめらか
• ( ´ ▽ ` )ﾉ＜ CPUの負荷がさがる
• ( ´ ▽ ` )ﾉ＜モバイルデバイスなどのバッテリーの減りを抑止
◆ こんな恩恵をうけます

10: .unwrap( selector )
17
◆.unwrap()メソッドでセレクターの指定ができるようになりました。
<div id="test0">
<p id="test1"><a>wrap1</a></p>
</div>
<script>
(function($){
$(function(){
$("a").unwrap("#test3");
});
})(jQuery)
</script>
<div id="test0">
<a>wrap3</a>
</div>
<script>
(function($){
$(function(){
$("a").unwrap("#test3");
});
})(jQuery)
</script>

11: jQuery.fn.domManip no longer accessible
18
◆内部的に使用していたメソッドを隠蔽
例えば $.swap() とか。 1.12.1と2.2.0にもマージされたみたい。

12: Massive speedups for some jQuery custom selectors
19
◆いくつかのカスタムセレクタのパフォーマンス改善
• :hidden や :visible などのカスタムセレクタを改修
• Google のポール・アイリッシュありがとうという話
最大で17倍高速化するよ ( ^ω^ )

ご清聴ありがとうございました。
20
ありがとうございました。

- jQuery 3.0 Alpha
http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/
- jQuery 3.0 Beta
http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
- jQuery Wikipedia
https://ja.wikipedia.org/wiki/JQuery
- Selector API
https://developer.mozilla.org/ja/docs/DOM/Locating_DOM_elements_using_selectors
- Sizzle
https://sizzlejs.com
参考URL
21

jQuery3.0-beta1-point

Recommandé

Recommandé

Contenu connexe

Plus de Takami Kazuya

Plus de Takami Kazuya (20)

jQuery3.0-beta1-point