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

jQuery 3.4.0, 3.4.1 のリリースノートを読んで、 自分なりにまとめました。

script 要素の追加の際の独自属性のサポートや性能改善、 バグ修正などが含まれています。 箇条書きを含めた簡単なまとめになります。

誤訳による間違いなどもあると思われますので、 その辺はご留意下さい。

.width().height()の性能向上

要素の大きさを取得したり設定するとき、 ブラウザに必要以上にレイアウト計算をさせてしまう場合があって、 これを修正したそうです。 IE は避けられないそうです。

具体的には、position や box-sizing にアクセスすると リフローが強制される場面があるそうで、 この無駄なリフローを避けるため position や box-sizing への アクセスを必要な時のみに限定することで実現しているようです。

script 要素の nonce や nomodule 等の属性のサポート

.html().append()のようなメソッドで script 要素を追加して リモートにあるコンテンツを読み込んで実行するとき、 jQuery は script 要素を分離して新規の script タグを追加します。 この過程の中で、nonce や nomodule 等のような属性は 切り落とされていましたが jQuery 3.4.0 では無視されないようになりました。

※nomodule 属性はブラウザが ES Modules をサポートしているか切り分けるために 用います。 nomodule 属性を付加した script 要素は ES Modules 対応ブラウザでは実行されず、非対応ブラウザで実行されます。

<script type="module" src="a.js"></script><!-- 対応ブラウザだけ実行 -->
<script nomodule type="text/javascript" src="b.js"></script><!-- 非対応ブラウザだけ実行 -->
<script type="text/javascript" src="c.js"></script><!-- 両ブラウザが実行 -->

ラジオボタン要素へのイベントハンドラで期待通りの状態に

記事に挙げられていた以下の例

var $radios = jQuery(".example");
var $firstRadio = $radios.first();
// 一番目をチェックしておく
var firstCheckedState = $firstRadio.prop("checked");
$radio.on("click", function() {
  console.log($firstRadio.prop("checked") === firstCheckedState);
  // →true    2番目のラジオボタンのクリック(チェック)後なので1番目の
  //   チェックは外されているはずだが 3.4.0 未満だとこの時点で外れていない
});
$radios.eq(1).click(); // 2番目をクリック(チェック)する

ラジオボタンの状態が更新される前にイベントハンドラが実行されています。 上のような挙動の修正をチェックボックスに関しては行われていましたが ラジオボタンではまだだったので修正したそうです。

jQuery.extend() によるObject.prototypeの汚染の防止

記事に挙げられていた例

jQuery.extend(true, {},
  JSON.parse('{"__proto__": {"test": true}}')
);
console.log( "test" in {} ); // →true (prototype が汚染されている)

jQuery.extend(true, {}, ...)に渡すソースオブジェクトとして enumerable な"__proto__"プロパティを含むオブジェクトを渡すと ネイティブのObject.prototypeが拡張されてしまうそうです。 これが jQuery 3.4.0 で修正されました。 以前のバージョンにも修正したい場合は次のパッチを参考にして下さい。 https://github.com/DanielRuf/snyk-js-jquery-174006?files=1

この修正後、jQuery.extend()"__proto__"という名前のプロパティを はじくようになります。"__proto__"という名のプロパティへのアクセスを jQuery.extend()に期待している人はいないだろうということで修正されました。

jQuery はセキュリティ対策を行ってはいますが、あくまで DOM 操作ライブラリ なので、このような対策にあぐらをかかず、 ユーザ入力のサニタイズなどのセキュリティを高める慣習の重要性を説いています。

Sizzle の削除準備と positional selector の deprecated 化

Sizzle は jQuery のセレクタエンジンです。 これは querySlectorAll を代表する様々な標準APIに影響を与えました。 今ではそのセレクタの多くがブラウザで Sizzle 無しに使えます。

ということで jQuery 4.0 で Sizzle を削除する予定のようです。 そのために、positional selector と呼んでいるセレクタで 非標準なもの(:first, :last, :eq, :even, :odd, :lt, :gt, :nth)を jQuery 3.4.0 で deprecated にしたそうです(Sizzle ではこれらは deprecated になってません)。

Sizzle を querySelectorAll を包む小さなラッパに置き換える予定で、 そうなると上のセレクタへの対応はほぼ無理っぽいとのことです。

上のセレクタは deprecated になって jQuery 4.0 では使えなくなるようですが、 まだそれに対応したメソッドはサポートするつもりだそうで、且つこれらの セレクタは他の手段で実現できるそうです。

ちょっと調べてみたところ、:first, :last, :eqはそれぞれ .first(), .last(), .eq()があります。:nth,:even,:oddは 標準セレクタの:nth-child()を駆使すれば何とかなりそうです。:lt,:gt.slice()でいけそうです。

その他

バグ修正のほか、jQuery 4.0 のためのコード整理が多い印象です。

  • IE 11 で同じレスポンスヘッダの複数の値がうまく取得できなかったのを修正 (jqXHR.getResponseHeader())
  • jQuery.extend(),jQuery.fn.extend()のV8での効率が少し改良
  • Shadow DOM だと要素が接続しているかどうか 適切に判別できていなかったのを修正
  • CSS のカスタムプロパティの値を設定する時、自動で"px"を付けないようにする
  • 非要素のプロパティをアニメーションする時、今までは"px"を付けて 良さそうな場合は"px"を付けていたのをやらなくなった
  • grid-column-start関係のプロパティは単位無しの数値を持つ場合があるのに 自動でpx を追加していたので修正 (※ここら辺のpx勝手に付ける系はjQuery4.0で変わる予定っぽい)
  • SVG 上で.outerWidth()が前は数値を返していたのに NaNを返すようになったので修正
  • Keyboard Event のプロパティ.codeを jQuery が生成するイベントオブジェクトに追加
  • .html()等に渡す HTML ソースにコメントが含まれていて、 そのコメントの中に開始タグが含まれていると、一文字からなる HTML 要素(<p>とか)が無視されるバグを修正
    例:

    $( ele ).html("<p>foo<!--<td>--></p>"); // ele 要素は空になってしまう
    
  • Sizzle を 2.3.3 から 2.3.4 へ。これにより幾つかの問題( CSSセレクタのパーサが出す構文エラーのメッセージが分かりにくかった、 属性セレクタに[]が入っているとセレクタ解釈に失敗することがある、等) が解決する

  • jQuery.param()null,undefinedを与えられた時、 空文字列を返すようになった。今まではエラーが throw されていた
  • jQuery 3.2.0 以降、<object>で読み込んだ文書に jQuery.fn.contents()が使えなくなったのを修正 (iFrame 以外をはじくようになってた)

スポンサードリンク