jQuery 3.3.0-1 での変更箇所の自分なりのまとめ

jQuery 3.3.0, 3.3.1 のリリースノートを読んで、 今さらですけど自分なりにまとめました。

といっても、jQuery 3.3.1 の方はコード自体に変更はありません。 npm や GitHub からインストールする場合には関係ありますが、 CDN から利用している場合は 3.3.0 の方で問題ありません。

class 関係のメソッドで新しい用法が導入された他、 色々な機能が deprecated になりました。 箇条書きを含めた簡単なまとめになります。

誤訳による間違いなどもあると思われますので、 読まれる際はご注意を。

class関係のメソッドがクラスの配列を受け取れるように

.addClass(),.removeClass(),.toggleClass()が クラスの配列を引数に取れるようになりました。

jQuery(elem).addClass([
   'class1', 'class2', 'class3'
]);

この用法が何で今まで実装されてなかったのか不思議に思ったそうです。

色々な機能が deprecated に

大体が内部での利用目的のものや代替手段よりも有用性が乏しくなったものです。 これらの大半が jQuery 4.0 で削除されるそうですが、deprecated だからといって 必ず削除されるとは限らず、代替手段への移行を促す意味もあるそうです。 例えば、jQuery.proxyや .click()等のイベントハンドラ登録のショートカットメソッドは 削除されないと思われます。

  • jQuery.now ←もうData.nowの参照となっている
  • jQuery.isWindow ←内部での利用目的なので表に出す必要が無い
  • jQuery.camelCase ←ドキュメントに書いていない上、 -ms-をms-に置き換える CSS 専用の内部処理が含まれていて、 外部に晒す意味が無い
  • jQuery.proxy ←大体Function#bind()で代替可能で、 他の用法も限定的な使用にとどまっている。削除の予定は無い。
  • jQuery.type ←内部での利用目的なので。それに、 @@toStringTagへの対処の問題があるそうです。
  • jQuery.isNumeric ←内部利用目的に加えて、「数値」に対する認識が かなり主観的だから。
  • jQuery.isFunction ←内部利用目的。
  • イベントハンドラ登録のショートカットメソッド群( blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu hover) ←イベントエイリアスのモジュールを除外したいプラグインユーザを サポートさせるためにプラグインの作者の尻をたたく意味もある。 削除しそうにない。

その他

CSS 関連の修正が多い印象です。

  • コマンドライン上で jQuery の全テストが実行可能に
  • Safari で xhr のタイムアウトのエラーが捕捉されなくなったので (標準では.onerrorで捕捉できるはずだが).ontimeoutを加えて 捕捉できるようにした
  • .ajax()等のボディの無いリクエスト(例：GET)で、オプションの.processDataが false且つdataが非文字列の場合、リクエストURLに.dataを文字列化した ものを付けないようにした(以前は'[object Object]'のようなものが 付けられていた)。

  • jQuery.isFunction()(今回 deprecated になった)を、@@toStringTagを 使われても惑わされないように更新

    var obj = {},
fn = function() {};
obj[ Symbol.toStringTag ] = "Function";
fn[ Symbol.toStringTag ] = "Object";
jQuery.isFunction( obj ); // false
jQuery.isFunction( fn ); // true

  • cssPropsからfloatを除く(Firefox 34 までは float はcssFloatで アクセスする必要があった)

  • デフォルトの zoom でない場合、support.js の各種プロパティの値が まるめ誤差によって正しくセットされない問題を修正
  • WebKit の中には、数値として返すべきところをパーセンテージで返してしまう ブラウザがあるが、そのようなブラウザをより多く特定できるようにした。
  • Firefox のアニメーションの問題を修正
  • promise のコールバックのメモリリークを修正
  • offsetWidth/offsetHeight へのフォールバック( インライン要素の幅(高さ)が正しく取得できないとき代わりに それらを用いる処理)の追加・改良と、その条件の追加(古い Android)。
  • 仕様ではスクロールバーの「側溝」はコンテンツの大きさに含まれないが .innerWidth/.innerHeight/.outerWidth/.outerHeight に含みたいので 他のデータから計算して導きだし、padding ボックスに含める。
  • ボックスサイズを計算する時、computed width(height)がピクセル値でない場合は 使わないようにして、パーセンテージ指定の幅(高さ)の取得の整合性を高める
  • jQuery の.trigger("click")でイベントを発火させた時、 ネイティブのelement.addEventListener()で登録したイベントリスナ上でも event.stopPropagation()が機能するようにする(jQuery は ネイティブと jQuery 製のイベントハンドラ間での相互運用性を保証してないが これに関しては修正されたようです)。
  • es6 の<script type="module" src="..."></script>のようなスクリプトを .html()で追加できるようになった。
  • .offset()と.position()のバグの修正と説明を正確に
    (※とりわけこの項に関しては内容把握に自信がありません)
    box-sizing:content-box; の時、 スクロールバーの幅を含めるブラウザと含めないブラウザがある等の理由 (他に、<html>のデフォルトスタイルに差異がある？)で、 .offset()と.position()にバグがありました。 jQuery では border やスクロールバーの値を含めるようにして差異を無くし バグを修正したようです(たぶん)。また、それぞれのドキュメントが 正確を期するためか修正されています。
    .offset()は、要素(正確にはその border box、これは margin を 含みません)の document に相対的な現在位置を取得・指定します。
    .position()は、要素(正確にはその margin box)の offset parent(正確にはその padding box、これは margin と border を 含みません)に相対的な現在位置を取得します。
    どちらも<html>要素に設定された margin を考慮しない旨が 書き加えられています。
    (※<html>や<body>の margin や padding が.offset()や .position()(offset parent が document の場合)の値に影響を及ぼす)

スポンサードリンク