jqMobi (1.11) の jQuery との互換性、Zepto とも比較

2013年11月現在、jqMobi は App Framework へ、Zepto は v1.0rc1 から v1.0 (正式版) へとバージョンアップしています。最新版 App Framework, Zepto.js 1.0 と jQuery との互換性をご覧ください。

jQuery と互換性があり、とっても軽い JavaScript ライブラリ jqMobi.

jquery-1.7.2.min.js が 93 KB なのに対し、jq.mobi.min.js (1.11) はわずか 19.4 KB。ファイルサイズだけでなく、スクリプトの初期化も圧倒的に速い。（iPhone 4 / iOS 6 の Safari では jQuery 1.7.2/1.8.2 が 70 ms, Zepto v1.0rc1 が 20 ms, jqMobi 1.11 が 14 ms 程度。iOS 5 ではもっと差が出る）

メソッド一覧

jQuery, Zepto, jqMobi 機能比較表 (2012-11) - js do it

$(selector)

セレクタへの対応は Zepto と同じく、ブラウザの Document.querySelectorAll メソッドに依存している。
セレクタにエラーがある場合、Zepto では例外が発生し、jqMobi では空の結果が返ってくる。

$("a[href^=#]") → エラー; length = 0

.attr()/.prop()

jQuery では存在しない属性を取得しようとすると undefined が返ってくる。

jqMobi の場合、 attr() では null が、 prop() では undefined が返ってくる。

Zepto では空文字列が返ってくる。存在しないのか空なのかは調べようがない。

.css()

jqMobi では jQuery や Zepto と違い、長さを指定するプロパティの値に単位が必要。また、プロパティ名はキャメルケース（ハイフンでつなぐ代りに単語の頭を大文字にする）で記述する必要がある。（WebKit 系では動くが、Firefox では動かない）

val = $elem.css("margin-left") → NG
val = $elem.css("marginLeft") → OK
$elem.css("left", 30) → NG
$elem.css("left", "30") → NG
$elem.css("left", "30px") → OK

イベントハンドラのショートカットがない

jqMobi には click や keydown など、イベントハンドラを登録するショートカットメソッドがない。

たとえば

$("#chun").click(function() { alert("chun!"); });

このようなコードは

$("#chun").on("click", function() { alert("chun!"); });

こう書く必要がある。

なぜか無いメソッド

is(selector) や eq(index), index(element) がなぜか無い。次のコードを追加することで動く。（細かい検証まではしていない）

$.fn.is = function(selector) {
	return !!selector && this.filter(selector).length > 0;
};

$.fn.eq = function(i) {
	i = +i;
	return i === -1 ? $(this[this.length - 1]) : $(this[i]);
};

$.fn.index = function(element) {
	return element ? this.indexOf($(element)[0]) : this.parent().children().indexOf(this[0]);
};

$.ajax()

jqMobi 1.11 では dataType に XML を指定したときに、XML データが返ってこない。（おそらく処理を忘れている？）
jq.mobi.js の xhr.onreadystatechange ハンドラ部分に else if (/xml/.test(mime)) { result = xhr.responseXML; } を追加することで XML 形式のレスポンスも扱えるようになる。

.data()

Zepto.js の $.fn.data は jQuery の $.data とは全く違う動作。jQuery は対象の DOM Element について JavaScript のハッシュ（オブジェクト）を作るのに対し、jqMobi では Zepto と同じく data-* 属性に書き込むため、文字列しか扱えない。

.append() と .prepend()

jqMobi は第 1 引数のみを追加する。

$("body")
  .append($("<p>1</p>"), $("<p>2</p>"))
  .prepend($("<p>3</p>"), $("<p>4</p>"));

このコードの実行結果はこうなる。

<body>
  <p>3</p>
  <p>1</p>
</body>

jQuery や Zepto ではこうなる。

<body>
  <p>3</p>
  <p>4</p>
  <p>1</p>
  <p>2</p>
</body>

ドキュメントを見ると $().append(element,[insert]) となっており、第 2 引数に true を渡すと prepend() の動作になる。実際 prepend() の定義は次のようになっている。

prepend: function(element) {
    return this.append(element, 1);
}

IEでも動く

Zepto と違い、ECMA 非標準の __proto__ による拡張を行っていないため、IE 9 以降でも動作する。Windows Phone も大丈夫。

追加情報

この記事を見て jqMobi の開発メンバーが次期バージョンに is(), eq(), index() を追加してくださいました。

jqMobi branch: 1.2

メモ用紙