おしゃれjQuery、Good Parts、Bad Parts

jQueryは互換性を保ちつつも洗練されたAPIを取り入れているので、新しく書くときは新しいAPIを使った方が良い。
liveとかセレクタの:hoverとかはBad Partsだ。

jQuery.fn.on / jQuery.fn.off

live/delegate/bind/click等は滅びた。全てonを使おう。 また、data引数を使う場合は必ずdataをオブジェクトかnullにする。dataが文字列の場合、関数の場合にセレクタ等と区別がつかないからだ。

$("body").on("click", function (event) {
  alert("Clicked!");
}, false);

また、querySelector/querySelectorAllの登場によって、:hover等のjQuery固有のセレクタは滅びた。validなCSSセレクタと、jQueryのメソッドをchainして使うこと。

$("div.article p").filter(":visible").hide();

jQuery.fn.oneは便利なので、使ってもよい。

jQuery.Deferred

非同期のコードを書くときに使う。jQuery.fn.ajaxなどのcallbackは滅びた。

$.when($.ajax("foo"), $.ajax("bar")).done(function (data) {
  var foo = data[0], bar = data[1];
  // do something
}).fail(functino () {
  $("#status").text("something went wrong...");
});

だいたいのことはできる。とは言ってみたものの、まだ発展途上なので、無理に使う必要はないかもしれない。

jQuery.fn.animate

jQuery.fn.animateはネイティブなアニメーションAPIを使用していないので、ガクガクする。いずれネイティブなAPIが整備されanimateもそれを利用するようになるだろう。それまではhttps://github.com/benbarnett/jQuery-Animate-Enhancedなどを使ってごまかすか、自分でコードを書こう。

jQuery()で要素をつくるとき

jQuery1.8からは$#parseHTML()を使おう
jQueryはセレクタとHTMLをごっちゃにしていて、$()にhtmlを渡すことができる。Bad Partsの一つだ。
本来であれば

$.html("<p>a</p>")

のように要素を作成できるべきだが、現状では$を使うしかない。

$("<a>").attr("href", "http://example.com/").text("example.com");

現状ではこれが妥協できるラインだと思う。複雑なhtml文字列を入れたい場合、innerHTMLに入れたい場合はjQuery.fn.html()が使えるが、新規要素を作成したい場合はそもそも良いAPIがない。

$("<div>")

だけ渡してhtml()を呼ぶのが良い。

jQuery.noConflict()

$関数はjQueryであるべきなので、使わない。

おまけ

https://github.com/madrobby/zeptoというjQueryでよく使う機能だけを集めたものがあって、良いデザインのAPIばかりが入っているので、コードを読んで、使えそうなところでは使って見ると良い。https://github.com/appMobi/jQ.Mobiというのもある。
JavaScript全体の流行、CoffeeScript、ES5、モバイル環境、node.jsやsocket.io、非同期処理と処理分散、などについてはいつか書きたい。