スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery 1.7.0 ~ 1.7.2 での変更箇所の自分なりのまとめ

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

  • .on().off()の導入
  • .delegate().live()の パフォーマンス向上
  • IE 6,7,8 の HTML5 のサポート強化
  • toggle 系アニメーションが直感的に動く
  • Asynchronous Module Definition (AMD) のサポート
  • jQuery.Deferred の拡張(progress)
  • jQuery.isNumeric()の導入
  • event.delegateTargetプロパティの導入
  • .removeAttr().removeData()で 複数削除ができるように
  • .is()の挙動の一部変更
  • 削除された機能
    • event.layerXevent.layerY
    • jQuery.isNaN()
    • jQuery.event.proxy()

.on().off()の導入

.on().off()は イベント登録・削除メソッドです。これらで既存の .bind()(.unbind()), .delegate()(.undelegate()), .live()(.die())の役割を 果たすことができます。それぞれの役割は、 引数の渡し方を変えることで切り替えることができます。 .on().off()の用法は 以下のようになります。

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

selector を与えると.delegate()(.undelegate()) と同じように動き、$(document)から selector を伴なって実行すると.live()(.die()) に相当する処理になります。

$('.comment').delegate('a.add', 'click', addNew);
$('.dialog').undelegate('a', 'click.myDlg');
//  ↓
$('.comment').on('click', 'a.add', addNew);
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$('a').die('click');
//  ↓
$(document).on('click', 'a', fn);
$(document).off('click', 'a');

selector を与えない、もしくは null の場合は .bind()(.unbind())になります。

$('a').bind('click', myHandler);
$('form').bind('submit', { val: 42 }, fn); // data を渡す場合
//  ↓
$('a').on('click', myHandler);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
//  ↓
$(window).off('scroll.myPlugin');

.on()への引数が3つで第2引数が文字列の時、 その引数が.bind()での data なのか .delegate()での selector なのかあいまいですが、 selector とみなされて.delegate()の処理に なるようです。 data をオブジェクトで渡すようにすれば、 いざ出くわした時に悩むことがなくなります。

1.7 でも既存の方法は使えますが、1.7 以降を使う場合は .on()(.off())の使用が 推奨されています。

.delegate().live()の パフォーマンス向上

.delegate().live()を使った場合の、 イベント登録の際の要素探索の早さをリファクタリングにより 向上させ、1.6.4 でかかる時間のおよそ半分になったそうです ( http://i.imgur.com/QHvsl.png )。

IE 6,7,8 の HTML5 のサポート強化

IE 6-8 で.html()などのメソッドで HTML5 のタグを 使いたい場合、 innerShiv などを使ったりしなければならなかったのですが、 1.7 でこれがサポートされるようになりました。 しかしそれでもまだ html5shiv などを使う必要があります。

toggle 系アニメーションが直感的に動く

.slideToggle().fadeToggle()などの アニメーションが.stop()で中止された時に ちゃんと動かなかったのを修正した( http://bugs.jquery.com/ticket/8685 )らしいです。

あと、.stop()はキューごとに止められるように なりました。用法は .stop( [queue] [, clearQueue] [, jumpToEnd] ) です。第一引数にキューの名前を指定します。

Asynchronous Module Definition (AMD) のサポート

AMD API をサポートしたため、 RequireJS や curl.js などの AMD に準拠したローダから jQuery を動的にロードしたり ready イベントをコントロールしたりできるようになったそうです。

jQuery.Deferred の拡張(progress)

jQuery.Deferred オブジェクトに新しいハンドラ deferred.progress()とその通知用メソッド deferred.notify(), deferred.notifyWith()が追加されました。 また、この導入に合わせてdeferred.pipe()deferred.then()に progress コールバックが 登録できるようになっています。

現在 jQuery.Deferred は jQuery.Callbacks を使って実装されているそうです。 jQuery.Callbacks はコールバック関数をキューして、 追加・削除・実行などの管理を柔軟に行えるオブジェクトを 生成することができます。

jQuery.isNumeric()の導入

jQuery.isNumeric()は引数に取った値が 数値かどうかを判定し、boolean 値を返します。 文字列で表した数値でも数値と判断します。 リファレンスページ の例が分かりやすいです。

// http://api.jquery.com/jQuery.isNumeric/ での例です
$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (指数表現の文字列)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (8進数表現の数値リテラル)
$.isNumeric("");     // false
$.isNumeric({});     // false (empty object)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

event.delegateTargetプロパティの導入

event.delegateTargetプロパティは .delegate()や selector を渡す.on() を使って登録したイベントハンドラの中から、 そのイベントハンドラの登録先の要素の祖先にある、 .delegate().on())を使用した 要素を取得します。

要するに.delegate()した要素を指します。 .delegate().on())を使用した イベントハンドラでない場合は、 event.currentTargetと同じものを返します。

<div id="div1" class="box">
  <div id="div2">
    <div id="div3">
      <input id="btn1" type="button" value="button1">
    </div>
  </div>
</div>
<div id="div4" class="box">
  <div id="div5">
    <div id="div6">
      <input id="btn2" type="button" value="button2">
    </div>
  </div>
</div>
$(".box").on("click", "input", function(event){
  var delt = $(event.delegateTarget);
  var curt = $(event.currentTarget);
  console.log("delt("+ delt.size() + "): " + delt.attr("id"));
  console.log("curt: " + curt.attr("id"));
});

// button1 をクリックすると
//   delt(1): div1
//   curt: btn1
// button2 をクリックすると
//   delt(1): div4
//   curt: btn2  

.removeAttr().removeData()で 複数削除ができるように

表題の通りです。複数の属性を削除したい場合は、属性名を空白で 区切って指定します。複数の data を削除したい場合は、 キーを空白で区切って指定するか、配列で指定します。

$("#id1").removeAttr("attr1 attr2 attr3");
$("#id2").removeData("key1 key2 key3");
$("#id2").removeData(["key4" "key5" "key6"]);

.is()の挙動の一部変更

.is()に渡すセレクタの中に:first, :gtなどのセレクタ(positional selectors)が 入っている場合の挙動が 1.7 で変わりました。

例えば$("p:first").is("p:last")を実行すると、 1.7 より前では、$("p:first")の返り値である jQuery オブジェクト(ここでは p 要素一つ)を元にして .is()のセレクタでフィルタリングします。 そのため、文書内に p 要素が存在すればtrueを返します。

一方、1.7 からは$("p:first")を元にせず 文書を元に適用し、それから現在の jQuery オブジェクト ($("p:first"))の最初の要素が、 適用した結果の要素にあてはまるかどうかを判断します。 コードでいうと以下のような感じの式の評価値が返ります。

return $(document).find("p:last").index( $("p:first")[0] ) >= 0;

そのため$("p:first").is("p:last")は 1.7 からは 文書内に p 要素が複数ある場合はfalseを返します。

positional selectors は jQuery の拡張で W3C の標準ではないので なるべく W3C のセレクタを使うことを jQuery 側は推奨しています。

削除された機能

event.layerXevent.layerY

Chrome のコンソールがやかましい ので deprecate の期間を置かずの削除です。 サポートしている他のプラットフォームで使う場合は event.originalEvent.layerXevent.originalEvent.layerYで使用可能です。

jQuery.isNaN()

JavaScript の同名の関数と意味が違って紛らわしく、 ドキュメント化もされてなかったので削除です。 代わりにjQuery.isNumeric()を 利用したりすることを示唆しています。

jQuery.event.proxy()

代わりにjQuery.proxy()を使うようにしましょう。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。