jQuery 1.8.0 ~ 1.8.3 での変更箇所の自分なりのまとめ

jQuery 1.8 , 1.8.1 , 1.8.2 , 1.8.3 のリリースノートを読んで、自分なりにまとめました。 といっても、1.8.1 と 1.8.2 、1.8.3は ほぼバグ修正メインなので、 1.8.0 だけのまとめとあまり違いありません。 誤訳による勘違いなどもあると思われるので、 読まれる際はご注意を。(※ページをそのまま訳したわけではありません)
箇条書きにすると以下のような感じ:

  • Sizzle の書き直し
  • アニメーションの見直し
    • オプションにコールバックprogress, always, done, failを 追加
    • オプションにコールバックstart追加
    • animation オブジェクト
    • Prefilters
    • tween, tweener, jQuery.Tween.propHooks
  • CSS のプレフィックスを自動化
  • $(html, props)propsでの指定範囲が拡大
  • その他
    • jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の 使用を[1.8.1]
    • Quirks モードを使用しない[1.8.1]
    • 独自擬似セレクタに関する Sizzle のドキュメント
  • 削除されたもの
    • $(element).data("events")
    • Deferred.isResolved()Deferred.isRejected()
    • $(element).closest(Array)が配列を返すこと
    • $.curCSS()
    • $.attrFn

Sizzle の書き直し

そのため、jQuery のセレクタエンジンが高速になったそうです。 IE 6, 7 もサポートしてます。

アニメーションの見直し

アニメーション関連のコードのバグ修正や整理に加えて、 新機能もいくらか導入しています。

オプションにコールバックprogress, always, done, failを 追加

animate()などに渡すオプションに表題の コールバックを指定できるようになりました。 これらが実行されるタイミングは以下の通りです。

progress
アニメーションのフレームごとに実行されます。 計算機の性能にもよりますが、フレームは jQuery.fx.intervalで指定したミリ数ごとに 実行されます。
always
方法に関わらず、アニメーションが終了した時点で実行されます。
done
アニメーションが自然に終了した時点で実行されます。 自然に終了とは、jQuery.fn.stop()で終了されず、 指定時間が経過して終了することです。これはオプションの completeコールバックと同じです。
fail
アニメーションがjQuery.fn.stop()で終了した時に 実行されます。

コンテキスト(thisのこと)は どのコールバックも同じで、アニメーションさせる DOM 要素になります。 渡される引数は以下のようになります。

progress function( animation, percent, remaining )
always function( animation, gotoEnd )
done function( animation, gotoEnd )
fail function( animation, gotoEnd )

progress以外は同じ引数です。 animationは 新規導入されたオブジェクトで、 アニメーションに関する情報を保持した promise オブジェクトです。 あとで少し説明します。 percentは アニメーションの進捗状況を 0 から 1 の 数値にしたものです。0 が始点で 1 が終点です。 remainingは アニメーションが終了するまで あと何ミリ秒残っているかを表す数値です。 gotoEndは アニメーションがどのように終了したかを 表します。自然に終了した場合はundefinedに、 jQuery.fn.stop()で終了した場合は、 終了時に目的値に移動するようにした場合はtrueに、 その場で終了するようにした場合はfalseになります。

なお、completeコールバックにもdone コールバックと同じ引数が渡されるようになりました。

オプションにコールバックstart追加

これはアニメーション初期化中(後述のjQuery.Animation 実行中)に実行される関数です。 thisは対象の要素になり、animation オブジェクトが 引数に渡されます。

animation オブジェクト

jQuery 1.8 から、.animate()などでアニメーションを 実行する時はjQuery.Animation(element, props, opts) を使ってアニメーションを定義しています。また、 この関数はオブジェクトを生成していて、 これをここではanimationオブジェクトと 名づけています。

animationオブジェクトは promise オブジェクトで、 さらに以下のようなプロパティが追加されています。

elem
DOM 要素。アニメーションする要素
props
Object。アニメーションするプロパティとそれぞれの目的値
opts
Object。アニメーションのオプション
originalProperties
Object。キャメライズ化や easing の処理が施される前の、 jQuery.Animation()に渡した時の オリジナルのプロパティオブジェクト
originalOptions
Object。prefilter の処理が施される前の、 jQuery.Animation()に渡した時の オリジナルのオプションオブジェクト
startTime
Number。アニメーションを開始した時刻。 new Date()した時に返される数値で表される
duration
Number。アニメーションする期間。ミリ秒単位
stop( gotoEnd )
Function。おそらく内部用、もしくはカスタマイズ用の関数。 普通にアニメーションを利用する場合は jQuery.fn.stop()を使用する
tweens
Array。tween オブジェクトの配列。tween オブジェクトとは jQuery.fxオブジェクトに代わるオブジェクト。 tween.run()が呼ばれることで要素の スタイルプロパティが更新される。
createTween( propName, finalValue, easing )
Function。tween オブジェクトを作成し、 tweensプロパティに push する関数。 この関数を prefilter で上書きすることで アニメーションをカスタマイズすることも可能。 ちなみにthisanimation オブジェクト。

Prefilters

