2019/1/17

1 Points of jQuery

2 DOM Selector
‣ 実体は、getElementById や getElementsByTagName、querySelectorAll などと独自実装
‣ ネイティブメソッドを使う方が速い
特にモバイルは遅いのでネイティブを使いたい
‣ 何度も使うならキャッシュする
‣ あとで子要素を対象にする時キャッシュから #.find する
3 Events
‣ 旧来の .bind, .delegate, .live は .on (.off) になった
‣ 基本は #.on(‘click’, function)
‣ 子要素の集合で同じイベント処理をしたいとき
例えば table の各要素 $(‘table’).on(‘click’, ‘td’, function)
‣ あとから追加した子要素にもイベント処理できる
‣ delegate [.on(event,selector,..)] は高速
4 Deferred
‣ $.ajax の結果処理をチェインで書きたい
‣ $.get(url, {success, error}) では複数の処理が複雑になる
コールバックスパゲティ
‣ $.get(url).done(function).fail(function) のように書く
‣ $.get(url).then(function).done(function).fail(function) で
thenに次の$.getを書いてreturn させると複数処理できる
5 Deferred (cont’d)
‣ .then は逐次処理を書いて処理をつなげる
‣ .then には成功とエラーの両方の処理が書ける
‣ 他に .always があり、try ~ catch ~ finally のように書ける
6 Deferred (cont’d)
‣ $.when で並列に処理できる
‣ １つでも失敗すると即座に fail する
7 Deferred (cont’d)
‣ $.when で独自処理をチェインできるが fail できない
‣ $.Deferred() と #.promise, #.resolve, #.reject を使う
‣ 処理の中で promise を返し、処理終了に resolve する
8 Callbacks
‣ 複数の処理に一斉配信（Mediatorパターン）
‣ #.add, #.remove で追加削除、 #.fire で処理を順次呼出し
‣ once, memory, stopOnFalse などで .fire 処理を変更できる
9 $.each
‣ 配列の.forEachと同じだが、オブジェクトにも使える
‣ [].forEachとは処理の引数のデータとインデックスが逆
‣ オブジェクトの場合には key, value が渡される
10 $.extend
‣ クラスの継承に近いことができる
‣ 最初のオブジェクトに２つ目以降のオブジェクトを統合

1
 2019/1/17

‣ １つ目に{}, ２つ目に .prototype を渡して継承に使う

$.extend({}, MyClass.prototype, {fn1: function .. })
‣ $.fn.extend を使うとjQueryを拡張できる
$.fn.exnted({log: function(){ console.log(this); return this; })