jQuery 3での変更点 ～ Promises/A+互換となったDeferred機能を中心に

jQuery 3で何が変わったのか？ 後編

Ajax機能

　Ajax機能に関しては、破壊的な変更が3つと、新機能が1つあります。

特殊なDeferredメソッドを削除

　$.ajaxメソッドの戻り値は、jqXHRオブジェクトで、これはDeferredオブジェクトでもありますが、このオブジェクトにあったsuccess、error、completeメソッドが削除されました。jQuery 3では、Deferred機能標準の、done、fail、alwaysメソッドを使うようにします。あるいは、Promises/A+仕様のthen、catchメソッドを使います。

　なお、$.ajaxメソッドの引数のオプションであるsuccess、error、completeのコールバックは、従来どおり利用可能で、非推奨にもなっていません。あくまで、jqXHRオブジェクトのみの変更です。

// jQuery 3では利用できない
$.ajax({
    url: "data.json",
    dataType: 'json'
}). success(function(json) {
      console.log("success");
});

// Deferred標準のメソッドの例
$.ajax({
    url: "data.json",
    dataType: 'json'
}). done(function(json) {
});

// Promises/A+仕様の例
$.ajax({
    url: "data.json",
    dataType: 'json'
}).then(function(json) {
});

// successコールバックを使った例
$.ajax({
    url: "data.json",
    dataType: 'json',
    success: function(json) {
    }
});

クロスドメインのスクリプト参照は明示的な宣言が必須に

　$.ajaxや$.getメソッドで、クロスドメインのスクリプトを参照する場合、dataTypeオプションで、scriptの指定が必須になりました。これは、意図しないスクリプトの実行を防止するためです。なお、$.getScriptメソッドでは、従来よりdataTypeにscriptが指定されていますので、特に変更はありません。

$. ajax( {
    url: "http://sample.com/create_js.php",
    dataType: "script",
    success: function( ) {
    }
} );

URLのハッシュを保持するように

　$.ajaxメソッドで指定するURLに、ハッシュ（#記号に続く文字）が含まれていても、削除せずに、そのまま送信するようになりました。

$.get、$.postメソッドの機能追加

　$.get、$.postメソッドのパラメータに、$.ajaxメソッド同様、オブジェクトによるオプション指定が可能になりました。指定できるプロパティも、$.ajaxメソッドと同じです。

// オブジェクトによる設定
$.get({
    url: "data.json",
    dataType: 'json',
    success: function(json) {
    }
});

イベント

　イベント機能では、5つの破壊的変更と、非推奨になった機能が1つあります。

$.load、$.unload、$.errorメソッドの削除

　非推奨になっていた$.load、$.unload、$.errorメソッドが削除されました。これらのイベントを扱う場合は、$.onメソッドを利用します。

// 利用できない
$("img").load(function() {
      console.log("load");
})
// $.onメソッドを使う
$("img").on("load", function() {
      console.log("load");
})

$.on("ready", fn)の削除

　jQuery 3では、$.onメソッドのイベントとして、readyイベントには対応しなくなりました。バージョン1.8から非推奨となっており、今後は、$(fn)を利用します。

$(document).on("ready", function() {
      console.log("ready");    // jQuery 3では実行されない
})

event.pageX、event.pageYの内部処理の変更

　jQuery 3がサポートするブラウザでは、イベント発生時のマウス座標であるpageX、pageYプロパティをサポートしたため、jQuery側で計算して求めていた処理が削除されました。

$.event.propsプロパティと$.event.fixHooksメソッドの削除

　jQuery 3では、イベントのプロパティ管理を見直し、パフォーマンスが向上しています。プロパティの計算やコピーは、最初にアクセスされたときに行うようになったため、イベントオブジェクトのプロパティ$.event.propsと、イベントオブジェクトのコピー時に利用する$.event.fixHooksメソッドは削除されました。

不正セレクタのイベントは即座に例外

　従来は、イベントをデリゲートされたセレクタは、イベントが発生した時点でチェックされていました。そのため、不正な文法のセレクタを見つけるのが難しい場合がありました。

　jQuery 3では、イベントがアタッチされた際にセレクタの文法が不正かどうかをチェックして、即座に例外をスローします。この機能により、不正なセレクタの影響で、イベントが補足できない事態を回避することができるようになりました。

try {
    // ":abc"は、不正な文法のセレクタ
    $("#parent").on('click', ":abc",  function(){
       console.log("click");
    });
} catch(e) {
    console.log(e); // jQuery 3では例外になる
}

$.bind、$.delegateメソッドの非推奨

　jQuery 1.7から、イベントのアタッチ、解除を行う$.on、$.offメソッドが追加されています。jQuery 3では、古いメソッドの、$.bind、$.unbind、$.delegate、$.undelegateは非推奨となりました。削除はまだされていませんが、$.on、$.offメソッドの使用が推奨されています。