App Framework, Zepto.js 1.0 と jQuery との互換性

JavaScript

2013年12月12日に Zepto.js 1.1.2 がリリースされました (リリースノート)。v1.1 以降は IE10 に対応するなど、動作が異なる可能性があります。

App Framework は jQuery 互換のライブラリとして作られた jqMobi から派生し、改良を加えながら現在に至る。

また Zepto.js は、2013年3月4日に 1.0 正式版がリリースされた。Bootstrap との組み合わせなど、jQuery との互換性を強く意識して改良が行われているようだ。

ファイルサイズ

現状は appframework.min.js が最も小さく、minify した状態で jQuery の3割を切る 23.83 KB である。

  • jQuery 2.0.3 ―― 81.65 KB (min) / 28.57 KB (gzip)
  • Zepto.js ―― 26.58 KB (min) / 9.71 KB (gzip)
  • App Framework ―― 23.83 KB (min) / 7.75 KB (gzip)

メソッド一覧

jQuery 2.0.3, Zepto 1.0, App Framework (2013-11-19 0ae032a8a4) それぞれで使用できる関数を比較した。

.attr()/.prop()

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

Zepto v1.0rc1 では空文字列が返ってきていたが、Zepto 1.0 では null が返ってくるようになった。

App Framework でも存在しない属性に対しては null が返ってくる。

.data()

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

$.ajax() に配列データを渡した場合の差異

$.ajax() など通信系のメソッドに配列データを渡した場合、生成されるリクエスト文字列が jQuery とは異なっている。

たとえば {name: "Suzume", days: [5, 8, 13], items: [{id: 2, amount: 3}, {id: 3, amount: 5}]} というデータの場合、次のリクエスト文字列が生成される。

  • jQuery
    name=Suzume
    
&days[]=5&days[]=8&days[]=13
    
&items[0][id]=2&items[0][amount]=3&items[1][id]=3&items[1][amount]=5
  • Zepto
    name=Suzume
    
&days[]=5&days[]=8&days[]=13
    
&items[][id]=2&items[][amount]=3&items[][id]=3&items[][amount]=5
  • App Framework
    name=Suzume
    
&days[0]=5&days[1]=8&days[2]=13
    
&items[0][id]=2&items[0][amount]=3&items[1][id]=3&items[1][amount]=5

Zepto では配列の中に配列がある場合も外側の添字を省略してしまうため、受け側でデータの対応が分からなくなってしまう問題がある。一方 App Framework はすべて愚直に添字を付け、jQuery は必要最低限の添字を付けている。

解決方法に関してはこちらが詳しい。Zepto.js のプロジェクトですでに問題が指摘されており、改善の可能性がありそうだ。Zepto 1.1 では改善されている。

Zepto を使う上での注意点

Zepto では以前から ECMA 非標準の __proto__ による拡張を行っているため、 Internet Explorer で動作しない。つまるところ Windows Phone や Windows タブレットで動作しないことになる。今後の改良が待たれる。

v1.1 以降モジュール ie.js を読み込むことにより Internet Explorer でも使用できるようになった。

過去のバージョンに関する情報