jQuery.Animation()でのアニメーション初期化処理中、 jQuery.Animation.prefilter()という関数を使って 登録した関数(ここでは prefilter と名づけます)が実行されます。 prefilter には animation オブジェクトを thisとして、要素、animation.propsanimation.optsが渡されます。

tween が作成される前に実行されるので、 animation.propsanimation.optsを アニメーション実行前に変更することができます。(※ duration はanimation.opts.durationを変更しても アニメーションに反映されません。 animation.duration、つまりこの関数内では this.durationを変更すると反映されます。)

prefilter がfalseになるような値を返す場合は 後続の prefilter が実行されます。一方、trueに なるような値を返すと、その値がそのまま jQuery.Animation()の返り値になります。 アニメーションを成立させるにはjQuery.Animation()の 後続の処理(tween の作成やタイマーへの登録すらも)を 自前で書かなくてはなりません。アニメーションのほとんどを 上書きしたいとか、すごい人向けです。

tween, tweener, jQuery.Tween.propHooks

tween オブジェクトは以前のバージョンのjQuery.fx オブジェクトを置き換えるものです。そのため、 jQuery.fxとよく似たプロパティを持っています。

elem
アニメーションする要素
prop
アニメーションするプロパティ名。キャメル化済み
easing
easing を表す文字列
start
アニメーション開始時の値
now
アニメーション中のプロパティの現在値
end
アニメーションの目的値
unit
プロパティの値の単位
cur()
要素からプロパティの現在値を読み取る。取得には Tween.propHooksに登録されたフックを使う
run( progress )
要素のプロパティの値を更新する。 progressは 0 から 1 の値を取る数値で アニメーションの進捗状況を表す。 更新にはTween.propHooksに登録された フックを使う。.animate()に渡すオプション stepもここで実行される。

tweener は tween オブジェクトを生成する関数です。 jQuery.Animation()内で、登録された tweener を実行してtween を生成します。 独自の tweener を作成して登録すれば tween の上書きが 可能になります。 tweener を登録するにはjQuery.Animation.tweener() を使って登録します。

jQuery.Tween.propHooksjQuery.fx.stepを置き換えるものです。 このフックは、アニメーション中、要素のプロパティの値の取得や 更新を行うときに tween オブジェクトの.cur().run()から使用されます。 そのため、jQuery.Tween.propHooksを変更することで アニメーションさせる要素のプロパティの値の取得・更新処理を 変更することができます。 変更は cssHooks と同じようにやります。

jQuery.Tween.propHooks[ property ] = { // property には プロパティ名
    get: function( tween ) {
         // 引数の tween から情報を取得できる。
         // 要素は tween.elem から、
         // プロパティ名はtween.prop から取得する
         // tween の cur() で使ってる
    },
    set: function( tween ) {
         // 引数の tween から情報を取得できる。
         // 要素は tween.elem、プロパティ名は tween.prop、
         // 値はtween.now や tween.unit が利用できる。
         // tween の run() で使っている
    }
}

CSS のプレフィックスを自動化

.css().animate()等で CSS プロパティを使う時、いちいちベンダープレフィックス( "-moz-"とか"-ms-"とか "-webkit-"とか)を 付けなくても、必要な時に自動で付けてくれるようになりました。

$(html, props)propsでの指定範囲が拡大

以前は$(html, props)に渡すpropsには、 属性やイベントと、一部のメソッド (val(), css(), html(), text(), width()など)が 指定できましたが、1.8 ではどんな jQuery のメソッドや プラグインでも使用できるようになりました。

$("#container").append(
  $("<div>", {
      html: "sample text",                    // 1.8 未満
      css: { width: "300px", height: "300px", // でも可能
             backgroundColor: "#cccccc" },
      animate: { width: "150px",              // 1.8 から可能
                 height:"450px" }
    })
);

その他

jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の 使用を[1.8.1]

jQuery 1.8.1 と共に使用するなら jQuery UI なら 1.8.23 以降、 jQuery Mobile なら 1.1.1 以降を使用するようにしましょう。

Quirks モードを使用しない[1.8.1]

jQuery は Quirks モードをサポートしていないし、 Quirks モードでテストもしていないそうです。

独自擬似セレクタに関する Sizzle のドキュメント

いままでドキュメント化されてなかったそうで、それが 公式の Sizzle のドキュメント でドキュメント化されたそうです。 jQuery での独自擬似セレクタの定義で互換性を保ちたい場合は ここの例を参考にするとよさそうです。

削除されたもの

$(element).data("events")

Deferred.isResolved()Deferred.isRejected()

いくつもある状態の中で「~か否か」を聞くより、 「何の状態ですか」と聞いた方が良いということで、 1.7 で Deferred.state() が導入されたことだし、 表題のメソッド2つはほぼ必要無くなり削除となりました。

$(element).closest(Array)が配列を返すこと

主に内部での使用や、プラグイン作者向けだったとのこと。 使われてなかったらしく削除となりました。

$.curCSS()

jQuery.css()のエイリアスだったとか。 ドキュメント化されておらず削除になりました。

$.attrFn

これもドキュメント化されていませんでした。 $(html, props)で、どのメソッドが使用可能かを 定義してあったオブジェクトらしいです。 1.8 でその存在意義を無くし削除になりました。

スポンサードリンク